Build Beautiful Buttons in Photoshop, Part I

Creating a Chiseled Button Effect

The Bevel and Emboss layer style is a versatile tool that can be used to create many different button effects. In this solution, we'll use it to create hard-edged, chiseled buttons like the ones shown here.

Solution

Create or select a basic button. Then, open the Layer Style dialog by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Bevel and Emboss... from the menu that appears. From the Technique drop-down, select Chisel Hard and set the Soften field to 0px. Increase the Depth of the bevel to chisel "deeper" into the button.

Creating an Embedded Button Effect

In this solution, I'll show you a button effect that makes your buttons look like they're embedded into the page, as shown here.

Solution

Select or create a basic button. Open the Layer Style dialog by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Bevel and Emboss... from the menu that appears. From the Style drop-down, select Pillow Emboss -- this will give your button an "embedded" effect.

Experiment with the settings to change the look of your effect. Both the buttons in the example shown above are pillow embossed, but they look different because I've set the Technique to Smooth for the top one, and Chisel Hard for the bottom one.

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.

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

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

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