Contact
Photo Effects
Photoshop Basics
Gradient Navigation Bar
If you're new here, you may want to subscribe to my RSS feed.
3. Layer Styles
Apply the following Layer Styles to the ‘main’ or ‘bar’ layer:
Inner Shadow
Gradient Overlay
Now you should be left with a result like so:
4. Highlights
Select the main bar layer and contract the selection by 2 pixels. (Select > Modify > Contract)
With the Gradient Tool make a White to Transparent gradient from the bottom to near the top.
Change the Layer Mode to Overlay.
If you still have the selection up, contract the selection again by 1 pixel. If not, reselect the bar and contract the selection by 3 pixels.
Duplicate the highlight layer and press delete.
Now select the main bar again, this time you don’t need to contract the selection. Just make a White to Transparent gradient inside of the selection.
Delete half of the gradient vertical-wise.
Change the layer mode to Overlay and lower the opacity to 70%.
5. Text
Add your text now inside of the bar. I used Tahoma 11pt with no AA (Anti-Aliasing)
I also added a solid Drop Shadow.
Your Gradient Navigation Bar is now ready for slicing and use in a website template, or wherever you’d like to use it!
Pages: 1 2