Updating Icons and Other Artwork

This chapter describes how to update the icons and other artwork in your application to take advantage of resolution independence.

Overview

As the pixel density of displays increases, you need to make sure your application's custom artwork can scale accordingly. That is, the art needs to be larger in terms of pixel dimensions to avoid loss of resolution at high scale factors onscreen.

Examples of art that needs to be updated include:

• Application icons

• Icons that appear in buttons or other controls

• Custom images

If your application uses custom controls, you may need to provide high-resolution version of their artwork. If an existing standard control or icon provides the same function as your custom version, you should consider adopting the standard version.

For example, applications can use standard art from:

• Named NSImage objects

• Icons provided by Icon Services

• Standard UI elements drawn using HITheme functions

• Standard window frame views

Adopting standard art helps insulate your custom controls from future changes; if the appearance of certain control features changes, any standard art automatically adopts the new look.

Also, consider handling simple drawing such as fills, gradients, and lines programmatically. Point-based drawing classes such as NSBezierPath and NSShadow automatically scale according to the scale factor.

To increase drawing efficiency, you should cache images scaled to the current scale factor; doing so eliminates having to recalculate and scale the images each time they are drawn. NSImage does this for you automatically. Icons obtained from Icon Services are also automatically cached.

Icon Design Guidelines

For application icons, you should make sure that the icon family includes images up to 512 x 512 pixels. At the very least, the icon family should contain artwork for 1x (128 x 128, 72 dpi) and 4x (512 x 512, 288 dpi) sized images.

For new icons, it’s easiest to design the large icons first and then decide how to scale them down. When scaling up existing icons, the enlarged versions should look like close-ups of the existing icons, with the appropriate level of detail. For example, a house icon may show shingles or shutters in the larger sizes, while a large book icon may actually contain readable text. Do not simply create a pixel-for-pixel upscaled version of the existing icon. Figure 3-1 shows the changes in detail for different icon sizes.

You can use the Icon Composer application to create your icons. Icon Composer v2.0 and later includes support for larger icon sizes. This utility is available in the /Developer/Applications/Utilities/ folder.

Updates to Icon Services

To support resolution independence, Icon Services has added two high-resolution icon sizes: 256 x 256 and 512 x 512. To support these icon sizes, the constants kIconServices256PixelDataARGB and kIconServices512PixelDataARGB are defined in IconStorage.h for use in calls to SetIconFamilyData and GetIconFamilyData.

• When using these constants with SetIconFamilyData, you must pass an unpremultiplied 256 x 256 (or 512 x 512) ARGB bitmap. Icon Services compresses this bitmap before storing it in an 'ICNS' container.

• When retrieving icons with these constants, GetIconFamilyData returns uncompressed, unpremultiplied ARGB bitmaps. These bitmaps contain both image data and an alpha channel that you can use for mask information. (In the past, Icon Services required separate selectors to indicate mask or image data.)

In Mac OS X v10.5 and later, you can use these two functions to store and retrieve ARGB icons at all sizes.

Bitmap Image Guidelines

If you must use bitmap images, keep the following guidelines in mind:

• Create 1x (72 dpi) and 4x (288 dpi) versions of each image. You must specify the appropriate dpi value, as shown in Figure 3-2, or else the system will not be able to find the correct version for the given scaling.

• Use lossless compression.

• Store the two images together in a multi-image TIFF file. Both NSImage and the Image I/O framework support multi-image TIFF files. You can use the tiffutil command line tool in Terminal to combine the images (specify the-cathidpicheck option). You can also use PNG files to store images; however, this option requires a separate file for each image and your application must include additional code to determine and fetch the best-sized image.

Note that Carbon toolbars should use icons for toolbar items rather than bitmap images.

Because larger bitmap images require proportionally larger amounts of memory or disk space, you should avoid using them wherever possible. Instead, consider using vector graphics, which can be stored as PDF files.

Vector-Based (PDF) Image Guidelines

Vector-based art is automatically scalable. You should use vector-based images for simple artwork such as black-and-white images or flat images without dimensional detail. Shadows, gradients, arrows, and glyphs are good examples of when to use vector-based art.

If you are using Adobe Illustrator, be sure to specify Snap to Grid when creating your artwork.

---