This month we bring you a handful of tips for creating Web buttons. Learn how to wield custom shapes and layer styles, save files in appropriate formats, and even create rollover buttons. Master these techniques, and you’ll be creating custom buttons for your own Web environments.

To begin, use Windows Explorer to create a new folder and name it webButtons. Save your practice files here. This tutorial assumes you are familiar with the Photoshop Text tool and the Layers palette.

The Arrow

As a symbol, the arrow is universal. Here’s how to create a quick arrow button.

Go to File, New. Specify a file width and height of 100 pixels. Set Resolution to 72, set Mode to RGB, and set Contents to Transparent. Click OK. Save the file as arrowBasic. This file is now a proprietary PSD file. You’ll create all of your buttons from this single file.

Turn to the toolbar and find the Shape tool, just below the Type tool. Click and hold the mouse and select Custom Shape Tool. In the options menu, click the Custom Shape drop-down menu and select the arrow.

Flat and transparent. Click the foreground color. In the Color Picker dialog box, select the box next to Only Web Colors. This will help keep the button file size small and render its shade true across browsers. Select a color and click OK.

Now drag your pointer across the file to create a chubby, colored arrow. (Undo and try again if necessary.) Next, select File and Save For Web. Select GIF, Web, and No Dither. Keep colors on the Auto setting and the Transparency box checked. Click OK. Name the file arrowBasic.gif. You now have an arrow button-one with a transparent background ready to work with any Web page background.

A Text Label

You should still have the arrowBasic.psd file open. Save it. Now, let’s label the arrow with a single word: HOME. If you don’t see the Layers palette, go to Window and Show Layers. Click the Create A New Layer icon. Then select the Type tool. With the pointer, create a text box. In the options menu, select a contrasting shade for the label text. Then type HOME. To position the label properly, click the Move tool and adjust placement of the text box. When you’re finished, go to File and Save For Web. In this situation, we find the Diffusion dither setting works well. Click OK. Name the file arrowBasicLabel.

Emboss Etc.

To add dimension, use Layer Styles. Return to the arrowBasic.psd file. In the Layer palette, highlight the arrow layer. Then go to Layer, Layer Style, and Bevel And Emboss. Use the Layer Style menu and the sample preview button on the right to gauge the proper settings. We checked the Contour box for a little extra contrast, but leave all other settings at the default. Click OK. Again, go to File and Save For Web.

Transparency tricks. This time basic GIF (Graphics Interchange Format) settings may break up the colors of the image. Because we’re no longer dealing with a flat color, it’s tempting to save the file as a medium-quality JPEG (Joint Photographic Experts Group). This is fine for white Web page backgrounds, but if you need transparency, consider two other options.

For many situations, saving the file as a GIF with the Adaptive or Perceptual color reduction algorithm is ideal. Add a Diffusion dither for a slightly smoother look, and you add only a few kilobytes to the file size.

If you’re not worried about file size or cross-browser usability, try the PNG (Portable Network Graphics) format. In Photoshop’s Save For Web dialog box, select the 4-Up tab and select the PNG-8 format. Use the Perceptual algorithm and the Diffusion dither. Compare this with the GIF. The PNG file may be 200 bytes or more larger than the GIF. If you cannot detect a quality difference between the formats, choose the GIF, which a wider range of browsers supports. Save the file as arrowBasicBevel.

Two For One

To create a new button in another color, double-click the fill-color thumbnail in the Layers palette. Be sure to give it a new name when you save it.

Web trends come and go, but the button rollover is here to stay. This trick requires two images. You’ve already created one bevelled arrow. Now create another in a new color for the rollover.

Return to the arrowBasic.psd file. In the Layers palette, you’ll see the layer thumbnail. Double-click the original color you chose to fill the arrow. Choose a new color from the Color Picker. Then go to File and Save For Web and save the new graphic as arrowBasicRollover.gif.

Now, when you insert your image into a Web page, use your Web editor to include the JavaScript that swaps in the new image for the original when the pointer hovers over it.

Mix & Match

Before you wind up your threads, practice with more shapes and mix up your tricks. Try rectangles and spheres. And experiment with the Layer Style option, which lets you create drop shadows, gradient fills, or a fine stroke around the image. When you’ve mastered these concepts, you’re ready to create batches of buttons at once. More on that another day.

Mom was right, if you’re a Web developer. The more adept you are with buttons, the finer a Web tailor you’ll make.