Strict Standards: Declaration of Walker_Page::start_lvl() should be compatible with Walker::start_lvl($output) in /home/pscloud/public_html/wp-settings.php on line 133

Strict Standards: Declaration of Walker_Page::end_lvl() should be compatible with Walker::end_lvl($output) in /home/pscloud/public_html/wp-settings.php on line 133

Strict Standards: Declaration of Walker_Page::start_el() should be compatible with Walker::start_el($output) in /home/pscloud/public_html/wp-settings.php on line 133

Strict Standards: Declaration of Walker_Page::end_el() should be compatible with Walker::end_el($output) in /home/pscloud/public_html/wp-settings.php on line 133

Strict Standards: Declaration of Walker_PageDropdown::start_el() should be compatible with Walker::start_el($output) in /home/pscloud/public_html/wp-settings.php on line 133

Strict Standards: Declaration of Walker_Category::start_lvl() should be compatible with Walker::start_lvl($output) in /home/pscloud/public_html/wp-settings.php on line 133

Strict Standards: Declaration of Walker_Category::end_lvl() should be compatible with Walker::end_lvl($output) in /home/pscloud/public_html/wp-settings.php on line 133

Strict Standards: Declaration of Walker_Category::start_el() should be compatible with Walker::start_el($output) in /home/pscloud/public_html/wp-settings.php on line 133

Strict Standards: Declaration of Walker_Category::end_el() should be compatible with Walker::end_el($output) in /home/pscloud/public_html/wp-settings.php on line 133

Strict Standards: Declaration of Walker_CategoryDropdown::start_el() should be compatible with Walker::start_el($output) in /home/pscloud/public_html/wp-settings.php on line 133

Warning: Cannot modify header information - headers already sent by (output started at /home/pscloud/public_html/wp-settings.php:133) in /home/pscloud/public_html/wp-content/plugins/postratings/postratings.php on line 651
Dark Navigation Bar | Pscloud

Dark Navigation Bar

34 Comments
Navigation Bar, Web Graphics, Web Design

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.
Adobe Photoshop Free Tutorials

2. Apply the following layer styles to it. Inner Glow: #67686c
Adobe Photoshop Free Tutorials

3. Gradient Overlay: #000000 to #505153
Adobe Photoshop Free Tutorials

4. Stroke: #25262a
Adobe Photoshop Free Tutorials

5. It should look like this
Adobe Photoshop Free Tutorials

6. Now, add your links using Trebuchet MS Bold 13 pt Strong #ffffff
Adobe Photoshop Free Tutorials

7. And add this Drop Shadow to it
Adobe Photoshop Free Tutorials

8. This is how it should be now
Adobe Photoshop Free Tutorials

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%
Adobe Photoshop Free Tutorials

10. Repeat step 9 but using #ffffff and 10% Opacity
Adobe Photoshop Free Tutorials

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
Adobe Photoshop Free Tutorials

12. Duplicate the layer and add it these layer styles. Inner Glow:
Adobe Photoshop Free Tutorials

13. Gradient Overlay: #1e7bbb to #8bc6f2
Adobe Photoshop Free Tutorials

14. Stroke: #0a0605
Adobe Photoshop Free Tutorials

15. This is what you should have so far
Adobe Photoshop Free Tutorials

16. Create a new layer, select the Rounded Rectangle Tool and make a small rectangle with #ffffff
Adobe Photoshop Free Tutorials

17. Apply these layer styles: Drop Shadow
Adobe Photoshop Free Tutorials

18. Inner Shadow
Adobe Photoshop Free Tutorials

19. Gradient Overlay: #ffffff to #f2f2f2
Adobe Photoshop Free Tutorials

20. This is what it should look like
Adobe Photoshop Free Tutorials

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.
Adobe Photoshop Free Tutorials

Rate Tutorial:

1 Star2 Stars3 Stars4 Stars5 Stars

34 comments on this tutorial

Damn, you make really nice nav bars :D

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 ++ :D
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 […]

hi,i am from China.thanks!Your website is very cool.it’s very usefull.

wow, grate tutorial

Hay Thanks, What is the application? Adobe PhotoShop or some thing else?

I think Adobe photoshop, I dont know…

Our company is one of the leading manufacturers & wohlesalers of brand makeup in china.We wholesale the cheapest cosmetics and doing OEM orders, which including MAC, Benefit, Chanel, Nars, OPI.

http://www.maccosmetics1984.com
Our company is one of the leading manufacturers & wohlesalers of brand makeup in china.We wholesale the cheapest cosmetics and doing OEM orders, which including MAC, Benefit, Chanel, Nars, OPI.

http://www.maccosmetics1984.com
welcome to maccosmetics1984 store
We are a manufacturers & wohlesalers of Mac Mascara, GHD Hair Styles, Mac cosmetics in china.We wholesale the cheapest MAC cosmetics and doing OEM orders, which including MAC Cosmetics, GHD Hair Styles.

http://www.maccosmetics1984.com
We are a manufacturers & wohlesalers of Mac Mascara, GHD Hair Styles, Mac cosmetics in china.We wholesale the cheapest MAC cosmetics and doing OEM orders, which including MAC Cosmetics, GHD Hair Styles.

http://www.maccosmetics1984.com
our company is a manufacturers & wohlesalers of Mac Mascara, GHD Hair Styles, Mac cosmetics in china.We wholesale the cheapest MAC cosmetics and doing OEM orders, which including MAC Cosmetics, GHD Hair Styles.

wow, grate tutorial

There are too many images! :-(

Everyone loves what you guys are usually up too.

Such clever work and reporting! Keep up the very good works guys I’ve included you guys to blogroll.

Leave a Reply

Latest Tutorials

About Us

Pscloud is a weblog powered by Wordpress with Photoshop tutorials for dummies.