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





Examples of gradient buttons

Untitled ! ® 100 [-J[[email protected]

Layers ' channels 1 Paths

Normal t, |Opacityj iq®4 u

lotjilirl^ + fl fill: 100-/3


P*Jbutton a


i Background Q

100% ■-

a. oi e. j sj s

Locking transparent pixels

Locking transparent pixels

Gradient Tool (C) 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.)

WARNING 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!

That's right—once you've launched the Layer Style dialog, you can apply a style (with Photoshop's default settings) by checking its checkbox. If you have the Preview checkbox ticked, you'll see the effect this style has on your image. 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!

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!

Applying a Layer Style

Applying a Layer Style

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. Gradient Overlay options from the menu that appears. The gradient overlay options will be displayed.

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.

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

The Gradient Editor dialog

■5 Untitled 2 ® 100% (v.. ,


| Normal v Opacity: | 100% 1 ► ;

Lock: □ J * Li Fill: | ioo°/c 1 >



[J ifljvector

9 Effects

9 Gradient Overlay


I I Background Q

©. 0] ©. iI aJ 3

Vector button with Gradient Overlay

Was this article helpful?

0 0
Learn Photoshop Now

Learn Photoshop Now

This first volume will guide you through the basics of Photoshop. Well start at the beginning and slowly be working our way through to the more advanced stuff but dont worry its all aimed at the total newbie.

Get My Free Ebook

Post a comment