Zymic

Webmaster resources

Follow us on Twitter!

Hosting status updates - Click here

Adobe Photoshop

Free Tutorials » Adobe Photoshop » Stylish Navigation

Create a smooth stylish navigation for your web site.

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

Tutorial comments

25.12.2012 -

ecigcharleston says …

good tutorials. it is more helpful for people who wants to do Adobe photoshop.

15.09.2012 -

Trekking says …

Excelente articulo.

Viajes de aventura en todo el mundo con Trekking y Aventura

Viajes aventura Trekking. Y Aventura

www.trekkingyaventura.com

21.06.2012 -

webmediatree says …

cool navigation really match up the whole theme

21.04.2012 -

happy2get says …

Online Store:
( http://www.happy2get.com )
you can find many cheap and fashion stuff
Nike air max shox rift $30--39;
Ed Hardy AF JUICY POLO Bikini $20;
Handbags (Coach lv fendi d&g) $30
T shirts (Polo ,edhardy,lacoste) $15
Jean(True Religion,edhardy,coogi) $30
Sunglasses (Oakey,coach,gucci,Armaini) $15
New era cap $15
Bikini (Ed hardy,polo) $20
((( http://www.happy2get.com )))
=====((( http://www.happy2get.com )))=====
ACCEPT PYAPAL and CREDIT CARD and CASH
DELIVERY TO YOU DOOR TO DOOR
FREE SHIPPING,accept paypal
BEST QUALITY GUARANTEE!!
SAFTY & HONESTY GUARANTEE!!
FAST & PROMPT DELIVERY GUARANTEE!!
===(http://www.happy2get.com )
===( http://www.happy2get.com )===
===( http://www.happy2get.com);===
===( http://www.happy2get.com )===
===( http://www.happy2get.com);===
===( http://www.happy2get.com )===

11.03.2012 -

ameliafifah says …

goood, thanks

View all user comments for this tutorial.

Tutorial statistics

Date added:
01.04.2005
Author:
Jack
User rating:
4/5
Rate tutorial:
Total views:
31837
Total comments:
43

Advertisements