Quick & Easy PhotoShop Gel Buttons

Gel buttons are popular these days. I've seen tutorials for how to create them on almost every graphic tutorial site around. Why create yet another tutorial for gel buttons? Because I'm going to show you how to create gel buttons in just a few steps.

In order to follow all of the steps in this tutorial, you need to have a version of PhotoShop recent enough to include layer styles. However, layer styles were only used to create the 1 pixel stroke around the button and the drop shadow. If you have an earlier version, it will only take a couple of extra steps to add the stroke and shadow. That said, let's get started.

Step 1

Create a new document big enough to hold the button you are going to create. The sample is 110 x 40 pixels with a transparent background at 72 ppi (pixels per inch) since I plan on create a 100 x 30 pixel button.

Rename Layer 1 to Background and fill it with whatever color or texture you will be using for the background of the web page.

Step 2

Add a new layer and call it "Capsule."

Set the foreground and background colors to light and dark versions of the same color. For the example I chose: R: 0, G: 87, B: 85 and R:0, G: 178, B: 57 which gives me two shades of green. You can pick two shades of any color you like that will look good with your background.

Select the rounded rectangle tool. In order to get the capsule shape, you will have to change the radius of the rectangle. I've found that you get a nice gentle rounded shape if you make the radius the same as the height of the capsule.

Now create your shape. Mine is 100 x 30 pixels. It's dark green but that will change shortly.

Figure G6-1 - Dark Green Capsule

Step 3

Select the newly created capsule by holding down the Control Key (Option key on a Mac) and clicking on the capsule layer.

Now select the gradient tool and make sure that it is set to Foreground to Background.

Hold down the shift key so you can drag in a straight line and drag from top to bottom of the capsule shape. This will make the capsule shade from dark on the top to light on the bottom. Keep the selection active for the next step.

Figure G6-2 - Capsule after gradient fill.

Step 4

Add another layer and call it "Highlight." We're going to contract the selection to about one-third of the height of the capsule. In the case of the example, that means I clicked on Selection/Modify/Contract and contracted the selection by 10 pixels.

Click on Edit/Fill and fill the selection with white.

Now select the Move tool and drag the white highlight to the top of the capsule, making sure to leave a small band of the dark green showing.

Figure G6-3 - Capsule with highlight in place.

Step 5

We're almost done now. Just three steps to go. And they're really small steps. First we want to change the shape of the highlight so it conforms to the top of the capsule. It helps to zoom in first so you can see what you are doing. Once you've zoomed your capsule to a sufficiently large size, select Edit/Transform/Distort. Hold down the shift key so you can retain the straight line on the bottom of the highlight and drag the bottom corners of the highlight to the left and right edges of the capsule. Take a look at the screen capture and you'll see what I mean...

 
Figure G6-4 - Distorting the highlight.

Deselect the highlight area and then click, Filter/Blur/Gaussian Blur to soften the highlight. I used a 4-pixel blur on the sample. That's it! You now have a basic gel button.

Figure G6-5 - The finished gel button.

Step 6 (Optional)

Not bad, eh? Now if you have a PhotoShop Version (I think 5 or better but I'm not positive) that supports blending properties for layers, right click on the Capsule layer and add a drop shadow with the default settings and a one-pixel black stroke. Figure G6-6 shows the final results.

Save this blank file in PhotoShop format and then make copies of it to add text.

If you don't have a recent version of PhotoShop, you can add the stroke by Ctrl-Clicking on the Capsule layer and then selecting Edit/Stroke and adding a 1-pixel black stroke outside the selection. The drop shadow can be done in many ways but the simplest is to duplicate the capsule layer and drag it under the colored capsule. Then Ctrl-click to select it, fill it with black, deselect and slightly blur the black version of the capsule. Then click on the Move tool and move the shadow down and to the right a pixel or two to offset the shadow from the capsule.