Zymic

Webmaster resources

Professional XHTML & CSS Coding

Including Wordpress & Vbulletin from $145 - Learn More

Adobe Photoshop

Free Tutorials » Adobe Photoshop » Navigation Bar

Learn how to create a navigation bar for your web site.

Step 1

Start a new document700 by 500 pixels and then make a new layer
Select the "rectangular marquee tool" and select "Fixed Size" and fill in the size from the below image:

Step 1 diagram

Step 2

Now click anywhere near the middle of your canvas to make the selection.
Then fill the selection in with the colour white.

Open up the blending options, [ layer > layer style > blending options ] and select "Gradient Overlay" and double click where it says "click here" (in photoshop) on the example image:

Step 2 diagram

Step 3

When the gradient editor comes up, click on the brown copper gradient:

Step 3 diagram

Step 4

Now we need to start changing the colours. Now change the original brown colours to the colours below!

Step 4 diagram

Step 5

Now press ok, we now need to give it a stroke. Select "Stroke" and use the below settings:

Step 5 diagram

Step 6

Press OK to close the blending options.
We now need to add some links to the bar, select the Text tool and start typing out your links! MAKE SURE you leave a small gap between the links as it will help you later on. This is my result:

Step 6 diagram

Step 7

Select the "Polygonal Lasso Tool" and make a diagonal selection like below:

Step 7 diagram

Step 8

Now select your gradient bar layer (first layer you made), do not deselect yet. Now press delete and then ctrl+D to deselect! You should have somthing like this:

Step 8 diagram

Step 9

Repeat the same selection and delete process inbetween all of your links.

Step 10

Below is my final result, click to see the large full image.

Step 10 diagram

Tutorial comments

17.05.2008 -

lsc says …

Nice. You're really good at this.. ;)

01.02.2008 -

Oleg2tor says …

nice

31.10.2007 -

megalogs92 says …

gud tut m8 :)

View all user comments for this tutorial.

Tutorial statistics

Date added:
09.10.2004
Author:
Zymic
User rating:
5/5
Rate tutorial:
Total views:
3450
Total comments:
3

Advertisements