Web Domination Using Photoshop

Chapter 3. Creating Buttons

Now, onto the good stuff!

In this chapter, we'll be making navigation buttons. The solutions I'll describe are for creating button effects. Don't worry about making a complete navigation interface in Photoshop yet; I'll help you design layout comps later in the book.

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.

Making a Simple, Flat Button

Solution

Rectangular Flat Button

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

A rectangular button with a thick border

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 a ten-pixel radius

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.

Rounded rectangular button with 20-pixel radius

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

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 below. Clicking this button will display a dialog box 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!

A quick way to access the Layer Styles window

Solution

Let's add outlines to the basic buttons we created earlier. Select the layer that contains your button. Open the Layer Style dialog box 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.

Adding an outline to a button by changing its stroke options

Change the look of your stroke by adjusting the settings. 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

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 box 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 the image below.

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

Bevel and Emboss options for smooth bevel