Navigation Buttons Tutorial

I’m in love with the vista style interface, so I thought I’d do a tutorial on the navigation sytle of buttons. The images for each step are located below.
Step 1

Create a new 600×150 document. Fill the background with an extremely light orange color.

Step 2

Create a base for your rounded rectangle on a new layer. Drag the rounded rectangle tool across the image, and you’ll get something like the image below (use a radius of 25px.)

Step 3

Hold down ctrl and hit the thumbnail icon on the layer in the layers window. Now we’ve created a selection of the shape to work with. Next, take the “Rectangular Marquee” tool, and while holding down alt, drag from the center to the right and let go. (This will remove the bottom half of the selection, giving a selection like the image displays below.)

Step 4

Take the “Gradient” tool, and with a white to transparent gradient, make a glossy effect within the selection.

Step 5

Now on to the middle of the rectangle. Create a new layer. Take the rounded rectangle tool once again, but this time hold down shift while dragging it so you can make a perfect square like in the image below.

Step 6

Apply the gradient overlay to the block you just drew. Right-click on the layer and go into the blending options.

Step 7

Follow the same gloss technique we did in step 3, but do it with the square block layer instead.

Step 8

Go into blending options and add this stroke for the block. It is a medium grey color  (See image).

Step 9

Select a thick font, and create some links for your site. Space them about 3 spaces apart, and make the color of them a bright grey. Be sure this layer is under the gloss layer, that way the text can still obtain gloss.

Step 10

Type in your website’s text in the left side with the light grey color. I made mine from the signiture tutorial I posted a while back. Be sure this layer is under the gloss layer, that way the text can still obtain gloss.

And that’s it!

Pretty Sweet!