java.sun.com > Guidelines Home Page > Java Look and Feel Design Guidelines > Part II: Fundamental Java Application Design > 5: Application Graphics > Designing Button Graphics

Designing Button Graphics

Button graphics appear inside buttons--most often in toolbar buttons. Such graphics identify the action, setting, mode, or other function represented by the button. For instance, clicking the button might carry out an action (creating a new file) or set a state (boldfaced text).

For a collection of button graphics designed in the Java look and feel, see Appendix B. The graphics in this repository can also be found on the book's companion CD-ROM.

The two standard sizes for button graphics are 16 x 16 pixels and 24 x 24 pixels. You can use either size (but not both at the same time) in toolbars or tool palettes, depending on the amount of space available. For details on toolbars, see Toolbars.

It might be appropriate to use toolbar buttons that display text in addition to or instead of graphics. Consider this approach if your usability studies establish that the action, state, or mode represented by the button graphic is difficult for users to comprehend.

If you include both text and graphics in a button, the size of the button will exceed 16 x 16 or 24 x 24 pixels. Consider using tool tips instead, or let users choose between displaying button text or using tool tips. For details, see Tool Tips for Toolbar Buttons.

 Use tool tips to help clarify the meaning of toolbar buttons.

 When designing your button graphics, clearly show the action, state, or mode that the button initiates.

 Keep the drawing style symbolic; too much detail can make it more difficult for users to understand what a button does.

 Use a flush 3D border to indicate that a button is clickable.

 Draw a distinct dark border without anti-aliasing or other exterior detail (except the flush 3D highlight) around the outside of a button graphic.

 Do not include text as part of your button graphics (GIF files). Use button text instead. Keep the button text in a resource bundle to facilitate localization.

 Setting tool tips automatically sets the accessibleDescription of an object, which in turn, greatly benefits users with physical and cognitive limitations.

Using Button Graphic Styles

The following figure shows sample button graphics designed for toolbars and for the contents of an internal utility window.

 Use a single style to create a "family" of button graphics with common visual elements. You might use a similar color palette, size, and style for all button groups across your GUI, such as toolbar buttons, toggle buttons, or command buttons. Review the graphics in context before finalizing them.

Producing the Flush 3D Effect

The flush 3D effect simulates the appearance of beveled buttons or shapes inset at the same level as the background. To achieve this effect, you need to create a shadow and a highlight for both the background and the button graphic. In smaller button graphics, you can achieve this effect by placing highlights at the correct locations along the edges of the icon. (The shadows are already provided by the darker outline of the button graphic.) In a larger 24 x 24 or 32 x 32 pixel graphic, you can use a graduated highlight within the button graphic to simulate a more smoothly rounded edge.

With the flush 3D effect, the button graphic appears to have a light beveling around the edges.

To produce the flush 3D effect on button graphics, add:

• An exterior white highlight on the outside right and bottom of the button graphic itself
• An interior white highlight on the inside left and top of the button graphic
• A dark shadow inside the exterior white highlight and outside of the interior white highlight (both shadows are already present if you created a button graphic with a dark outline in the first place)

Working With Button Borders

The size of a button graphic includes all the pixels within the border. As shown in the following illustration, horizontal and vertical dimensions are both either 16 or 24 pixels. The border abuts the button graphic (that is, there are no pixels between the border and the graphic).

Determining the Primary Drawing Area

Leave an apparent two pixels between the button border and the graphic. Because the white pixels in both the button border and the button graphic are less visually significant than the darker borders, the area used for most of the drawing is offset within the 16 x 16 or 24 x 24 space. Actually, 1 pixel is reserved on the left and top, and 2 pixels are reserved on the right and bottom (but highlights are allowed to extend in this area). The following illustration shows the standard drawing area for both button sizes.

The following illustration shows 16 x 16 and 24 x 24 button graphics that use the maximum recommended drawing area. On all four sides, there are 2 pixels between the dark border of the button graphic and the dark portion of the button border.

Drawing the Button Graphic

When drawing a button graphic, first decide on a general design that represents the action or setting activated by the button. In the following examples, a clipboard represents the Paste command.

1. Decide which sizes you want to use for the button or toolbar graphic and identify your primary drawing area.
2. Draw a basic outline shape, taking care to remain within the primary drawing area.
3. Add some basic color.
4. Add the flush 3D effect by drawing highlights on the inside left and top, and on the outside bottom and right of the outline. Note that the highlights can extend beyond the primary drawing area. This is a good basic design, but because of the large area using a single color, the graphic lacks visual interest and might not reproduce well on some systems.
5. Try a gradient instead of the flat color.
6. Add a pattern. This technique minimizes banding and dithering on displays with 256 or fewer colors (see Maximizing Color Quality). Here is an exploded view of the button graphic and its color overlay.
This figure shows the effect of the pattern on the color detail of the button graphic.
7. Define the empty area around your button graphic (in which you have not drawn anything) as transparent pixels in the GIF file. This practice ensures that the background color shows through; if the theme changes, the area around the button graphic will match the rest of the background canvas in the interface.
8. Test your button graphic on target platforms.

Java Look and Feel Design Guidelines, second edition. Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.