Xtreme Navigation Bar
In this tutorial you will learn how to create the navigation bar shown above. Almost all the effects are create using the Photoshop Layer Styles, so you will find this techniques really easy.
Let’s get started!
Step 1.
Create a new Photoshop Document (File->New) with 750 pixels width and 130 pixels height. Press Ctrl/Command I to invert the colors of the background. Now you should have a black background.
Create a new Layer (Ctrl/Command N). I named it “navbar”. Get the rounded rectangle tool (U) and with the path option selected (see screenshot below) draw a rectangle similar to the one shown below.
Right Click the path and chose fill. Fill it with “#ae005f”.
Time to add the Layer Styles (Layer->Layer Style):
Step 2.
We will add the glass effect now. Ctrl/Command Click the “navbar” layer icon from the layer pallet to select all the navigation bar. Using the Rectangular Marque Tool(M) hold Alt down and make a selection that goes over the bottom of the navigation bar.
Create a new layer (Ctrl/Command N). I named it glass. Fill the selection with white, on the new layer (Edit->Fill). Now set the opacity of it (the glass layer) to 15-25% (Layer->Layer Style->Blending Options).
Step 3.
Zoom In to 600-800% and make a small selection similar to this one. Create a new layer (Ctrl/Command N). I named it border.
Fill the selection with white on the new layer (Edit->Fill). This is the Border that we will use as delimitation between buttons. Feel free to move it around so that you have place to write the text that will be contained in the button.
Time to add the Layer Style (Layer->Layer Style):
Adding the text is easy right. Just use the Text Tool :).
Step 4.
Our buttons should have at least to states. We will now create the overstate or the disabled state. In this tutorial we will use only 2 states but you can play with the overstate a bit and get a lot of other possible states.
Ctrl/Command click the “navbar” layer. Now using the same technique used for the glass effect, deselect all the part that doesn’t belong to the first button. (Use the Rectangular Marquee Tool (M) and Hold Alt while drawing the selection.)
Create a new Layer. I called it “overstate”. Fill the selection (Edit->Fill) with black (#000000) and move the “overstate” layer under the “glass” layer.
Apply the following blending options to the “overstate” (Layer>Layer Style>Blending Options):
Now you are almost done. The next buttons are done in the same way. Just take a look at step 3 and 4 again and make the next buttons. Do note that you will have to duplicate the Border Layer a few times, to make the other buttons stand out. You can do that by pressing Ctrl/Command J with the Border layer selected and the moving the duplicates holding Ctrl/Command + Shift. Like that they will remain on the same horizontal position.
Step 5 (Optional).
Want to change the color? Maybe you don’t really like this girly color or you prefer green or blue… It’s very simple to change that! Select the top layer, the one that is on top of all the others then just go to Layer -> New Adjustment Layer -> Hue/Saturation and play with the Hue Slide.
I hope you enjoyed this tutorial and that you will find a grate way to use this tricks in your designs. If you want to stay in touch with this blog then Subscribe to RSS Feed. Thank you! :D
Oh and btw! If you want the PSD file here it is:
Download: Photoshop PSD File.
Ash The Great said... 09 January 2008 09:04
Hey, I was just wondering. I'd like to have a navigation bar on top of my current blog layout. It's http://thecoconutchronicles.blogspot.com.
How would I go abt doing it, I haven't the faintest clue on how to make one...
Agilius said... 09 January 2008 17:49
You need to know CSS and XHTML to put this on your blog. First you need to slice the final design into parts, then save them on your web host and then code the navigation part and add it to your blog template.
Avenged said... 02 February 2008 08:59
i have nav bars,but it sucks so im hoping that u could teach me on how to add this on my blog step-by-step.u can reach me by my e-mail - terkias_bayu@yahoo.com.i owe u much if u helped me!thank you
Jake said... 30 March 2008 06:33
Hello,
I followed your tutorial and created the navigation bar on the my site's psd file. On the last step when we add the layer mask to adjust the hue / saturation so that the bar is the color we want it also adjusts the hue / saturation of all the layers below it, in my case all the site elements that the bar is supposed to be above.
Is there a way to adjust the hue / saturation on only the navigation bar so that it does not affect all the layers below it?
Thank you and good job on the tut!
Agilius said... 30 March 2008 14:26
Jake, after doing the command :
Layer -> New Adjustment Layer -> Hue/Saturation
Simply press ok, without changing any of the setting of the adjustment layer, the Right Click it ( the adjustment layer ) and select the option "Create Clipping Mask". This will make the mask affect only the layer underneath it, in our case the navigation bar.
Let me know if you require more help. Good luck.
Post a Comment