Glossy Buttons

Step 1.

I'm working on top of an already existing layout here.

First I've used the circular marquee tool to make a circular selection.

Note: If you hold down the Shift key while making the selection it will restrain the proportions and give you a perfect circle.

Step 2.

Fill the selection with a light grey to dark grey gradient with similar color selections

Step 3.

Double click on the layer, and add the following layer styles to it:

Here's how it should look after these settings are applied:

Step 4.

Next hold down the Ctrl key, and click on the layer that our circle is on. This should select the entire thing and create a new layer. Get out the circular marquee tool again, and while holding down the Alt key, de-select the bottom portion of the circle, so you end up with something similar:

Step 5.

Go to Selection->Modify->Contract and contract the selection by 1 or 2 pixels. Depending on the Size. If it is going to be a large button, go with 2 pixels, if it's a smaller button (such as the one I'm working with here) just stick with a 1 pixel contraction.

Step 6.

Now set your foreground color to #ffffff (white) get out your gradient fill tool and select the "foreground to transparent" option. and fill in the selection from top to bottom.

Step 7.

The last and final step is to drop the opacity of this layer down to around 60%, or lower.

Step 8.

This technique can be used for all types of things and is a tool you will use over and over again, on many different applications. Get comfortable with this technique it's tried and true.