Nothing says Web 2.0 more than a shiny button. Of course, the "shiny plastic" look-and-feel is not for everyone, but good-looking navigation buttons are still integral to the design of a sexy web page. In this first instalment of a two-part article, I'll show you how to create a wide variety of different buttons using Adobe Photoshop.
First we'll look at how to create a basic button. Then you'll apply to it all manner of effects: outlines, bevels, chisels, gradients, wet matte effects, and more!
This article has been excerpted from my book The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques, which is available for a limited time as a free PDF download, thanks to our sponsor, 99designs.
That's right -- the whole book can be downloaded for FREE.
The techniques you'll learn here can be applied to any "button-like" object, including icons, bullets, title and navigation bars, and other page accents.
Even if you're a graphics novice, this is fun stuff. Let's get started!
Making a Simple, Flat Button
Solution
Rectangular Flat Button
First we're going to draw a basic, rectangular button. Set the foreground color to a color of your choice, then draw a rectangle with the Rectangle Tool (U).
I told you it was basic! I've made mine more interesting by drawing another rectangle in a lighter color to give my button a thick border on its left-hand side, as shown here.
Rectangular button with thick border (click to view image)
Rounded Flat Button
You can also create basic, rectangular buttons with rounded corners using -- you guessed it -- the Rounded Rectangle Tool (U). Alter the "roundness" of your corners using the Radius field in the options bar, as shown here.
Rounded rectangular button with 10-pixel radius (click to view image)
Rounded rectangular button with 20-pixel radius (click to view image)
NOTE: Photoshop Doesn't Replace CSS
On a web page, you'd probably use CSS instead of images to achieve this rectangular button effect. However, this technique is handy when it comes to drawing simple buttons for web comps in Photoshop.
Adding an Outline to a Button
In this solution, we're going to be adding outlines to our basic buttons to make them look like the ones shown here.
Buttons with outlines (click to view image)
NOTE: Adding Layer Styles
In this chapter and beyond, we'll be making heavy use of layer styles, which are applied by launching the Layer Style window. There are a few different ways to launch this window, but the one I use most often is to click on the little f button at the bottom of the layer palette, as shown here.
Launching layer styles window (click to view image)
Clicking this button will display a dialog listing all of the different layer styles available. Simply choose the one you want and the Layer Style window will launch, with the specific effect selected. It's also possible to select the same styles from the menu bar (Layer > Layer Style), but using the icon saves you one mouse click!
Solution
Let's add outlines to the basic buttons we created earlier. Select the layer that contains your button. Open the Layer Style dialog by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Stroke... from the menu that appears. You'll see that the Stroke style is checked and highlighted -- this adds the outline to your button. Change the look of your stroke by adjusting the settings.
Adding an outline to a button by changing its stroke options (click to view image)
You can see from the dialog shown above that I gave mine a black outline by clicking on the color patch and setting the color to black, and gave it a thickness of one pixel by typing 1 into the Size field (you could also use the slider to adjust the size of the stroke).
Making a Smooth, Beveled Button
They're getting fancier! Let's have a go at creating the beveled buttons shown here.
Smooth, beveled buttons (click to view image)
Solution
By now, you should be an expert in creating basic, rectangular buttons. Just as well, because you'll need one for this solution! Create or select your 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. You've just added a bevel to your button. You can give the bevel a more rounded appearance by increasing the Size and Soften levels. I'm using 7px for Size and 8px for Soften, as shown in this image.
Bevel and Emboss options for smooth bevel (click to view image)
Make the effect more subtle by changing the Shadow Mode color. Since my button is blue, I've changed the Shadow Mode color from black to blue (a slightly darker shade than my button color).
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.
Chiseled buttons (click to view image)
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.
Bevel and Emboss options for chiseled bevel (click to view image)
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.
Embedded buttons (click to view image)
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.
Pillow Emboss options for smooth embedded button (click to view image)
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 (click to view image)
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.
Locking transparent pixels (click to view image)
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!
Applying a layer style (click to view image)
Selecting (and applying) a layer style (click to view image)
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!