Chapter 13

Designing Buttons That Work

• Understanding Light, Shade, and Shadow
• Making Square Buttons
• Making Round Buttons
• Making Soft Buttons
• Making Button Bars
• Making Irregular Clickable Objects
• Making the Button Hot
• Next Steps
• Q&A
  

As previously discussed, navigation and interface design for the Web is an important aspect of page design. You want users to be able to easily navigate through your pages. The visual appeal of your page is based on the individual elements that are displayed and on the way they are displayed.

The graphical elements on your page are basically one of three types. The first, inline images, are simply static nonlinked graphics that appear for clarification, explanation, instruction, or enhancement. The second, navigation buttons or icons, are graphic images that let you go from one place to another with a click of the mouse. Finally, image maps, which are covered in the next chapter, are graphic images that are divided into regions or hotspots that perform some responsive action when clicked.

Because buttons are such a natural metaphor for navigation, and because buttons show up all over Web pages, an entire chapter is devoted to this topic.

So what makes a button look like a button? How do you get the feeling that when you click on the graphic that it's going to take you somewhere? As you will see, it is really in the small nuances of the graphic. Small beveled edges, consistency in lighting, and other details are what clue you in. Again, much of this intuition is based on our experiences, but unique creations can also be used if they are well designed.

This chapter takes a look at how light and its counterparts of shade and shadow affect the design of a button. These characteristics are really what define interactivity. You're going to design a few buttons by learning how to correctly set the surface attributes according to light, shade, and shadow. Honestly, you can make every type of button imaginable from square to round to irregular once you understand lighting and how the small nuances of value create that "button look." It'll be everything you wanted to know about buttons-maybe more than you want to know-but I believe this knowledge will help you no matter what type of button you want to create.

Understanding Light, Shade, and Shadow

Artists are generally called artists because of their ability to re-create what they see or imagine. How is it that we can all be in the same environment and see the same things, but yet when it comes to creating a graphical representation of what we see, we all come up with different results? We all see the same things, but we perceive differently. Individual skill in re-creating what is perceived also differs from person to person. But being really good at creating graphics starts with this matter of perception.

Have you ever taken the time to look at a house or building on a bright and sunny day? How often do you really look to see how the light illuminates the house? Do you notice the shadows and how they fall on the house, the landscape, and the surrounding area?

If you compare an average image and an exceptional image, what separates them? More than likely the lighting has something to do with it. Textures, color, and geom-etry all contribute to overall effectiveness, but lighting will inevitably separate the excellent from the average.

When dealing with buttons, the shadows and light areas are not as complex as those on a house, but they are equally important to the perception of the graphic. The light surfaces (those receiving direct light) should be lighter than those in shade (surfaces opposite the light source). In addition, there should be a difference in the value between shade surfaces and shadow areas (areas where light is blocked by another object). The location of all these areas is determined by the source and direction of light as shown in Figure 13.1.

Figure 13.1 : Light, shade and shadow surfaces.

The first step in defining each of the surfaces is to determine the direction and elevation of a light source. A light source has both a direction and an elevation. This is used to determine each surface type and to cast the shadows. When you begin designing your buttons, start by deciding on the direction of your light source (see Figure 13.2).

Figure 13.2 : Determining a light source direction and elevation.

Once you've assigned a light source, determine those surfaces that are directly receiving light. If you are using a sketch, label the light surfaces with a letter L to help you (see Figure 13.3). These are the surfaces that are directly hit by the light and will be the lightest in value.

Figure 13.3 : Determining light surfaces.

Next, determine which surfaces on the object will be opposite the light source (see Figure 13.4). Label these surfaces as S or shade surfaces. These surfaces will be around a value of 50 percent on a 100-point scale. These surfaces are receiving what is known as ambient light. Ambient light is the amount of light available without the light source.

Figure 13.4 : Determining shade surfaces.

Once you have determined the light and shade surfaces, find the intersection of these surfaces (see Figure 13.5). The intersection of these surfaces clues you in to which surface edges will be casting shadows.

Figure 13.5 : Determining lines that are casting shadows.

