Stylish Glossy Clan-Themed Navigation Bar
This is what we’ll be creating:
A nice, glossy-style navigation set, good for your local clan website! 
1. Making the Navigation Bar
Start off by creating a new document, any old size will do. Now fill your background with a very dark color (I’ve used #1a1a1a here.)
Create a new layer, then get out the Rectangular Marquee Tool, using it make a navigation-bar-sized selection on your document, fill your selection with the same color as used in the background.
(note that my selection was 40 pixels in height, width doesn’t matter)
After filling your new layer, apply this gradient overlay to make it stand out a little bit.
Create another new layer them use the rectangular marquee tool to make a selection on the top of the navigation bar, this time make it only half the height of the navigation bar itself, and all of the width.
Using the Gradient Tool, make a white to transparent gradient from the top to the bottom of your selection, if you don’t know how to do this, just fill the selection with white.
Change the layer mode for your ’shine’ layer to either Soft Light or Overlay, and lower the opacity to about 20-50%.
2. Creating the Buttons
Under your ’shine’ layer, make a selection, all the height of the bar but only about 80-120 pixels in width.
On a new layer named ‘button,’ fill the selection with a nice blue (#2a88c5) and apply the same Gradient Overlay as used before on the navigation bar layer. You should have something that looks like this now:
3. Add Text Navigation
Create a new layer and write out some text on top of your button layer, use white as the primary text color. After you’ve made your text apply the following layer styles:
I added in the rest of the bits of text with a slightly different stroke and added a few tiny highlights to my navigation bar, and I’m finished!
Thanks for reading the tutorial everyone, I hope you enjoyed it! You can download the PSD file from this tutorial from here: Stylish Glossy Clan Navigation Bar PSD download.
You must be logged in to post a comment.
21 responses
Excellent tutorial, thanks!
Good tutorial! nice
nice thx
really a nice tutorial. Keep going
sweeeeet:)
Hey, really good tutorial, good job
That’s great ! Very good tutorial&good job !!!
Nice tutorial (I especially like that you explain some of the other choices – colors of the backgrounds, etc). I don’t typically like my text sunk in that far, but find that Bevel & Emboss don’t really offer a good “1px” bevel.
Instead, I take the image/word/etc, make a mask, new layer and fill it with white. I then drag the new layer behind the original and nudge the white layer down one pixel. Depending on the lightness of the background, fading the opacity to around 40% produces a nice stamped look.
Thanks!
Nate
Hey thanks for the in-depth comment, Nathan.
Thanks everyone else for the comments aswell. I quite like the result I made with this tutorial heh
Great tutorial, thanks very much
tkz a lot
verry usefull 
Wow! Thanks!!
Very useful, you are a master =D
The color selection it’s awesome!!!
No more comments…
Thanks! Thanks!!!!!
Thank you very much.
This rocks and i actually got it right!
It will look lush on my site, well when i upload it, it will.
once again Thank you !x
it’s awesome.thanks
very good tutorial
congratulations!!!!
very very useful and real good tutorial thanks
This is a very nice tutorial!
Also if people are wondering how the extra bit at the end is done, then simply make a selection with the marquee tool – about 5 pixels in height. Then just fill it with a white to transparent gradient (top – white, bottom – transparent) then change its layers blending mode to overlay.
AWESOME!
Does anyone know the name of the font used on here???
Great and greatest tutorial
Very useful things
Thanks a lot…
Great and greatest tutorial
Thanks a lot
Wonderful!!!!!!!!!!!!!
Dale Hay ,
it’s not so simple to as you mentioned for the end, there is inner glow and stroke need to be applied, you can see the bottom for better understanding :0)