Easy Jell Buttons

Step 1

First create the shape of the button that you want to make the jell button from, whether it be a circular or like my shape I have below. This tutorial is not recommended if your button is much wider than it is high.

Fill the area with a color=F7C718 . I used the color red just so you can see the edges clearly in this screenshot but the real color is yellow.

Step 2

Next add a soft inner shadow.

Inner shadow: color=black

When your done you should have something like this, I added black to the background so you can see the edges clearly:

Step 3

Next right-click on the thumbnail of your jell layer and click "Select Layer Transparency". Set your foreground color to white in your toolbar. Then set your tool to gradient by right-clicking on the paint bucket and choosing the gradient tool . By default Photoshop would create a gradient called "Foreground to Transparent"

Step 4

Create a new layer with your selection still intact and fill with the gradient tool from the top-left most corner of your jell to the the bottom-right corner. To end, deselect the selection.

You should have something like this:

Step 5

With the new layer you just created, click "Edit > Free Transform". Then click the "Maintain aspect ration" button and set the width of the layer to 70%. Automatically the height would adjust to the same value. Move the layer up by one pixel and left by one pixel.

When your done you should have something like this:

Step 6

What's the use of having a jell button if you don't make use of it so put and icon under your white layer and add put an inset behind the jell and you should have something like this.