Now that you know which edges are casting shadows, you can use the direction and elevation of the light source to project the shadows of the object. Trace the connecting points on the shadow line to the plane the object is sitting on. Project away from the object using the direction vector (light ray) from your light source. Project down from the shadow line point to the direction line using the elevation vector. Connect the dots to create the limits of the shadow (see Figure 13.6).

Figure 13.6 : Casting the shadows of buttons.

Realize that this procedure for determining light, shade, and shadow surfaces can be used anytime you are creating graphics and can be used to make sure the lighting is correct (see Figure 13.7). For most of your buttons, you can simply create them without casting the shadow because you might already know what they should look like. The technical term "fudge them in" applies here. Using this projection process every time you need to create 3D objects with shadows would be absurd. However, there may be times when you don't have a clue what the shadows should look like, let alone where they are.

Figure 13.7 : Finished view of the 3D button.

Figure 13.8 : Projecting points to find shadows.

Figure 13.9 : Parallel relationship.

Figure 13.10: Perpendicular relationship.

Making Square Buttons

Square buttons are probably the easiest buttons to make, so let's start with them. It is possible to make buttons in a vector illustration program and then port them into a raster format; however, realism is usually lacking with this technique. Throughout these button-making tasks we'll focus on raster techniques in Adobe Photoshop (not a requirement, just our choice) starting with a blank canvas.

To begin making buttons, it's important to know how big they need to be. If you're already familiar with the type of buttons found on Web sites, you already know what size the buttons need to be. If not, you may want to look at the portfolio of Web graphics presented in Chapter 6 "Presenting Effective Web Graphics," to help guide your button decisions.

To begin making a square button with beveled edges as in Figure 13.11, follow these steps:

Figure 13.11: Two views of the square button you"ll be creating.

1. Open Photoshop or your image editor and start a new file that is 100¥30 pixels or whatever size you want your buttons to be. Work in 24-bit mode and then reduce the number of colors when finished. If you can't work in 24-bit mode, make sure the diffusion dither is turned on as you work in 8-bit color.
2. Set an appropriate foreground and background color for the facing of the button. Use a 30 percent gray for the foreground and a 50 percent gray for the background. To set them, click on the Toolbar palette or use the Picker (see Figure 13.12).
   Figure 13.12: Selecting foreground and background colors.
3. For this task, the light source will project from the upper right to the lower left. Use the Gradient tool to create a blend of 30 percent gray to 50 percent gray from the upper right to the lower left (see Figure 13.13). Click on the Gradient tool. Note that you can double-click on the tool to change the default options. Use the defaults.
   Figure 13.13: Click on the Gradient tool to select it. Doubles click for options.
4. Use the Gradient tool and click and drag from the upper right to the lower left. This will create the blend for the button facing (see Figure 13.14).
   Figure 13.14: Create the facing using the Gradient tool.
5. Once you have filled the facing area, use the Rectangular mask tool to select the area of the button that won't be beveled (see Figure 13.15).
   Figure 13.15: Selecting the area that is not beveled.
6. Next, use Select | Inverse to select the area that will be beveled (see Figure 13.16). Once you have it selected, go to the Select menu and click Save Selection. In the Save Selection dialog box, click OK. You have now saved the selection as channel #4. A channel or alpha channel is simply a saved grayscale selection. You can also think of selections as masks because you are actually masking out part of the image. At any time you can retrieve the selection without having to reselect the area manually by using the Rectangular mask tool.
   Figure 13.16: Inversing the selection and saving it as a channel.
7. Next, select each separate bevel-top, left, right, and bottom-and save each as a separate selection (a separate channel) so they can be filled with appropriate blends. Do the top one first (see Figure 13.17). Use the Lasso tool to deselect all the pixels except those that would be on the top bevel. To deselect pixels, hold down the Crtl key on the PC or the Option key on the Mac and drag around the pixels you'd like to deselect. If you mess up, you can reload the selection using Select | Load Selection | #4. This is why you saved it earlier.
   Figure 13.17: Selecting the area for the top bevel.
