Create an amazing Web Navigation Bar with a Web 2.0 Style
1. Start by opening a new 600 * 140px file. Now select the Rounded Rectangle Tool and make a small rectangle like in the image below
2. Apply these layer styles to it: Inner Glow
3. Gradient Overlay: #5e80a3 ,#839db8 and #b8c7d6
4. Stroke: #5e80a3
5. This is how it should look
6. Now write your links using Segoe 14 pt #ffffff
7. Apple this layer styles to the text links: Stroke: #53769a
8. Create a new layer, select the Rectangle Marquee Tool, make a 1px width line and fill it with #ffffffs
9. Duplicate this layer and place each line between each link. Now select the Rectangle Marquee Tool again, make a rectangle at the bottom that selects all of the lines and go to Select -> Modify -> Feather and apply a 5px Radius. Press Del and do the same to the top part of the lines.
10. Change the line’s layer blend mode to Soft Light
11. With the Rectangular Marquee Tool, select the inside part of your link(between each line) and fill it with any color
12. Now apply a Gradient Overlay from the Layer Styles using: #567595, #728fae #b3c3d3
13. And this is how it should look
14. Now make a small rectangle using the Rounded Rectangle Tool with 2px Radius and #ffffff
15. Apple these layer styles to the shape: Inner Shadow
16. Gradient Overlay: #e6e6e6 to #ffffff
17. Stroke: #5e80a3
18. This is what it should look now
19. Write “Search” inside the shape using Segoe 12pt #7b7b7b
20. Add the Magnifier icon from f3 Silk Icons and your Nav Bar is finished. This is the result showing both states of the nav bar, on hover and normal.
Rate Tutorial:
57 comments on this tutorial
Good tut man.
very nice tut! thanks
it is very cool
[…] Web 2.0 Nav Bar | Pscloud (tags: photoshop tutorials navbar webdesign) […]
Awesome Steps…Very nice in short way….Keep it up..
really cool, i will try this on a future website, this will make visitors love the website 
wow….
A tutorial i actually understanded ^^
VERY NICE!
how do i get this to work in the code?
Also habe schon lange nicht mehr so einen guten Blog gefunden. Bin zuf
Yes, how do we get this to work in code, while this is helpful, translating it into HTML is a different story…. can anyone assist?
To get it into the html you must cut up the image into sections using the square marquee tool and use ctrl j to make it into a new layer.Use guides to make sure you are sectioning the image exactly. Then make each image into a background img for each of the html elements in your navigation menu. Use a tutorial such as http://www.alistapart.com/articles/slidingdoors/ to help you with the positioning if you’re using CSS and a , otherwise use tables and put the background images into each .
Very cool!
Thanks…
your tutorials are very helpful. Thanks
Ehi ho, ich bin echt stolz in deinem Blog gelandet zu sein. Hier werde ich wohl mal oefters reinschauen. Liebe Grue
whoa, good
[…] Create an amazing Web Navigation Bar with a Web 2.0 Style […]
Seriously mate - really great stuff - planning on implementing something like this with my new site redesign
hanx for the information. Time will see if I can read more about. If there is more information in your blog, it would be nice if you give me the information.
Great tut!!! thats it …
really beautiful
can’t see images 
Where are the images !! ??
youre an amateur…
i like it…
what do you mean he’s amateur.
can’t see images
Posting to see the images..
[…] Read tutorial No Comments Leave a Commenttrackback addressThere was an error with your comment, please try again. name (required)email (will not be published) (required)url […]
posting for images … sorry
where are the images? Why are there so many freaking advertisements? This is lame.
Nice tutorial, it’s a shame you have to spam it with advertisements and force people to leave comments in order to see the work.
lemme see some pics
I CAN HAZ TUTORIAL
Great tutorial! Thanks!
[…] Link : Photoshop Tutorial - Creating Web 2.0 Style Navigation Bar […]
it is looking cool. i like it very much
dddsddd
why I cant see a pictures
to see the images, click on “comments” underneath the title near the top of the page. Worked for me 
It is good to read this article about web 2.0. Thank You!
thanks for tute, very helpful
brilliant tutuorial. easy to follow and create.
Many many thanks.
looks good
[…] Bar de navigation Web 2.0 […]
good 1
IMPRESSIVE
Спасибо за такой труд, это то что нужно!!!!
imagesssssss
pictures ?
WoW… really nice tutorial…
Fecking beautiful outcome.