Fresh Photoshop Tutorials

Design a Stylish Sidebar Content Box in Photoshop

  Added on October 22, 2007 inside Designing category     |     View Comments or add a response!


Step one:

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:

Step two:

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

Step three:

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

Step four:

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:





Step five:

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

Step six:

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.

Step seven:

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.

Step eight:

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



Step nine:

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:


Step ten:

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

Step eleven:

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



Final Image:

Stylish Sidebar Content Box.


Download PSD File

Comments

Comments RSS     |     trackback uri [?]

    Web Design said on November 1st at 9:09 pm: ( )

    Awesome. Simple technique - but effective.
    thanks for sharing!
    DM

    Gabo said on November 1st at 10:51 pm: ( )

    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

    Atlantis said on April 6th at 3:18 pm: ( )

    Your blog is getting better and better! Previous posts were good, but this one is just FABULOUS.

    Steven said on April 9th at 6:30 am: ( )

    This post is awesome. I’m impressed by your style - experienced blogger, huh? Added your blog to my favs.

Add a Response!