Learn to make a good looking Navigation bar with a Professional Web 2.0 style, using layer styles and also you can add it a nice and simple hover.
1. Make a rectangle with the Rounded Rectangle Tool, as shown below.
2. Add it some Layer Styles starting with a Drop Shadow.
3. Then a Inner Glow.
4. Gradient Overlay. #212121, #424242 to #3e3e3e
5. Stroke. #2a2a2a
6. You should have something like this:
7. Add some text using Trebuchet MS Bold 15 pt, a/a Strong.
8. Then add it a Drop Shadow.
9. And you got something like this:
10. Then make some stripes using the Type Tool and #b3b3b3 as color, as shown below and then change the mode to Vivid Light. (use the following character | for the stripes)
11. And if you want you can add it a hover, using #aefa1d as color.
Rate Tutorial:
14 comments on this tutorial
Great tutorial, thanks.
Thank you for your comments ^^
[…] PSCloud Posted in Photoshop, […]
Excellent tutorial. Well done.
Nice ‘n’ Easy 
Nice tutorial. Very easy to follow.
I like this tutorial, but the inner glow is a little much.
If you want it at that size, usually a lower opacity works best, or soft light.
Myself I go for the 1 px inner stroke to make it look like a double border 
I think the submit button below the comment box has it actually.
Thanks for the tutorial. I found it looking good with the diamond in the first part of the gradient at 90%.
Nice tutorial! Good job, but one question…
(I’m a bit new to Adobe Photoshop stuff) How do you add the hover effect?
Jay:
To do the roll over effect you need a good knowledge of web design , or a program such as Dreamweaver… You save the nav bar as slices then save it again with the font color changed , finally in your web editor you would specify what images to swap with what. , basically it just takes your original image , and replaces it with the image you designate as the “Hover” or “Rollover” State hope this helped - Dale
I tried this tutorial and the result looked nothing like that. I have checked each blending option and every setting is the same. Perhaps you should upload the PSD or the Layer Style so we can easily use this on our own projects.
amateuristic…
cool,but what version of photoshop did you use
Let’s me think about a header i have seen before, but not as tutorial.
I like the result, really