[iOS] iOS 7 버전 아이콘 및 이미지 디자인

Icon and Image Sizes

Every app needs an app icon and a launch image. In addition, some apps need custom icons to represent app-specific content, functions, or modes in navigation bars, toolbars, and tab bars.

Unlike other custom artwork in your app, the icons and images listed in Table 39-1 must meet specific criteria so that iOS can display them properly. In addition, some icon and image files have naming requirements. (If you need to support standard-resolution iPhone or iPod touch devices, divide by 2 the high-resolution sizes listed below.)

Table 39-1Size (in pixels) of custom icons and images

Description	Size for iPhone 5 and iPod touch (high resolution)	Size for iPhone and iPod touch (high resolution)	Size for iPad and iPad mini (high resolution)	Size for iPad 2 and iPad mini (standard resolution)
App icon (required for all apps)	120 x 120	120 x 120	152 x 152	76 x 76
App icon for the App Store (required for all apps)	1024 x 1024	1024 x 1024	1024 x 1024	1024 x 1024
Launch image (requiredfor all apps)	640 x 1136	640 x 960	1536 x 2048 (portrait) 2048 x 1536 (landscape)	768 x 1024 (portrait) 1024 x 768 (landscape)
Spotlight search results icon (recommended)	80 x 80	80 x 80	80 x 80	40 x 40
Settings icon (recommended)	58 x 58	58 x 58	58 x 58	29 x 29
Toolbar and navigation bar icon (optional)	About 44 x 44	About 44 x 44	About 44 x 44	About 22 x 22
Tab bar icon (optional)	About 50 x 50 (maximum: 96 x 64)	About 50 x 50 (maximum: 96 x 64)	About 50 x 50 (maximum: 96 x 64)	About 25 x 25 (maximum: 48 x 32)
Default Newsstand cover icon for the App Store (required for Newsstand apps)	At least 1024 pixels on the longest edge	At least 1024 pixels on the longest edge	At least 1024 pixels on the longest edge	At least 512 pixels on the longest edge
Web clip icon (recommended for web apps and websites)	120 x 120	120 x 120	152 x 152	76 x 76

For all images and icons, the PNG format is recommended. You should avoid using interlaced PNGs.

The standard bit depth for icons and images is 24 bits—that is, 8 bits each for red, green, and blue—plus an 8-bit alpha channel.

You don’t need to constrain your palette to web-safe colors.

App Icon

On This Page

Every app needs a beautiful, memorable app icon that attracts people in the App Store and stands out on their Home screen. iOS can use versions of the app icon in Game Center, search results, Settings, and to represent app-created documents.

NOTE

An app uses the same app icon in all versions of iOS that it supports. If you decide to redesign the app icon for the iOS 7 version of your app, the new icon should replace the old one even if the app displays different UI in different versions of iOS.

For the best results, enlist the help of a professional graphic designer. An experienced graphic designer can help you develop an overall visual style for your app and apply that style to all the icons and images in it.

Use universal imagery that people will easily recognize. In general, avoid focusing on a secondary or obscure aspect of an element. For example, the Mail app icon uses an envelope, not a rural mailbox, a mail carrier’s bag, or a post office symbol.

Embrace simplicity. In particular, avoid cramming lots of different images into your icon. Find a single element that captures the essence of your app and express that element in a simple, unique shape. Add details cautiously. If an icon’s content or shape is overly complex, the details can become confusing and may appear muddy at smaller sizes.

TIP

To test the appearance of your app icon at small sizes, move it into a folder on the Home screen. Even better, move several app icons into a folder and see if your app icon looks good and remains distinctive.

Create an abstract interpretation of your app’s main idea. It rarely works well to use a photo or screenshot in an app icon because photographic details can be very hard to see at small sizes. Typically, it’s better to interpret reality in an artistic way, because doing so lets you emphasize the aspects of the subject that you want users to notice.

If you want to portray real substances, do it accurately. Icons that depict real objects should accurately replicate the characteristics of substances such as fabric, glass, paper, and metal, and convey the object’s weight and feel.

