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.

Posted by Agilius at 18:28    

Labels: Step-by-step, Tutorials, Webdesign