Gel Button

Step 1: Creating the Workspace:

Make a new layer and then grab your Elliptical Marquee tool and make a selection like this:

Step 2: Add some colour:

For a temporary basic right click within the circle and select fill, fill it in with #333333:

Step 3: Apply some filters:

Then right click on the layer that this circle is on in the layers panel and click on Blending Options. Apply these settings:

Drop Shadow:

Gradient Overlay:

Stroke:

After doing this out circle base should look like this:

Step 4: Creating a Inner Circle:

Next it's time to create our second inner circle. So on the circle base layer we have just been working on hold Ctrl on the keyboard and click on the thumbnail image of the layer. It should then reselect the circle selection again like this:

Once you have the base circle selected go to Select > Modify and then click on Contract. Apply the contract by 7px:

Once you have done this our circle will have a new selection within itself like this:

Make a new layer and right click within this new selection and select fill. Fill in the colour as #0664FF for a temporary basis. After doing so your circle will now look like this:

Okay so now we're going to apply some settings to the inner circle as well. Right click on the inner circle layer which you just created and click Blending Options. Apply these settings for the following:

Bevel and Emboss:

Gradient Overlay:

Stroke:

After applying all these your inner circle should look much better and like it belongs within the circle:

Step 5: Give it a convincing look!

Finally we're going to add a extra touch to the button so make a new layer and grab your Elliptical Marquee tool one more time and make a selection like this:

Then hold alt on the keyboard while still having your elliptical Marquee tool and make another selection over the selection you just did like this:

Let go of your mouse button when you have the size of your selection and it should cut some parts of the first selection you made to make it curved. I played around with the size of the cut I made until I was happy. You can do the same if you wish.

Right click within the selection and click fill and fill it in with #FFFFFF:

Lower the opacity of the layer to about 29% like so:

Once done you should get this result:

Finally get your Blur tool and set the Brush to about 13px and start brushing on the selection. Blur it over until you get something like this:

The Final Result:

There we go! A nice neat Gel Button!

Download the PSD file here.