Make sure the app icon looks good on a variety of backgrounds. Don’t just test your icon on a light or dark background because you can’t predict which wallpaper people will choose.

Avoid transparency. An app icon should be opaque. If the icon’s boundaries are smaller than the recommended sizes—or you use transparency to create “see-through” areas—the resulting icon can appear to float on a black background, which tends to look especially unattractive on the beautiful wallpapers that users choose.

Don’t use iOS interface elements in your artwork. You don’t want users to confuse your icons or images with the iOS UI.

Don’t use replicas of Apple hardware products in your artwork. The symbols that represent Apple products are copyrighted and can’t be reproduced in your icons or images. In general, it’s a good idea to avoid replicas of any specific devices in your artwork, because these designs change frequently and icons that are based on them can quickly look dated.

Don’t reuse iOS app icons in your interface. It can be confusing to users to see the same icon used to mean slightly different things in multiple locations throughout the system.

With the exception of the App Store icon—which must be named iTunesArtwork—you can name an app icon anything you want. As long as you use the CFBundleIcons key to declare the names and you add the @2xsuffix to the names of all high-resolution icons, iOS chooses an icon based on whether its size is appropriate for the intended usage. To learn more about icon naming, see “App Icons” in iOS App Programming Guide.

Create different sizes of the app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.

For iPhone and iPod touch, both of these sizes are required:

• 120 x 120 pixels

• 60 x 60 pixels (standard resolution)

For iPad, both of these sizes are required:

• 152 x 152

• 76 x 76 pixels (standard resolution)

When iOS displays an app icon on the Home screen of a device, it automatically applies a mask that rounds the corners. Make sure your icon has 90° corners so it looks good after the mask is applied. For example:

A 120 x 120 pixel icon before the mask is applied

A 120 x 120 pixel icon after the mask is applied

Create a large version of your app icon for display in the App Store. Although it’s important that this version be instantly recognizable as your app icon, it can be subtly richer and more detailed. There are no visual effects added to this version of your app icon.

For the App Store, create a large version of your app icon in two sizes so that it looks good on all devices:

• 1024 x 1024 pixels

• 512 x 512 pixels (standard resolution)

Be sure to name this version of your app icon iTunesArtwork@2x and iTunesArtwork, respectively.

NOTE

iOS might also use the large image in other ways. In an iPad app, for example, iOS uses the large image to generate the large document icon.

If you’re developing an app for ad-hoc distribution (that is, to be distributed in-house only, not through the App Store), you must also provide the large versions of your app icon. This icon identifies your app in iTunes.

Document Icons

If your iOS app creates documents of a custom type, you want users to be able to recognize these documents at a glance. You don't need to design a custom icon for this purpose because iOS uses your app icon to create document icons for you.

Spotlight and Settings Icons

Every app should supply a small icon that iOS can display when the app name matches a term in a Spotlight search. Apps that supply settings should also supply a small icon to identify them in the built-in Settings app.

These icons should clearly identify your app so that people can recognize it in a list of search results or in Settings. For example, the icons of the built-in apps are easy to discern in Settings, even though the icons are small:

You can name these small icons anything you want as long as you use the CFBundleIcons key to declare the names and you add the @2x suffix to the names of all high-resolution icons. You can use custom names because iOS chooses an icon based on whether its size is appropriate for the intended usage. To learn more about icon naming, see “App Icons” in iOS App Programming Guide.

For all devices, supply separate icons for Spotlight search results and Settings. If you don’t provide these icons, iOS might shrink your app icon for display in these locations.

For Spotlight search results on iPhone, iPod touch, and iPad create an icon in the following two sizes:

• 80 x 80 pixels

• 40 x 40 pixels (standard resolution)

For Settings on iPhone, iPod touch, and iPad create an icon in the following two sizes:

• 58 x 58 pixels

• 29 x 29 pixels (standard resolution)

NOTE

If the background of your icon is white, don’t add a gray overlay in an effort to increase its visibility in Settings. iOS adds a 1-pixel border stroke so that all icons look good on the white background of Settings.

