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

Browse Pages: << < 1  2 

6. This is what your navbar should look so far. As you can see, by dragging our gradient differently we get somewhat different results.

image 1

7. Duplicate your button to fill up the whole navbar. Your navbar is pretty much complete.

image 2

8. This is what my navbar looks like, after I have added text and some dots to it. I also changed the navbar base color. You can modify yours however you want as well.

Navigation Bar Tutorial: Final Result (Click to enlarge)
Click to enlarge

9. If you want to create that "inset" effect, an illussion of a button being pressed down when somebody rolls their mouse over it, simply select your button layer and go to Layer>Layer Style>Inner Shadow, select about 60% for the Opacity or adjust the settings in a way you want to get that effect.

You can use this gradient technique to make a whole web site layout, it is a common technique used by web designers. I made my navbar, including rollovers using this same technique.

Click to enlarge
Click to enlarge


Author's URL: Walter Shustikov
Browse Pages: << < 1  2 
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