8. Once you have completed the selection, use Select | Save Selection. It will be saved as channel #5.
9. Use the Select | None option. Reload the original selection using Select | Load Selection | #4. With the Lasso tool, deselect all the pixels except the right side. Save the selection and repeat for the remaining bevels.
10. Now that you have saved each bevel as a selection, fill the bevels with the appropriate blends. Use the Blend tool and the foreground and background colors to fill each section with appropriate colors. Use Select | Load Section and Select | None to load and deselect as needed. Keep in mind your light source! The top and right bevels should be lighter. The left and bottom should be darker-assuming that your light source is top right. Refer to Figure 13.12 for appropriate values for your bevels.
11. After filling each of the bevel selection channels, you have your button (see Figure 13.18). If all your buttons are the same except for the text on them, use this file as a template. Use the text tool to place the text into a button, and then save each button with a different filename. As you're placing your text, you can also make the letters look beveled or add some sharp white lines to increase the three-dimensionality of your button. Review Chapter 12, "Using Text in Design," where embossed and engraved text methods were discussed. If you have a single background color, you might also add a shadow for the button.
    Figure 13.18: Two views of the finished button with text and shadow.

Rectangular buttons come in different sizes and colors. Obviously without the bevel, the button would be easier to create, but it would also be less effective.

Making Round Buttons

Making round buttons is very similar to creating rectangular buttons, and it requires changing the type of selections that are made (see Figure 13.19). Again, round buttons come in all sizes and colors.

Figure 13.19: Two views of the round button you will be making.

To begin making a round button, follow these steps:

1. Begin by opening a new image that is 50¥50 pixels at 72 dpi. Keep in mind that the maximum dpi of your monitor is 72 dpi. Any more is overkill.
2. To create a round selection, double-click the Rectangular mask tool. This brings up the Mask Options dialog box. Change the Rectangular option to the Elliptical option (see Figure 13.20).
   Figure 13.20: The Mask Options dialog box.
3. Click and drag a circle that fills your 50¥50 square canvas (see Figure 13.21). Remember to hold down on the Shift key to constrain the mask to a per-fect circle. Then save the selection using Select | Save Selection. It is now channel #4.
   Figure 13.21: A circular mask on your 50  50 canvas.
4. Set your foreground and background to appropriate values. I'll use 70 percent and 30 percent gray, respectively. Again, the light source is from the upper right. Once you have set your values, double-click on the Gradient tool to bring up its options. Change the Linear option to Radial.
5. In the circular selection, use the Gradient tool to fill it. Create the blend from the mid-to-lower left to the upper right (see Figure 13.22).
   Figure 13.22: Filling the circular mask.
6. Use Select | Modify | Contract | 6 pixels to make the selection 4 pixels smaller (see Figure 13.23). Then save the selection.
   Figure 13.13: Contracting the selection.
7. Use Select | None. Then load selection #4. Now use Select | Load Selection | #5 and choose Subtract from Selection. This will create a selection that is a Boolean subtraction of channel #4 from channel #5 (see Figure 13.24). Now save this new selection (channel 6).
   Figure 13.24: Creating the bevel selection.
8. Once you've selected the area for the bevel, switch the foreground and background colors. Use the Gradient tool with a linear blend from upper right to lower left inside the selection. This creates the bevel values. You may want to use darker and lighter values for a more dramatic effect. Don't be afraid to use trial and error! You can also add a drop shadow and text if you like.
   Figure 13.25: Two views of the finished round button with text and a shadow.

Making Soft Buttons

Creating soft buttons is straightforward as long as you know the exact color of your background. Soft buttons are those that are feathered into the background color. If you're using a tile bitmap in your background, it may be more difficult to create and use this type of button.

To create a soft button, complete the following steps:

1. Begin by opening a new file that is 100¥100 pixels at 72 dpi. You will be creating an oval-shaped button that is feathered into a white background. Again, if your background is a different color, begin by filling the background with that color.
2. Double-click on the Rectangular mask tool. In the Mask Options dialog box, set the Mask Shape to Elliptical. Drag an oval mask on your canvas. Make sure it doesn't go all the way to the edges of the camera (see Figure 13.26).
   Figure 13.26: Creating an oval-shaped mask.
3. Now use Select | Feather | 4 pixels to feather the mask. You won't see what the feather does until you fill the mask.
4. Select a light gray foreground, say, 30 percent. Now use the Paint Bucket (Fill) tool to fill the mask (see Figure 13.27).
   Figure 13.27: Filling the feathered mask.
