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 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 3
When the gradient editor comes up, click on the brown copper gradient:
Step 4
Now we need to start changing the colours. Now change the original brown colours to the colours below!
Step 5
Now press ok, we now need to give it a stroke. Select "Stroke" and use the below settings:
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 7
Select the "Polygonal Lasso Tool" and make a diagonal selection like below:
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 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.
Tutorial comments
17.05.2008 -
Nice. You're really good at this.. ;)
01.02.2008 -
nice
31.10.2007 -
gud tut m8 :)
View all user comments for this tutorial.
Tutorial statistics
- Date added:
- 09.10.2004
- Author:
- Zymic
- User rating:
- 5/5
- Total views:
- 3450
- Total comments:
- 3