Glossy Buttons

In this tutorial, I am going to teach you how to make a simple, fast, yet attractive button good for use in navs, forums, ect.

1. Make a new document, 200 pixels wide, 150 pixels tall, with a white background. Create a new layer.

2. Take the rectangle marquee tool, and draw a selection similair to what I have shown below. It should be about three times as wide as it is tall.

3. Now fill that rectangle with a dull grey (make sure you are on the new layer). I used #959595. Now open up the blending options for that layer (Layer->Layer Style->Blending Options), and apply the following:

4. Okay, now create another new layer. Ctrl+Click the first layer (while the second layer is still the active layer), and go to Select->Modify->Contract, and contract the selection by 5 pixels. Now, on the second layer, fill in the selection with the color you want your button to be. I chose #006C99. Now, you should have something like this:

5. That button doesnt look like it has much depth does it? Lets go to Blending options again (this time on the second layer), and change that. Apply these settings:

And you will end up with something like this:

6. Now thats good and all, but its lacking a certain something. Lets apply that trendy gloss effect to it. Create a new layer, and use the elliptical marquee tool to select something like this:

Now, get out your gradient tool, and set your foreground to white. Now use the Foreground->Transparent gradient to create something like this:

Now, with the third layer selected, hit Ctrl+Click on the second layer, then go to Select->Inverse. Now hit the delete key. Your done! Add some text, and you have yourself a nice little nav button: