Create an amazing Dark Navigation Bar in this full tutorial that explains the 3 states of the nav bar, on hold, on click and hover.
1. Start by opening a new 580 * 100px file. Select the Rounded Rectangle Tool and make a small rectangle in a new layer and with any color. Right click over the layer and select Rasterize Layer.
2. Apply the following layer styles to it. Inner Glow: #67686c
3. Gradient Overlay: #000000 to #505153
4. Stroke: #25262a
5. It should look like this
6. Now, add your links using Trebuchet MS Bold 13 pt Strong #ffffff
7. And add this Drop Shadow to it
8. This is how it should be now
9. Create a new layer. Select the Rectangular Marquee Tool and make a 1px width selection like in the image below, fill it whit #000000 and change Opactiy to 30%
10. Repeat step 9 but using #ffffff and 10% Opacity
11. Duplicate last layer(both lines) for as many links as you have and place the lines between each link. Now, select using the Rectangular Marquee Tool between both lines of a link, create a new layer and fill it with #171717
12. Duplicate the layer and add it these layer styles. Inner Glow:
13. Gradient Overlay: #1e7bbb to #8bc6f2
14. Stroke: #0a0605
15. This is what you should have so far
16. Create a new layer, select the Rounded Rectangle Tool and make a small rectangle with #ffffff
17. Apply these layer styles: Drop Shadow
18. Inner Shadow
19. Gradient Overlay: #ffffff to #f2f2f2
20. This is what it should look like
21. Just write some text in the search field and it’s finished. This are the 3 “states” of the Navigation Bar, on hold, on click and hover.
Rate Tutorial:
31 comments on this tutorial
Grate tutorial. Simple and easy to follow. Love it! Try to add a bit more texture to it, it would look even better 
tutorial is ownage!
reputation ++ 
to bad this doesn’t count on this site
nice I’m just not good enough with dreamweaver to put it html
Wow! I like it, simple and beautiful! Thanks!
Thank you for your comments! 
thanx man, it is wery nice and simple totorial, but i dont know how to save this project, in what format (gif, jpeg, png, or some else….)
thx.
@cimi: I would recommend .jpeg
Thanks for your comment.
[…] el sitio web Pscloud nos explican, en un pequeño tutorial, como armar un menú de navegación muy al estilo web2.0. En no más de 20 (veinte) pasos obtendremos un menú como el siguiente que lucirá muy bonito en […]
[…] con Photoshop 24 11 2007 En el sitio web Pscloud nos explican, en un pequeño tutorial, como armar un menú de navegación muy al estilo web2.0. En no más de 20 (veinte) pasos obtendremos un menú como el […]
[…] de crear barras de navegación con un toque especial, de seguro este tutorial que encontré en PSCloud, te vendrá muy bien, puesto que en 21 pasos te enseñan como obtener una barra de navegación muy […]
[…] de crear barras de navegación con un toque especial, de seguro este tutorial que encontré en PSCloud, te vendrá muy bien, puesto que en 21 pasos te enseñan como obtener una barra de navegación muy […]
Great tutorial - thanks for sharing!
DM
PS. Don’t understand some comments, as they’re not in English (and Google translate is a bit poo at these translations)
Thats a sexy navbar!
Lovely. Good work
I Couden’t see any picture in your post.
hi i as doing the apple nav bar tutorial and i dont have the font Segoe UI and i cant find anywhere to download it can you email it to me ?
To view images you need to amend the web address to include all the w’s so it would be
http://www.pscloud.com/web…
I can’t see the graphic examples for the stages described - have followed uto stage 15 blind so far looks good but have no idea if it’s anything like the tutorial. Have got all the wwws as explained above:
http://www.pscloud.com/web-design/dark-navigation-bar/
I have the w’s and still no images.
I also notice the problem looking at your categories section where the stars should be:
http://www.pscloud.com/category/web-graphics/
Again with the w’s.
I think you’re missing the w’s in your img tags.
You might have a look at your htaccess file for appending the w’s automatically (assuming your on apache).
Good Luck.
Sorry I didn’t read all of the comments before. Shaun already noted the w problem.
cool site for my mind its very goodPlease, send your abuse here!!! send.your.abuse.here@gmail.com
cool site for my mind its very goodPlease, send your abuse here!!! send.your.abuse.here@gmail.com
Awesome. Your tutorials ROCK! Thank you thank you thank you!!!
why must i leave a reply to see the tut.
I can’t see the graphic examples for the stages described
uhh i li
You are great Man!
Damn, you make really nice nav bars