Creating a Gel Button in Photoshop CC

Once upon a time, a long time ago, when everyone was making web graphics and writing about it, I wrote a bunch of tutorials on using Photoshop to create graphics for the web. Some of those techniques are so outdated that I’d be ashamed to talk about them. But some of the things I wrote about are still useful today.

I decided to republish some of the tutorials here for your use. This is the first…

Gel buttons used to be all the rage. Although they are not such a big deal now as they once were, I think you’ll still find the occasional use for the technique I’m about to show you. Start off with a web document of any size you like. I usually use a transparent background, but you can set the background to any color you like as well. This is an easy tutorial, just six steps!

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. I’ve used white for the example.

Step 2

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 (#005755) and R:0, G: 178, B: 57 (#00b239) 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. If you want your settings to be precise, click once on your image where you want the upper-left corner of the shape. A dialog box like the one below will appear:

Settings dialog for the rounded rectangle shape tool.
Figure 1 – Rounded Rectangle Settings

Once you have the settings you want, click OK to create your shape. As you can see, mine is 100 x 30 pixels. It’s dark green but that will change shortly.

An image of a rounded rectangle.
Figure 2

Step 3

Add another layer and call it capsule.

Select the shape you created in Step 2 by holding down the Control Key (Option key on a Mac) and clicking on the layer that holds the shape.

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. Do not deselect the shape for the next step.

The capsue filled in with a foreground to background gradient.
Figure 3

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.

Button with white highlight
Figure 4

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…

A close-up showing the white highlight in the process of being distorted.
Figure 5

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.

The basic gel button.
Figure 6

Step 6 (Optional)

Not bad, eh? But we can make it prettier. At least, I think so. Right-click on the Capsule layer and open the Blending Options dialog box so we can add some layer styles. Add a drop shadow with whatever settings you’d like. I used the following settings:

The dialog box with drop-shadow settings.
Figure 7

Finally, add a one-pixel black stroke. Figure 8 shows the final results.

The final gel button including drop shadow and stroke.
Figure 8

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. Now 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.