Creating a Gel-Styled Button

We will start with a blank canvas and then create a new layer. Choose the Custom Shape tool and choose a shape to use as your button. When you've chosen, hold Shift to drag out a good size, like so:

Now, because this is a Custom Shape, we have just created a Work Path, and in order for us to use this we goto the Paths panel (Window > Paths), where we will see the shape we just drew out. Right-click the shape in the Paths window and choose Make Selection. Choose 0 for Feather Radius. Now we have our selection, we will delete the path.

Now we want to go back to the Layers window, then goto Select > Modify > Smooth, 5px. Then fill or paint the selection on the new layer, and then Edit > Transform > Rotate, a little.

Now we have our basis, let's open up the Layer Styles for this layer. We'll be adding the following styles, but you are encouraged to try different values and settings to experiment and see what effects you can get:

After applying these styles, we should have something that looks like this:

Next, add some text to the button.

Open up the Layer Styles for the text layer. We are going to add a Bevel, Gradient Overlay and Stroke. But once again, you are encouraged to experiment.

In addition to these Layer Styles, we can also add a warped text effect(). When editing the text, this button will be available in the top toolbar. We select the Rise style with a value of +25. Then we make sure it is centered by choosing the Move tool, Ctrl-clicking the custom shape layer and then using the align buttons on the Move tool's toolbar at the top. Our finalized button looks like this: