Navigation Box

Step 1

Create a new Photoshop document - dimension which you like.

Under foreground color set #6C7279, take the Rounded Rectangle tool, and set its radius to 5px.

Then, create a shape like it is shown on the picture below.

Step 2

On our shape, we'll apply the following styles

Drop shadow

Inner glow

Stroke

Our box now looks like this:

Step 3

Now, we will create a heading.

I have used Vedrana font with the following settings. See the picture below.

Step 4

Insert a new layer, take the Rectangular Marquee Tool and create a selection of 1px, like it is shown on the picture below.

Step 5

After that, fill that selection with #50565E (Shift + Backspace).

Then, under that line, create another line of 1px (All this process is on the same layer), and fill it with #90969E.

Step 6

Now, we will create a link gradient, so insert a new layer, take the Rectangular Marquee Tool and create a selection like it is shown on the picture below.

Step 7

Fill the selection with #6C7279 and on the layer with our selection add the following gradient.

Our box now looks like this:

Step 8

Now, we will duplicate 2px height layer that we have created in step 4, and we will put its copy under gradient. See the picture below.

Step 9

Now, its time for link text.

Set the Vedrana font size 11px. for color set white.

For all other links, just copy a gradient and line of 2px which divided a gradient.

Bye!