Strict Standards: Redefining already defined constructor for class wpdb in /home/pscloud/public_html/wp-includes/wp-db.php on line 52

Strict Standards: Redefining already defined constructor for class WP_Object_Cache in /home/pscloud/public_html/wp-includes/cache.php on line 389

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

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

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

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

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

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

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

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

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

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

Warning: Cannot modify header information - headers already sent by (output started at /home/pscloud/public_html/wp-includes/wp-db.php:52) in /home/pscloud/public_html/wp-content/plugins/postratings/postratings.php on line 651
Professional web 2.0 Navigation Bar. | Pscloud

Professional web 2.0 Navigation Bar.

10 Comments
Navigation Bar, Web Graphics, Web Design

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.

Photoshop Tutorials. Professional web 2.0 Navigation Bar.

2. Add it some Layer Styles starting with a Drop Shadow.

Photoshop Tutorials. Professional web 2.0 Navigation Bar.

3. Then a Inner Glow.

Photoshop Tutorials. Professional web 2.0 Navigation Bar.

4. Gradient Overlay. #212121, #424242 to #3e3e3e

Photoshop Tutorials. Professional web 2.0 Navigation Bar.

5. Stroke. #2a2a2a

Photoshop Tutorials. Professional web 2.0 Navigation Bar.

6. You should have something like this:

Photoshop Tutorials. Professional web 2.0 Navigation Bar.

7. Add some text using Trebuchet MS Bold 15 pt, a/a Strong.

Photoshop Tutorials. Professional web 2.0 Navigation Bar.

8. Then add it a Drop Shadow.

Photoshop Tutorials. Professional web 2.0 Navigation Bar.

9. And you got something like this:

Photoshop Tutorials. Professional web 2.0 Navigation Bar.

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)

Photoshop Tutorials. Professional web 2.0 Navigation Bar.

11. And if you want you can add it a hover, using #aefa1d as color.

Photoshop Tutorials. Professional web 2.0 Navigation Bar.

Rate Tutorial:

1 Star2 Stars3 Stars4 Stars5 Stars

10 comments on this tutorial

Let’s me think about a header i have seen before, but not as tutorial.

I like the result, really :D

Great tutorial, thanks.

Thank you for your comments ^^

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%.

Thanks, this helps a lot!

Leave a Reply

Latest Tutorials

About Us

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