Before we actually get to the tutorial on how to make a web 2.0 navigation bar, I want to show you the difference between a regular navigation bar, and a web 2.0 bar.
Standard Navigation Bar
Web 2.0 Navigation Bar
Now, which one would you rather have on your website? Some gray and plain one? Or one that stands out! Thats what I though. 🙂
Making a web 2.0 navigation bar like the one above is very simple and can be done by practically anyone.
Step 1 – Selecting your area!
I have opened up a new photoshop document with the size 44×500. This size does not have to be the same. Just try to make it bigger than you want the actual navigation bar to be. When you are done, you can crop the image to make it a perfect web 2.0 navigation bar. Now select, with the rectangular marquee tool the actual size of your navigation bar.
Step 2 – Gradient Tool
Using the gradient tool, fill in the selected area with the colors of your choice. Make sure that the lighter color is on top and darker color is on the bottom. I have selected the following colors for my navigation bar.
Your navigation bar should look something like this now.
Step 3 – Your Buttons
Now its to right down a list of buttons/links that you would like to include in your navigation bar. Have you decided yet? Lets use the Type Tool to write out all our links. I used Century Gothic as my font and size 14. I also made all my like lowercase so that it looks more web 2.0. This is an addition so you technically can use all caps or whatever you want.
To space out my links, I wrote “home”, clicked the space bar 8 times and then wrote “forum”, 8 spaces, ect. Then I just centered everything with the Move Tool.
A tip from me to you is to write all links at one time because its simply to edit and move around.
Step 4 – Web 2.0!
Here we go! This step is really simple but has a great effect on the navigation bar. First, make a new layer. Then fill the top part of the navigation bar with white, just like in the picture below.
Now set the Opacity to 8%. If you do not know where to change the Opacity, look at the picture below.
Step 5 – Additional Touches
I would also recommend that when you are coding this, if you will be, to make a white square box, just like we did during step 4, around the link when someone hovers over it.
Congratulations, you have finished reading this tutorial on how to make a web 2.0 navigation bar. I hoped this will help you in your future projects as well as the current ones.
Here is what the navigation bar should look like now.
If you have any questions about this tutorial, please visit our support forums!
– Cezary Kubel