Design a Stylish Sidebar Content Box in Photoshop
Added on October 22, 2007 inside Designing category | View Comments or add a response!
Start with a large, black canvas. In your layers window make a new layer set, name it Arrow.
Using your pen tool with paths selected, in a new layer draw the 105 x 27 pixels, #008CC6 shape you see on the picture below.
Add a gradient overlay layer style:


Again using your pen tool, draw the 106 x 18 pixels, #005178 shape shown on the picture below.
Add a gradient overlay layer style:


Duplicate your arrow layer set. Above your screen choose Edit then Transform then Flip horizontal. Connect both shapes.

Choose your polygon tool, under polygon options set the settings provided on the picture below.
In a new layer create a 14 pixels radius, #005178 triangle using your polygon tool.
Add the following layer styles:






Make a new layer and leave it blank, Merge your blank layer with step four layer.

Once you merge your two layers, resize the shape structure by 20%. Above your screen choose Edit > Transform > Rotate upside down.
Now choose Filter > Sharpen > Sharpen more.

Now make another #005178 triangle in a new layer. Then apply the same layer styles from step four. Place this layer behind step six on your layers window.

Now add the menu box. Create a new layer and draw a 190 x 104 pixels, #141414 rounded rectangle.
Add the following layer styles:




In a new layer draw a 185 x 19 pixels, black rectangle. Use your rectangle tool so you can use the fixed size setting under rectangle options to make the exact rectangle.
Add the following layer styles:



Duplicate your black rectangle from the last step and fill your menu box with duplicates.

In a new layer draw a 179 x 19 pixels, #008CC6 rectangle using your rectangle tool.
Add the following layer styles:



Stylish Sidebar Content Box.

Download PSD File
|
|
iEntry 10th Anniversary
RSS


Comments
Comments RSS | trackback uri [?]
Awesome. Simple technique - but effective.
thanks for sharing!
DM
Thanks, really nice, learnt a lot.
I was wondering how custom wp templates were designed. You gave me a lot of ideas. Photoshop is powerful, but I need to feed my imagination with well crafted tutorials, like yours.
thanks again for sharing
Your blog is getting better and better! Previous posts were good, but this one is just FABULOUS.
This post is awesome. I’m impressed by your style - experienced blogger, huh? Added your blog to my favs.
[...] Muallif: http://www.stumbleondesigns.com [...]
Add a Response!