Launch Images

A launch image is a simple placeholder image that iOS displays when your app starts up. The launch image gives users the impression that your app is fast and responsive because it appears instantly and is quickly replaced by the first screen of your app.

NOTE

You must provide at least one launch image. Typically, an iPhone app includes at least one launch image in portrait orientation; an iPad app includes at least one launch image in portrait orientation and at least one launch image in landscape orientation.

Because iOS lets you supply different launch images for different uses, you give each image a name that specifies how it should be used. The format of the launch image filename includes modifiers you use to specify the device, resolution, and orientation of the image. To learn how to name launch images appropriately, see “App Launch (Default) Images” in iOS App Programming Guide.

Supply a plain launch image that improves the user experience. In particular, the launch image isn’t an opportunity to provide:

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

• An About window

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

Because users are likely to switch among apps frequently, 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.

Design a launch image that is identical to the first screen of the app, except for:

• Text. The launch image is static, so any text you display in it won’t be localized.

• UI elements that might change. If you include elements that might look different when the app finishes launching, users can experience an unpleasant flash between the launch image and the first app screen.

If you think that following these guidelines will result in a plain, boring launch image, you’re right. Remember, the launch image doesn’t provide you with an opportunity for artistic expression. It’s solely intended to enhance the user’s perception of your app as quick to launch and immediately ready for use. For example, Settings and Weather each supply a launch image that is little more than a static background image.

The Settings launch image

The Weather launch image

Create launch images in different sizes for different devices. Launch images for all devices must include the status bar region. Create launch images in the following sizes:

For iPhone 5 and iPod touch (5th generation):

• 640 x 1136 pixels

For other iPhone and iPod touch devices:

• 640 x 960 pixels

• 320 x 480 pixels (standard resolution)

For iPad portrait:

• 1536 x 2048 pixels

• 768 x 1024 pixels (standard resolution)

For iPad landscape:

• 2048 x 1536 pixels

• 1024 x 768 pixels (standard resolution)

Bar Button Icons

iOS defines lots of standard bar-button icons, such as Refresh, Share, Add, and Favorites. As much as possible, you should use these buttons and icons to represent standard tasks in your app. (To learn more about the standard buttons and icons you can use, see Toolbar and Navigation Bar Buttons and Tab Bar Icons.)

If your app includes tasks or modes that can’t be represented by a standard icon—or if the standard icons don’t coordinate with your app’s style—you can design your own bar button icons. At a high level, you should aim for an icon design 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.

IMPORTANT

Be sure to avoid using images that replicate Apple products in your designs. These symbols are copyrighted and product designs can change frequently.

Whether you use only custom icons or a mix of custom and standard, all icons in your app should look like they belong to the same family in terms of perceived size, level of detail, and visual weight.

For example, take a look at the family of iOS bar icons and notice how the similarities in size, detail, and weight produce a sense of harmonious unity:

To create a coherent family of icons, consistency is key: As much as possible, each icon should use the same perspective and the same stroke weight. To ensure that all icons have a consistent perceived size, you may have to create some icons at different actual sizes. For example, the set of system provided icons shown here all have the same perceived size, even though the Favorites and Voicemail icons are actually a bit larger than the other three icons.

If you’re designing a custom tab bar icon, you should provide two versions—one for the unselected appearance and one for the selected appearance. The selected appearance is often a filled-in version of the unselected appearance, but some designs call for variations on this approach.

To create a filled-in version of an icon that has interior details (such as the Radio icon) invert the details so they retain their prominence in the selected version. The Keypad icon also has interior details, but the selected version would be confusing and hard to recognize if its background was filled in and the circles became white outlines.

Sometimes, a design needs a slight alteration to look good when it’s selected. For example, because the Timer and Podcasts icons include open areas, the selected versions condense the strokes a bit to fit into a circular enclosure.

If an icon becomes less recognizable when it’s filled in, a good alternative is to use a heavier stroke to draw the selected version. For example, the selected versions of the Voicemail and Reading List icons are drawn with a 4-pixel stroke, instead of the 2-pixel stroke that was used to draw the unselected versions.