5. Now you have a soft button. You can do several things to jazz it up such as adding text or creating blends within the feather (see Figure 13.28). Don't be afraid to experiment!
   Figure 13.28: Jazzing up your feathered button.

Making Button Bars

Button bars are usually created so that they can be used as an image map. The buttons you have created thus far would be inserted into a page, and when clicked, they would each take you to a different location or display a resource such as a picture or video. Alternatively, an image map is a graphic that has several links assigned to it. Depending on where you click on the image, it will take you to a respective location.

For ease of explanation, let's use the square button that was created earlier as a basis for our bar. Let's assume that you want two buttons, side-by-side on the page, such as forward and backward paging buttons (see Figure 13.29).

Figure 13.29: Two views of the button bar you will be creating.

To create a button bar, complete the following steps:

1. Open your square button file in Photoshop.
2. Use Select | All to select the entire image. Then use Edit | Copy to copy the button into memory.
3. Make sure your background color is set to the appropriate color of your page background (remember hexadecimal?). Now use Image | Canvas Size to change the size of the current canvas. Change the width to 200 and select the left center square at the bottom of the dialog box (see Figure 13.30). Click OK.
   Figure 13.30: Adjusting the canvas size.
4. Use Edit | Paste to paste a second button in the canvas. Use the arrow keys to adjust its placement.
5. Finally, add any shadows, text, or icons you'd like into the buttons.

Figure 13.31: Two views of your finished button bar.

Making Irregular Clickable Objects

Irregularly shaped objects are generally created in illustration packages and then rasterized so that they can be used as a bitmap (see Figure 13.32). As you're creating them, the most important factor is to make sure that the background color is set correctly so that the anti-aliasing that occurs works to your advantage. To begin creating an irregularly shaped button, complete the following steps:

Figure 13.32: The irregularly shaped button you will create.

1. Begin by opening a new image 100¥100 pixels at 72 dpi. Then use the line tool to create an irregular shape. Or create an irregular path with the Lasso tool and stroke this path in black, one pixel wide (see Figure 13.33).
   Figure 13.33: Use the line tool to create an irregular shape.
2. Use the Wand tool to select the area within the irregular shape by clicking inside the shape. Then save the selection.
3. Choose Select | All to select the entire canvas, and then use Edit | Delete to get rid of the lines. Make sure the background color is set to white or whatever your page color should be before you delete!
4. Choose Select | Load Selection to reload the selection in the clean canvas.
5. Next, select appropriate foreground and background colors. For example, use 30 percent and 50 percent gray, respectively.
6. Use the Gradient tool with a linear blend to fill the selection.
7. Choose Select | Modify | Border to create a 6-pixel border around the shape (see Figure 13.35).
8. Next, switch your foreground and background colors and use the Gradient tool to fill the border area for the bevel value.
9. Finish by creating any shadows or other nuances for your irregular button (see Figure 13.36).

Figure 13.34: Using the Wand tool to select the inside of the shape.

Figure 13.35: Using the Border option to select pixels that will be the bevel.

Figure 13.36: Finishing your irregular button.

Making the Button Hot

The final step in using your buttons is to include them in the coding for your page. To use the graphics in your code, the tag <IMG SRC> will be combined with the tag
<A HREF>.

For example, if you made an image called Button.gif and wanted to code it as a button linked to another Web site (uniform resource locator, or URL), the code would look like this:

<A HREF="http://some.site.com"><IMG SRC="Button.gif"></A>

If I wanted to link a button from one page to another, with both pages in the same location on my server, the code would look like this:

<A HREF="nextpage.html"><IMG SRC="Next.gif"></A>

Next Steps

Now that you are button savvy, look at the following chapters for additional information:

• To find out more about creating graphics, see Chapter 3 "Creating Cool Graphics for the Web."
• For information on calculating screen sizes, see Chapter 7 "Designing Graphical Pages Anyone Can Download."
• To find out more about icons for navigation, see Chapter 9 "Providing Visual Cues to Web Navigation Through Page Design."
• To find out more about image maps, see Chapter 14, "Making Image Maps and HTML Frames."
• To find out more about graphic formats for the Web, see Chapter 16, "Utilizing Inline Graphics to Your Advantage."

Q&A