Her

Home Photoshop Tutorials Web Layout Smooth Multi-layered Nav bar

Smooth Multi-layered Nav bar

Author: Tutorialwiz.com Author's URL: www.tutorialwiz.com More by this author

Start a new document about 600x100.

Use the rounded corner shape tool and draw a long rectangular shape. lets make it 567x30 (you can see the size of the shape you are currently drawing by viewing the "Info" Pallete".

image 1

Go to Layer->Layer Style->Gradient Overlay.

Apply a Linear gradient from top to bottom using colors #BAC3CA -> #FFFFFF

image 2

Go to Layer->Layer Style->Bevel and Emboss.

image 3

Then just add a little of dropshadow (Layer->Layer Style->Drop Shadow)

image 4

Now use the rounded corner shape tool again and create another rectangular shape above the other one, make this onea little larger than the other one. Lets make it 580x32.

image 5

Apply the following Gradient Overlay.

image 6

Colors Used: #DDE8F4 -> #7C8B9D

image 7

Now apply the following Bevel and Emboss

Then this Drop Shadow

image 8

image 9

Now use round shape tool and draw an OVAL shape over the bar.

image 10

press CTRL+T to activate the transform tool. position your cursor just outside one of the corners so we can rotate the shape tool.

image 11

CTRL+CLICK on the oval shape layer to make a selection of it. then hide that layer and choose the top bar layer (the larger one).

image 12

Then just hit delete to reveal the bottom bar.

Repeat the selection process to create areas for your other nav buttons

Here is mine:

Smooth Multi-layered Nav bar

Download .psd file