Sometimes, an icon’s shape has details that don’t look good in a stroked outline. When this is the case—as it is for the Music and Artists icons—you can use the filled-in appearance for both versions of the icon. It’s easy for users to distinguish the selected and unselected appearances of such icons because the selected appearance is darker and gets the tint.

A custom icon that you create for a toolbar, navigation bar, or tab bar is also known as a template image, because iOS uses it as a mask to produce the icon you see when your app runs. If you create a full-color template image, iOS ignores the color.

To design a custom bar icon, follow these guidelines:

• Use pure white with appropriate alpha transparency.

• Not include a drop shadow.

• Use antialiasing.

If you want to create a bar icon that looks like it's related to the iOS 7 icon family, use a very thin stroke to draw it. Specifically, a 2-pixel stroke (high resolution) works well for detailed icons and a 3-pixel stroke works well for less detailed icons.

Regardless of the icon’s visual style, create a toolbar or navigation bar icon in the following sizes:

• About 44 x 44 pixels

• About 22 x 22 pixels (standard resolution)

Regardless of the icon’s visual style, create a tab bar icon in the following sizes:

• About 50 x 50 pixels (96 x 64 pixels maximum)

• About 25 x 25 pixels (48 x 32 pixels maximum) for standard resolution

Don’t include text in a custom tab bar icon. Instead, use the tab bar item APIs to set the title for each tab (for example, initWithTitle:image:tag:). If you need to adjust the automatic layout of the title, you can use the title adjustment APIs, such as setTitlePositionAdjustment:.

Web Clip Icons

If you have a web app or a website, you can provide a custom icon that users can display on their Home screens using the web clip feature. Users tap the icon to reach your web content in one easy step. You can create an icon that represents your website as a whole or an icon that represents a single webpage.

iOS also displays web clip icons in Safari Favorites, which is the grid of icons that appears when users tap the URL field or open a new tab in Safari.

If your web content is distinguished by a familiar image or recognizable color scheme, it makes sense to incorporate it in your icon. However, to ensure that your icon looks great on the device, you should also follow the guidelines in this section. (To learn how to add code to your web content to provide a custom icon, see Safari Web Content Guide.)

For iPhone and iPod touch, create icons that measure:

• 120 x 120 pixels

• 60 x 60 pixels (standard resolution)

For iPad, create icons that measure:

• 152 x 152 pixels

• 76 x 76 pixels (standard resolution)

NOTE

You can prevent the addition of any effects by naming your icon apple-touch-icon-precomposed.png.

Creating Resizable Images

You can create a resizable image to customize the background of several standard UI elements, such as popovers, buttons, navigation bars, tab bars, and toolbars (including the items on these bars). Providing resizable images for these elements can result in better app performance.

For many UI elements, you can also specify end caps in addition to a background appearance. An end capdefines an area of the image that should not be resized. For example, you might create a resizable image that includes four end caps that define the four corners of a button. When the image is resized to fill the button’s background area, the portions defined by the end caps are drawn unchanged.

Depending on the dimensions of the resizable image you supply, iOS either stretches or tiles it as appropriate to fill a UI element’s background area. To stretch an image means to scale up the image, without regard for its original aspect ratio. Stretching is performant, but it isn’t usually desirable for a multipixel image that can distort. To tile an image is to repeat the original image as many times as necessary to fill the target area. Tiling is less performant than stretching, but it's the only way to achieve a textured or patterned effect.

As a general rule, you should supply the smallest image (excluding end caps) that will result in the look you want. For example:

• If you want a solid color with no gradient, create a 1 x 1 point image.

• If you want a vertical gradient, create an image that has a width of 1 point and a height that matches the height of the UI element’s background.

• If you want to provide a repeating textured appearance, you need to create an image with dimensions that match the dimensions of the repeating portion of the texture.

• If you want to provide a nonrepeating textured appearance, you need to create a static image with dimensions that match the dimensions of the UI element’s background area.