W2.0 Navbar

Photoshop Image Tutorials | Submited Jul 21, 2008

Written by: Mr. ∃v¡l

Step 1 - New Document

Step 2 - Base

With the select tool, make a selection 798px / 40px. This is easier done if you use the "Fixed Size" option.
Then fill it with a color, any color.
Layer-> Layer styles-> Gradient Overlay
Stop positions: 0, 46, 52, 100
Stop colors: 494949, 272727, 343434, 707070

Then go to the stroke section-
1px, outside, #b4b4b4

Step 3 - Text

I would prefer using normal text on an actual website, but without this step the divider step will be pretty vague and shitty.
So, my font is BankGothic Md BT, 25 pt, crisp, #ffffff. There's three spaces between each word.
And just to take up space:

Step 4 - Dividers

Select tool-> fixed size, 1px / 30px
Make a selection between one of the words and use the brush tool to fill it with black.
On a new layer, do the same thing right next to it, but fill it with 7b7b7b. You can use the Move tool and the arrow keys to align it with the other one.
Now, merge the two layers so you won't have such a mess when you duplicate them for each word.

Wait...

The tutorial is only over if you want it to be. Below is what I have so far, the next step shows how to add a cool effect when you hover it.

Step 5 - Gradient (hovered)

Go to the base layer, where you have your gradient, and duplicate it.
Make a selection around one of the links, select-> inverse. Edit-> clear.
Then go to the layer styles. Disable the stroke, and change the first stop on the gradient overlay to red (or whatever).

Step 6 - Arrow

With the Custom Shape Tool, get an arrow. It doesn't matter which one, The one in the pic below seems to work best, though.

Then rotate it 90 Degrees CW.
And in the layer styles add a gradient overlay of ff0000 to b4b4b4.

Result

This is what I came up with. Hopefully you can make your own variation.