Web Domination Using Photoshop

Making a Gradient Button

Two-toned gradient buttons like the ones shown here are the "new black" of graphic design. This effect has become increasingly popular -- no doubt you'll have seen it used on the buttons, menu rows, and heading backgrounds of trendy web sites. In this solution, I'll show you how easy it is to create your very own gradient buttons.

Examples of gradient buttons

Solution

Raster Buttons

Using a selection tool, such as the Marquee Tool (M), create a rectangular selection for your button. Set the foreground and background colors to the two tones you want in your gradient, and create a new layer. With the Gradient Tool (G) selected, choose the Foreground to Background gradient option and click and drag the mouse to fill in your selection. (Holding down Shift will constrain the gradient direction to a horizontal or vertical line.)

Locking transparent pixels

Useful, but not Terribly Usable!
For all its power, the Layer Style dialog is amazingly unintuitive. What I find most confusing is the fact that you can apply a style without selecting it!

Fairly straightforward, right? But what's confusing is that this doesn't actually select the style, so you can't change its settings! You need to highlight the name of the style to bring these up -- simply checking the checkbox won't do!

Applying a Layer Style

The example shown here demonstrates this: In the top image I've checked the Drop Shadow style, which has been applied, but the settings in the dialog box are for the layer's Blending Options. This means I can't make any changes to my drop shadow!

If I click on the name of the layer style instead, my drop shadow is applied and its settings are displayed (as shown in the second image). Because of this, you might think that if I click on the name of another style that I've applied, it will be turned off in the document. That's not the case -- you'll have to uncheck the checkbox for that!

Selecting (and applying) a layer style

I'd suggest you spend a minute selecting and applying a few different layer styles until you get the hang of how it all works -- it'll save you from confusion later on!

We can achieve the same gradient button effect using the Lock Transparent Pixels option that's provided for layers. This option is useful for rounded rectangles or other shapes for which we're not provided with automatic selection tools.

Let's use it to make a rounded rectangle button. Using the Rounded Rectangle Tool (U) with the Fill Pixels option selected, create a sold-colored, raster button on a new layer. Click the Lock Transparent Pixels icon in the Layers palette, as shown in the example above. Then, set the foreground and background colors to your gradient tones and apply the gradient. Since you've locked the transparent pixels, the gradient will be applied only to non-transparent elements in the layer: your button, in this case.

Vector Buttons

If you're not happy making raster buttons, you can create vector shapes and apply the gradient effect to them.

Open the Layer Style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Gradient Overlay... from the menu that appears. The gradient overlay options will be displayed.

Gradient Overlay options

Adjust your gradient by clicking on the Gradient patch in the Layer Style dialog box. This will bring up another dialog box, the Gradient Editor, shown here, which you can use to set your gradient options. The colors of your gradient are represented in tiny color patches underneath the gradient bar. Double-click on them to bring up the Color Picker -- you can use this to change the color of the patch (and consequently, your gradient). Add more colors by clicking anywhere along the bottom of the gradient bar -- a new color patch will be placed there.

The Gradient Editor dialog

Click OK in both dialog boxes, and voila! You've got your two-toned gradient button. And because we've "overlaid" our gradient onto our button, the original color of the button is inconsequential!

Vector button with Gradient Overlay

Making a Round Push-button

In this solution, we'll call on the trusty gradient button-creating skills we learned in the solution "Making a Gradient Button" to make a round push-button like the one shown here.

Round push-button

Solution

1. Create a circular gradient button on a new layer.

2. On another layer, create a circular gradient button that's a bit smaller than the first. The direction of the gradient on this button should be the opposite to that of the first button -- in this example, my big circle has a white-to-gray diagonal gradient and my small circle has a dark-to-light diagonal gradient. (Don't be too concerned about lining the shapes up just yet.)

Creating two circular gradient buttons

3. Select the layer for the smaller circle from the Layers palette. Hold down Ctrl (Command on a Mac) and click on the layer thumbnail for the larger circle to create a selection based on the pixels of that layer, as I've done here. (We talked about this in Chapter 1, remember?)

Creating a selection

4. After you've created the selection, select Layer > Align Layers To Selection > Vertical Centers as shown here. This will vertically align the center of the small circle with the center of the larger one.

5. Finally, select Layer > Align Layers To Selection > Horizontal Centers, and just as you suspected, the centers of both circles will align horizontally.

Aligning vertical centers

Your push-button is complete!