Adobe Photoshop Totorial : Stylish Navigation

Step 1

Fill the background of your canvas in with the colour #0E3D4A Make a new layer set, [ Layer > new > layerset ], name it “Button1″ Make a new layer. Grab the rectangular marquee tool, set it a fixed width of 186 pixels and a height of 24 pixels. Fill the selection in with the colour #1A4C5A
Step 1 diagram

Step 2

Make a new layer, zoom in and make a selection as shown below. Make sure you go 1 pixel within the widths and top of the first layer, as shown below:
Step 2 diagram

Step 3

Keep the selection, change your foreground and background colours to:
Step 3 diagram

Step 4

Using the gradient tool, drag from bottom to top of the selection to form a gradient like below. And then press CTRL+E to merge layers 1 and 2 together.
Step 4 diagram

Step 5

Bring up the blending options and set the outer-glow options and press OK:
Step 5 diagram

Step 6

Now make a new layer, grab the pencil tool, zoom in and draw a black and white line as shown below:
Step 6 diagram

Step 7

Set the blending mode to “overlay” and opacity to 38%
Step 7 diagram

Step 8

Make a selection like below (and a new layer) using the elliptical marquee tool:
Step 8 diagram

Step 9

Fill the selection in with white and then: Blending modes > gradient overlay:
Step 9 diagram

Step 10

Hold CTRL and click the current layer (in layers pallet) to make a selection of the circle. Make a new layer and then go to: Select > Modify > Contract [2pixels] to make a selection 2 pixels within the circle gradient layer. Fill the selection in with any colour, it doesn’t matter. Bring up the blending options, gradient overlay and press OK.
Step 10 diagram

Step 11

Your button should now look like below:
Step 11 diagram

Step 12

Lets add a bit more shine (optional) to the button, zoom in, CTRL click on the current layer in the layers pallet to make a circular selection. Make a new layer, grab the elliptical marquee tool, hold ALT (with the selection still running) and drag across the selection to form a selection similar to below:
Step 12 diagram

Step 13

Fill the selection in with white, set the blending mode to overlay and opacity to 30%!
Step 13 diagram

Step 14

Now we need to duplicate the layer set. Click on the layer set heading “Button1″ in the layers pallet, and click duplicate layer set.
Step 14 diagram

Step 15

Now move the new layer set below the first button, to do this click on the Button1Copy layer set heading and move it using the move tool.
Step 15 diagram

Step 16

Now duplicate the buttons until you have enough for your navigation!
Step 16 diagram

Step 17

Add your links and your finishing touches! Right click > save target as on the below image to download the PSD file.

Step 17 diagram

Got question? go here.

Credits: Jack