Navigation Bar

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

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

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.

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