Creating Custom Icons and Images

The user interfaces of iPhone applications are characterized by beautiful images and lush color. As an application designer, you want to fit into this environment by providing an aesthetically pleasing user interface. Although iPhone OS provides a wide range of elegant and attractive user interface elements, there are two custom elements every application needs: an application icon and a launch image. In addition, applications should provide a small icon for iPhone OS to display in Spotlight search results.

Some applications need custom icons to represent application-specific functions and modes in navigation bars, toolbars, and tab bars. When you follow the guidelines for creating these icons, you can achieve results that both harmonize with the built-in icons and subtly accentuate your application’s style.

Application Icons

An application icon is an icon users put on their Home screens and tap to start an application. This is a place where branding and strong visual design should come together into a compact, instantly recognizable, attractive package.

Users choose which application icons they want to display on their Home screens, so you should design an icon that is:

• Attractive, so users feel compelled to keep it on their Home screens

• Distinctive, so users can easily find it among all other icons

Try to balance eye appeal and clarity of meaning in your icon so that it’s rich and beautiful, but still conveys the essence of your application’s purpose. Also, it’s a good idea to investigate how your choice of image and color might be interpreted by people from different cultures.

When a user decides to display your application icon on the Home screen, iPhone OS automatically adds some visual effects so that it coordinates with the built-in icons. Specifically, iPhone OS adds:

• Rounded corners

• Drop shadow

• Reflective shine

For example, Figure 11-1 shows a simple icon as it might be provided by an application.

Figure 11-1  A simple application icon before it is displayed on a Home screen

Figure 11-2 shows the same icon as it is displayed on a Home screen by iPhone OS.

Figure 11-2  A simple application icon displayed on a Home screen

Application icons that include a discernible background look best on the Home screen. This is primarily because of the rounded corners iPhone OS adds: uniformly rounded corners ensure that all the icons on a user's Home screen have a consistent appearance that invites tapping. If you create an icon with a black background that disappears when it's viewed on the Home screen, users don't see the rounded corners. Such icons often don't look tappable and tend to interfere with the orderly symmetry of the Home screen that users appreciate.

To ensure that your icon can take advantage of the visual enhancements iPhone OS provides, produce an image in PNG format that:

• Measures 57 x 57 pixels, with 90 degree corners (if the image measures other than this size, iPhone OS scales it)

• Does not have any shine or gloss

• Does not use alpha transparency

Name your icon file Icon.png and place it at the top level of your application bundle. To learn more about the contents of the application bundle, see “The Application Bundle” in iPhone Application Programming Guide.

When you submit your application, you must include a 512 x 512 pixel version of your application icon for display in the App Store. Although it’s important that this version be instantly recognizable as your application icon, it should be subtly richer and more detailed. In other words, you should not simply scale up your application icon to create an icon for the App Store.

You must also provide a 512 x 512 pixel version of your application icon if you’re developing an application for ad-hoc distribution (that is, to be distributed in-house only, not through the App Store). In the ad-hoc case, name the icon file iTunesArtwork (no file extension) and place it at the top level of your application bundle. This icon identifies your application in iTunes.

Small Icons

Every application should supply a small icon that iPhone OS can display when the application name matches a term in a Spotlight search.

Applications that supply settings should also supply this icon to identify them in the built-in Settings application.

Your small icon should clearly identify your application so that users can easily recognize it in a list of search results. To do this, create a streamlined, attractive icon that:

• Uses the PNG format.

• Measures about 29 x 29 pixels.

Name your icon file Icon-Small.png and place it at the top level of your application bundle. To learn more about the contents of the application bundle, see “The Application Bundle” in iPhone Application Programming Guide.

Launch Images

To enhance the user’s experience at application launch, you should provide a launch image. A launch image looks very similar to the first screen your application displays. iPhone OS displays this image instantly when the user taps your application icon on the Home screen. As soon as it’s ready for use, your application displays its first screen, replacing the launch placeholder image.

It’s important to emphasize that the reason to supply a launch image is to improve user experience; it is not an opportunity to provide:

• An “application entry experience,” such as a splash screen

• An About window

• Branding elements, unless they are a static part of your application’s first screen

Because users are likely to switch among applications frequently and quickly, you should make every effort to cut launch time to a minimum, and you should design a launch image that downplays the experience rather than drawing attention to it.

To do this, you should design an image in PNG format that:

• Measures 320 x 480 pixels. Including the status bar area allows you to display the status bar color you’ve chosen immediately, instead of displaying it after your application has finished starting.

• Is identical to the first screen of the application, except for:

  • Text. The launch image is static, so any text you display in it will not be localized.

  • User interface elements that might change. Avoid including elements that might look different when the application finishes launching, so that users don’t experience a flash between the launch image and the first application screen.

Name your launch image file Default.png and place it at the top level of your application bundle. To learn more about the contents of the application bundle, see iPhone Application Programming Guide.

If you think that following these guidelines will result in a very plain, boring launch image, you’re right. Remember, the launch image is not meant to provide an opportunity for artistic expression; it is solely intended to enhance the user’s perception of your application as quick to launch and immediately ready for use. The following examples show you how plain a launch image can be.

The first example is the launch image for the built-in Settings application, shown in Figure 11-3. The Settings launch image displays only the background of the application, because no other content in the application is guaranteed to be static.

Figure 11-3  The launch image for the Settings application

Another launch image example comes from the built-in Stocks application, shown in Figure 11-4. Note that the only images included in the launch image are static images, which are always visible in the front view of the Stocks application.

Figure 11-4  The launch image for the Stocks application

Icons for Navigation Bars, Toolbars, and Tab Bars

When possible, you should use the system-provided buttons and icons in navigation bars, toolbars, and tab bars. iPhone OS provides a wide range of standard buttons and icons that users associate with standard tasks and modes supported in the built-in applications. If your application supports standard functions, such as refreshing a content-area view or deleting an item, or displays different subsets of data, such as contacts or bookmarks, be sure to use the appropriate system-provided button or icon to represent it. For a complete list of standard buttons and icons, and guidelines on how to use them, see “System-Provided Buttons and Icons.”

Of course, not every task your application performs is a standard one. If your application supports custom tasks users need to perform frequently, you need to create custom icons that represent these tasks in your toolbar or navigation bar. Similarly, if your application displays a tab bar that allows users to switch among custom application modes or custom subsets of data, you need to design tab bar icons that clearly describe these modes or subsets. This section gives you some guidance on how to design icons that work well in navigation bars, toolbars, and tab bars.

Before you create the art for your icon, you need to spend some time thinking about what it should convey. As you consider designs, aim for an icon that is:

• Simple and streamlined. Too many details can make an icon appear sloppy or indecipherable.

• Not easily mistaken for one of the system-provided icons. Users should be able to distinguish your custom icon from the standard icons at a glance.

• Readily understood and widely acceptable. Strive to create a symbol that most users will interpret correctly and that no users will find offensive.

After you’ve decided on the appearance of your icon, follow these guidelines as you create it:

• Use the PNG format.

• Use pure white with appropriate alpha.

• Do not include a drop shadow.

• Use anti-aliasing.

• If you decide to add a bevel, be sure that it is 90° (to help you do this, imagine a light source positioned at the top of the icon).

• For toolbar and navigation bar icons, create an icon that measures about 20 x 20 pixels.

  For tab bar icons, create an icon that measures about 30 x 30 pixels.

iPhone OS automatically provides the pressed or selected appearance for items in navigation bars, toolbars, and tab bars, so you only need to provide a single version of an icon. Because these visual effects are automatic, you cannot change their appearance.