Step 1

Firstly, create a new document 500 by 200 pixels. Select the gradient tool and set your foreground colour to #363636 and your background colour to #252525. Appy a radial gradient by left clicking in the top left quarter and dragging to the lower right corner.

Step 2

Secondly, we’ll be starting with the base of one of the buttons for the navigation. Create a new layer (Layer > New > Layer). Select the rectangular marquee tool and make a fixed size selection of 100 by 40 pixels.

Step 3

Now fill the selection with a linear gradient (using the gradient tool) using the colours #68ad40 and #4c8c2c.

Step 4

We’re now going to be adding a couple of effects to the button using layer styles.

Layer > Layer Styles > Inner Glow.

Layer > Layer Styles > Gradient Overlay.

Layer > Layer Styles > Stroke. The colour I’ve used here is #427a25.

Your button should now be looking something like this. Nice and shiny :-)

Step 5

Next up, we’ll be adding some lighter and darker areas on the button to give it some texture. Select the burn tool and I’ve used a soft 45 pixel brush, Highlights range and a 30% exposure. Click around the sides of the button so you get something like this.

Step 6

Now select the dodge tool and here I’ve used a 14 pixel soft brush, Highlights range again and an exposure of 10%. Click around the bottom this time.

Step 7

Move the button to the left of the canvas then duplicate the layer three times and line them up like so.

Step 8

Create a new layer and make a selection below the navigation about 40 pixels high and fill with a linear gradient from #cacaca to transparent using the gradient tool.

Step 9

Go Edit > Transform > Perspective and drag one of the bottom corners outwards while holding down the ctrl key. Hit enter to set the transformation.

Step 10

Lower the opacity of the shadow layer to 10%.

Step 11

Lastly, add in some text links using the text tool. The font I’ve chosen for this is Tahoma, Regular, 15pt, Smooth, #ffffff.

And you’re finished.