出自UXGuide.net

Creating Icons

目录 1 A Suggested Process for Creating Icons 2 Creating Icons for Mac OS X v10.5 and Later 3 Scaling Your Artwork

Gorgeous, artistic icons are an important part of the Mac OS X user experience. Users expect beautiful icons that tell an application’s story in a clear and memorable way.

This section provides tips and a suggested icon-creation process you can follow as you design and create an icon. Then, it describes additional guidelines that help you design and create icons for applications running in Mac OS X v10.5 and later.

If you need to create toolbar icons, you should read this section first for general guidance, because many of the techniques and guidelines apply to both application icons and toolbar icons. Then, read “Designing Toolbar Icons” for specific advice on creating icons for use in a toolbar.

Tips for Designing Icons Many of the suggestions listed here also apply to other graphics you develop for your application—for example, to augment a label or list item.

• For great-looking icons, have a professional graphic designer create them.
• Perspective and shadows are the most important components of making good icons. Use a single light source with the light coming from above the icon.
• Use universal imagery that people will easily recognize. Avoid focusing on a secondary aspect of an element. For example, for a mail icon, a rural mailbox would be less recognizable than a postage stamp.
• Strive for simplicity. Try to use a single object that captures the icon’s action or represents the control. Start with a basic shape.
• Use color judiciously to help the icon tell its story; don’t add color just to make the icon more colorful. Smooth gradients typically work better than sharp delineations of color.
• Avoid using Aqua interface elements in your icons; they could be confused with the actual interface.
• Don’t use replicas of Apple hardware products in your icons. These symbols are copyrighted, and hardware designs change frequently.
• Don’t reuse Mac OS X system icons in your interface; it can be confusing to users to see the same icon used to mean slightly different things in multiple locations.

A Suggested Process for Creating Icons

When you create an icon, you need to provide at least the following files:

• A 128 x 128 pixel image (for Finder icons in all versions of Mac OS X)
• A 512 x 512 pixel image (for Finder icons in Mac OS X v10.5 and later)
• A mask that defines the image’s edges so that the operating system can determine which regions are clickable

Icons that display in the Finder are viewed at different sizes: They can be magnified in the Dock, they can be previewed at full size, and users can specify a preferred size. For the best-looking icons at all sizes, you should also provide custom image files (“hints”) at two other sizes: 32 x 32 pixels, and 16 x 16 pixels. Although the Dock doesn’t use hints (it uses a sophisticated algorithm on the 128 x 128 pixel version), hints are important for preserving crucial details in Finder icons.

If you are creating an icon that will never change size—on a bevel button, for example—you can supply the image in the actual size only.

Here are the suggested steps for creating an icon:

1. Sketch the icon.
   Work out the concept and details of your design on paper, not with software. You should be ready to execute the idea by the time you open an image-design application.
2. Create a software illustration of the icon.
   Although you may want the final icon to look like a photograph, in most cases it’s not advisable to start with an actual photograph. An illustration provides much more flexibility for conveying a concept in a very small space. An illustration also gives you necessary control over details, perspective, light and shadow, texture, and so on.
3. Add detail and color.
   For each enhancement you make to a larger-version icon, consider whether it is truly adding something to the icon’s usability or whether it is just adding complexity or clutter.
4. Add shadows.
   Shadows give objects dimensionality and realism. They also help tie the elements of an icon together so it doesn’t look like a collage. The light source should be above and slightly in front of the object. The resulting shadow should create the sense that the icon is resting on a surface.
5. In an image-editing program, manipulate the image to get precise effects and create the icon mask. (See “Scaling Your Artwork” for some tips that can help you successfully scale your artwork.)
6. Convert the icon to a .icns file. You can complete this step with Icon Composer, which is located in /Developer/Applications/Utilities when you install the Xcode developer tools (to find out how to download these tools, see Developer Tools). There are also several third-party tools available for completing this step.

Creating Icons for Mac OS X v10.5 and Later

