Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Navigation Bar

Navigation Bar


1. Create a new document however big you want your navigation bar. I am using 400x30. The width can be extended.

2. Select the background layer and fill it with a gradient. I am using a gradient of #296232 to #1f8128 from top to bottom.

3. Create a new layer and select the Single Row Marquee Tool. image 1

4. Click anywhere on your canvas and fill with white on the new layer. Move the line up 1px and fill with black. Now move the layer up to the top of the canvas.

5. Change the opacity to 30%

6. Duplicate the layer by pressing Ctrl + J then flip it vertically. Move the layer to the bottom of the canvas.

image 2

7. Select the text tool. Set the font to Tahoma and the font size to 12px

8. Type your links in then apply these blending options:

image 3

This has the same effect as duplicating your text layer setting it to black then moving the layer underneath and moving the position down 1px and to the right 1px. This way just makes it easier.

9. Finished navigation bar:

Navigation Bar



Author's URL: Skeletorscorpse
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Navigation Bar"

Captcha