If you’re designing an application icon for Mac OS X v10.5 and later, you should supply a 512 x 512 pixel version of the image. When you do this, be sure to treat the 512 x 512 pixel version as its own resource; that is, don’t create it by blowing up each pixel of the 128 x 128 pixel version of the icon. For example, the 512 x 512 pixel version of the icon should not have thick strokes or look “vectorized.“ In general, the larger icon should be a higher quality rendition of the 128 x 128 pixel resource, which exhibits:

• Richer texture
• More details
• Greater realism

For example, the 512 x 512 pixel version of the Front Row application icon (shown in Figure 11-20) reveals more detail in the wood grain of the chair frame and the velvet of the upholstery than in the 128 x 128 pixel version, resulting in a more realistic image.

Figure 11-20 A 512 x 512 pixel icon should not be a scaled-up 128 x 128 pixel icon

You also need to be aware of how the Cover Flow view in Finder displays your application icon. In Cover Flow, icons are displayed against a black background, set above a highly reflective surface. Because of this, you may need to adjust your icon in the following ways:

• If your icon includes a drop shadow, be sure to make the shadow fully black.

If the drop shadow contains any gray tones, the gray will show up against the black background and make the shadow look more like a glow.

• If your icon is very dark or has black edges, consider adding a slight inner glow just inside the edges to make the icon stand out against the black background.

If you don’t add a glow to make the edges of your icon prominent, it might appear to dissolve into the black background of the Cover Flow view.

• Avoid giving important parts of your icon high alpha levels (that is, lots of transparency), especially in the lower half of the icon. Areas with too much alpha may get clipped.

In Cover Flow view, the Finder positions icons so that they appear to be on the same plane. To do this, the Finder begins examining an icon at the bottom edge, looking for pixels that are opaque enough to use for alignment. If there is significant transparency in the lower area of your icon, the Finder ignores the transparent pixels in favor of the first opaque pixel it finds. The Finder uses the opaque pixel to determine the icon’s alignment with respect to the plane and may clip the transparent pixels below it.

To see why some of these adjustments might be necessary, you can examine the standard Mac OS X application icons in a computer running Mac OS X v10.5 or later. For example, in Figure 11-21, the Spaces icon includes a subtle glow inside the edge of the black frame, which makes it more visible on the black background.

Figure 11-21 An icon with black edges can include an inner glow to look good in Cover Flow

The Mail icon, on the other hand, includes a cancellation mark that extends past the bottom edge of the stamp image (you can see this icon in Figure 11-2). Because this area of the icon has high alpha levels, the Finder uses an opaque pixel at the bottom left corner of the stamp image to align the icon, clipping some of the cancellation mark, as shown in Figure 11-22.

Figure 11-22 Areas of high alpha levels at the lower edge of an icon can get clipped in Cover Flow

Scaling Your Artwork

As you work on creating your icon, you will probably need to spend some time scaling artwork to different sizes. As stated in “Creating Icons,” applications should include icon resources in these sizes:

• 512 x 512 pixels
• 128 x 128 pixels
• 32 x 32 pixels
• 16 x 16 pixels

If your practice is to start with a large master art file and scale it down to the smaller sizes, it’s especially useful to create your master image in a dimension that is a multiple of the icon sizes you need. If you also use an appropriate grid size in your image-editing application as you create the master image, you’ll be able to keep each smaller icon version crisp and reduce the amount of retouching and sharpening you need to do.

For example, to create icons in the recommended sizes listed above, create a 1024 x 1024 pixel version of your master file. In your image-editing application, you can set up an 8-pixel grid as you create the master file. This means that each block in the grid measures 8 x 8 pixels and represents one pixel in the 128 x 128 pixel icon. As you create your master file, “snap” the image to the grid and keep it within the boundaries to minimize the half pixels and blurry details that can result when you scale it down.

Although using an 8-pixel grid works fine when you need to create 512 x 512 pixel icons, you may prefer the increased precision you get when you use a 2-pixel grid to create the master image.

If you're not satisfied with the results when you scale art down to the 32 x 32 pixel and 16 x 16 pixel sizes, you can redraw the image at these sizes instead. If you decide to do this, setting up the proper grid can still help reduce extra work. For example, using a 32-pixel grid with a 1024 x 1024 pixel master file works well for creating the 32 x 32 pixel size, and a 64-pixel grid works well for creating the 16 x 16 pixel size.