아이폰 앱 개발 - 아이콘 및 이미지 제작 가이드

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW5

 

NextPrevious

Custom Icon and Image Creation Guidelines

Every application needs an application icon and a launch image. It’s recommended that applications also provide an icon for iOS to display in Spotlight search results (and, if necessary, in Settings). In addition, some applications need custom icons to represent app-specific document types, content, or functions and modes in navigation bars, toolbars, and tab bars.

Unlike other custom artwork in your app, these icons and images must meet specific criteria so that iOS can display them properly. In addition, icon and image files have naming requirements. Table 8-1 contains information about these icons and images and provides links to specific guidelines for creating them. To learn what to name these files and how to specify them in your code, see “Application Icons” in iOS App Programming Guide and “Application Launch Images” in iOS App Programming Guide.

You can customize many UI elements by supplying a resizable image for the element’s background. To learn how to create a resizable image that looks good and performs well, see “Tips for Creating Resizable Images.”

Note: To support resolution independence, you should provide high-resolution versions of your icons and images in addition to the resources you already supply. For guidelines on how to make the most of your high-resolution artwork, see “Tips for Creating Great Artwork for the Retina Display.”

Table 8-1 Custom icons and images

Description	Size for iPhone and iPod touch (in pixels)	Size for iPad (in pixels)	Guidelines
Application icon (required for all apps)	57 x 57 114 x 114 (high resolution)	72 x 72	“Application Icons”
App Store icon (required for all apps)	512 x 512	512 x 512	“Application Icons”
Launch image (required for all apps)	320 x 480 640 x 960 (high resolution)	For portrait: 768 x 1004 For landscape: 1024 x 748	“Launch Images”
Small icon for Spotlight search results and Settings (recommended)	29 x 29 58 x 58 (high resolution)	50 x 50 for Spotlight search results 29 x 29 for Settings	“Small Icons”
Document icon (recommended for custom document types)	22 x 29 44 x 58 (high resolution)	64 x 64 320 x 320	“Document Icons”
Web clip icon (recommended for web apps and websites)	57 x 57 114 x 114 (high resolution)	72 x 72	“Web Clip Icons”
Toolbar and navigation bar icon (optional)	Approximately 20 x 20 Approximately 40 x 40 (high resolution)	Approximately 20 x 20	“Icons for Navigation Bars, Toolbars, and Tab Bars”
Tab bar icon (optional)	Approximately 30 x 30 Approximately 60 x 60 (high resolution)	Approximately 30 x 30	“Icons for Navigation Bars, Toolbars, and Tab Bars”
Newsstand icon for the App Store (required for Newsstand apps)	At least 512 pixels on the longest edge	At least 512 pixels on the longest edge	“Newsstand Icons”

Note: For all images and icons, the PNG format is recommended.

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

You do not need to constrain your palette to web-safe colors. Although you can use alpha transparency in the icons you create for navigation bars, toolbars, and tab bars, do not use it in application icons.

Tips for Designing Great Icons and Images

Beautiful, compelling icons and images are a fundamental part of the iOS user experience. Far from being merely decorative, the icons and images in your app play an essential role in communicating with users.

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. Avoid focusing on a secondary or obscure aspect of an element.

Embrace simplicity. In particular, avoid cramming lots of different images into your icon. Try to use a single object that expresses the essence of your app. Start with a basic shape and 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.

Use color and shadow judiciously to help the icon tell its story. Don’t add color just to make the icon more colorful. Also, smooth gradients typically work better than sharp delineations of color.

In general, avoid using “greek” text or wavy lines to suggest text. If you want to show text in your icon, but you don’t want to draw attention to the words themselves, start with actual text and make it hard to read by shrinking it or doubling the layers.

In general, create an idealized version of the subject rather than using a photo. Although it can be appropriate to use a photo (or a screenshot) in an app icon, it’s often better to augment reality in an artistic way. Creating an enhanced version can help you emphasize the aspects of the subject that you want users to notice.

If your app has a very recognizable UI, consider creating a refined representation of it, instead of using an actual screenshot of your software in the app icon. Creating an enhanced version of the UI is particularly important when users could confuse a large version of the icon with the actual interface of the app.

Avoid using 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 cannot 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 or images that are based on them can 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.

Portray real substances accurately. Icons that represent real objects should also look as though they are made of real materials and have real mass. Realistic icons accurately replicate the characteristics of substances such as fabric, glass, paper, and metal, and convey an object’s weight and feel.

Use transparency when it makes sense. Transparency in an image can help depict glass or plastic, but it can be tricky to use convincingly. You should not use transparency in your app icon.

Tips for Creating Great Artwork for the Retina Display

The Retina display allows you to display high-resolution versions of your art and icons. If you merely scale up your existing artwork, you miss out on the opportunity to provide the beautiful, captivating images users expect. Instead, you should rework your existing image resources to create large, higher quality versions that are:

• Richer in texture. For example, in the high-resolution versions of the Settings and Contacts icons, the metal and paper textures are clearly visible.

  

• More detailed. For example, in the high-resolution versions of the Safari and Notes icons, you can see details such as the accurate contours of the continents behind the compass and the torn paper left by the previous note.

  

• More realistic. For example, the high-resolution versions of the Compass and Photos icons combine rich texture and fine details to create realistic portrayals of a compass and a photograph.

  

Even though bar icons are simpler than application or document icons, you should consider adding details as you create high-resolution versions of them. For example, the artists tab bar icon in the Music application is a streamlined silhouette of a singer. The high-resolution version of this icon is recognizably the same icon, but includes greater detail.

The following techniques can help you get great results as you create a high-resolution version of your artwork.

Scale up your original artwork to 200% using the “nearest neighbor” scaling algorithm. This works well if the original artwork was not created with vector shapes and does not include layer effects. The result is a large, pixelated image on top of which you can draw matching high-resolution art. This is a good way to begin because it allows you to preserve the original layout of your design.

If the original artwork was created with vector shapes, or it includes layer effects, you can use the default scaling algorithm instead of the nearest neighbor algorithm.

Add detail and depth. Don’t hesitate to draw very small elements, because the high-resolution version of your artwork allows much more room for fine details. For example, a 1-pixel dot in your original image becomes a 4-pixel dot (that is, 2 x 2 pixels) in the larger version.

Consider softening scaled-up elements. If, for example, you have a sharp, 1-pixel dividing line in your original artwork, it might have the boldness you want when you leave it scaled up to a 2-pixel line. But for some lines and elements, you might want to soften the scaled results by feathering or even leaving the element at the smaller size.

Consider adding blur for better results in effects such as engravings and drop shadows. For example, text engraving is typically done by shifting a duplicate image of the text by 1 pixel. Scaled up, this shift would result in an engraving width of 2 pixels, which is likely to look very sharp and unrealistic at a higher resolution. To improve this, you can leave the shift as-is (that is, at 1 pixel), but add a 1-pixel blur to soften the engraving. This still results in a 2-pixel wide engraving effect, but the outer pixel now looks more like it is only half a pixel wide, which results in a better sense of dimensionality.

Tips for 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 cap defines 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 pixel image.

• If you want a vertical gradient, create an image that has a width of 1 pixel 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.

Note: If you’re creating resizable images to draw on a Retina display, you also need to supply high-resolution versions of your images. For example, you would also supply a solid-color 2 x 2 pixel image, or a gradient image that has a width of 2 pixels.

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. Every application needs an application icon.

Note: If your app is a game, its app icon is also used in Game Center.

Try to balance eye appeal and clarity of meaning in your icon so that it’s rich and beautiful and clearly 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.

Create different sizes of your application icon for different devices. If you’re creating a universal application, you need to supply application icons in all three sizes.

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

• 57 x 57 pixels

• 114 x 114 pixels (high resolution)

For iPad, this size is required:

• 72 x 72 pixels

When iOS displays your application icon on the Home screen of a device, it automatically adds the following visual effects:

• Rounded corners

• Drop shadow

• Reflective shine (unless you prevent the shine effect)

For example, a simple 57 x 57 pixel iPhone application icon might look like this:

When it’s displayed on an iPhone Home screen, iOS adds rounded corners, a drop shadow, and a reflected shine. So the same application icon would look like this:

Note: You can prevent iOS from adding the shine to your application icon. To do this, you need to add the UIPrerenderedIcon key to your application’s Info.plist file (to learn about this file, see “The Information Property List” in iOS App Programming Guide).

The presence (or absence) of the added shine does not change the dimensions of your application icon.

Ensure that your icon is eligible for the visual enhancements iOS provides. You should provide an image that:

• Has 90° corners (it’s important to avoid cropping the corners of your icon—iOS does that for you when it applies the corner-rounding mask)

• Does not include a drop shadow

• Does not have any shine or gloss (unless you’ve chosen to prevent the addition of the reflective shine)

• Does not use alpha transparency

Give your application icon a discernible background. Icons with visible backgrounds look best on the Home screen primarily because of the rounded corners iOS adds. This is because 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 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.

Be sure your image completely fills the required area. If your image boundaries are smaller than the recommended sizes, or you use transparency to create “see-through” areas within them, your icon can appear to float on a black background with rounded corners.

For example, an application might supply an icon on a transparent background, like the blue star on the far left. When iOS displays this icon on a Home screen, it looks like the image in the middle (if no shine is added) or it looks like the image on the right (if shine is added).

An icon that appears to float on a visible black background looks especially unattractive on a Home screen that displays a custom picture.

Create 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 can be subtly richer and more detailed. There are no visual effects added to this 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), you must also provide a 512 x 512 pixel version of your application icon. This icon identifies your application in iTunes.

iOS might also use this large image in other ways. In an iPad application, for example, iOS uses the 512 x 512 pixel image to generate the large document icon, if a custom document icon is not supplied.

Launch Images

To enhance the user’s experience at application launch, you must provide at least one launch image. A launch image looks very similar to the first screen your application displays. iOS displays this image instantly when the user starts your application and until the app is fully ready to use. As soon as your app is ready for use, your app displays its first screen, replacing the launch placeholder image.

Supply a launch image to improve user experience.

Avoid using your launch image as 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, 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.

Generally, design a launch image that is identical to the first screen of the application.

Exceptions:

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

UI 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.

For iPhone and iPod touch launch images, include the status bar region. Create launch images of these sizes:

• 320 x 480 pixels

• 640 x 960 pixels (high resolution)

For iPad launch images, do not include the status bar region. Create launch images of these sizes:

• 768 x 1004 pixels (portrait)

• 1024 x 748 pixels (landscape)

Note that most iPad applications should supply a launch image for each orientation.

If you think that following these guidelines will result in a 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 app as quick to launch and immediately ready for use. The following examples show you how plain a launch image can be.

The iPhone Settings launch image (shown next to the first application screen) displays only the background of the application, because no other content in the application is guaranteed to be static.

In the launch image for iPhone Stocks (shown next to the first application screen), only static images are included because these images are always visible in the first application view of the Stocks app.

Small Icons

Every application should supply a small icon that iOS 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.

This icon should clearly identify your app so that people can recognize it in a list of search results or in Settings.

For iPhone and iPod touch, iOS uses the same icon for both Spotlight search results and Settings. If you do not provide this icon, iOS might shrink your application icon for display in search results and in Settings. For your iPhone app, create two small icons that measure:

• 29 x 29 pixels

• 58 x 58 pixels (high resolution)

For iPad, you supply separate icons for Settings and Spotlight search results. Create two icons that measure:

• 29 x 29 pixels (for Settings)

• 50 x 50 pixels (for Spotlight search results)

  Note that the final visual size of this icon is 48 x 48 pixels. iOS trims 1 pixel from each side of your artwork and adds a drop shadow. Be sure to take this into account as you design your icon for Spotlight search results.

Document Icons

If your iOS application creates documents of a custom type, you might want to create a custom icon that identifies this type to users. If you don’t provide a custom document icon, iOS creates one for you by default, using your application icon (including the added visual effects).

For example, a default document icon that uses the 57 x 57 pixel white star iPhone app icon would look like this:

A high-resolution default document icon that uses the 114 x 114 pixel white star iPhone app icon would look like this:

On the larger iPad, a default document icon that uses the 72 x 72 pixel white star app icon would look like this:

Optionally, you can provide custom artwork for iOS to use instead of your application icon. Because people will see your document icon in different places, it’s best to design an image that's memorable and clearly associated with your application. Your custom artwork should be attractive, expressive, and detailed.

Depending on whether your app runs on iPhone or iPad, you use different specifications to create this icon.

Document Icon Specifications for iPhone

For your iPhone app, create a document icon in two sizes:

• 22 x 29 pixels

• 44 x 58 pixels (high resolution)

Place your custom artwork within each rectangular space as desired. The artwork can be centered, offset, or it can fill the entire space.

For example, if you supply a 22 x 29 pixel icon that looks like the image on the left, iOS creates a document icon that has a drop shadow so it looks like the image on the right:

Similarly, if you supply a 44 x 58 pixel icon that looks like the image on the left, iOS creates a document icon that that has a drop shadow so it looks like the image on the right:

Document Icon Specifications for iPad

iOS uses two sizes of document icons for iPad applications: 64 x 64 pixels and 320 x 320 pixels. It’s a good idea to create both sizes so that your document icons look good in different contexts.

For both sizes, the overall dimensions include specific amounts of padding, leaving a smaller “safe zone” for your artwork. It’s essential to make sure your artwork fits well in these safe zones, or it may get cropped or scaled up.

Although your artwork can fill an entire safe zone, the upper-right corner will always be partially obscured by the page curl effect that iOS adds. In addition, iOS adds a gradient that transitions from black (near the top, just below the page curl) to transparent (at the bottom edge).

Important: Be sure to follow the guidelines in this section as you create a custom document icon for your iPad app. If your icon is too large, too small, or improperly padded, the resulting document icon will not look good.

To create a 64 x 64 pixel document icon:

1. Create a 64 x 64 pixel image in PNG format.

2. Add the following margins to create the appropriately sized safe zone:

   • 1 pixel on top

   • 4 pixels on bottom

   • 10 pixels on each side

   Your safe zone should look similar to the colored area shown below:

   

3. Place your custom artwork within the 44 x 59 pixel safe zone. The artwork can be centered, offset, or it can fill the entire safe zone. (Remember that iOS adds the page curl to the upper-right corner and a gradient that runs from the page curl to the bottom edge.)

For example, if you supply an icon that looks like the image on the left, iOS creates a document icon that looks like the image on the right.

To create a 320 x 320 pixel document icon:

1. Create a 320 x 320 pixel image in PNG format.

2. Add the following margins to create the appropriately sized safe zone:

   • 5 pixels on top

   • 20 pixels on bottom

   • 50 pixels on each side

   Your safe zone should look similar to the colored area shown below:

   

3. Place your custom artwork within the safe zone, which is 220 x 295 pixels. The artwork can be centered, offset, or it can fill the entire safe zone. (Remember that the page curl will obscure some of the artwork in the upper right corner of the safe zone.)

For example, if you supply an icon that looks like the image on the left, iOS creates a document icon that looks like the image on the right.

Web Clip Icons

If you have a web application 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.

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:

• 57 x 57 pixels

• 114 x 114 pixels (high resolution)

For iPad, create an icon that measures:

• 72 x 72 pixels

As it does with application icons, iOS automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen. Specifically, iOS adds:

• Rounded corners

• Drop shadow

• Reflective shine

For example, a simple 57 x 57 pixel webpage icon might look like this:

When your 57 x 57 pixel icon is displayed on an iPhone Home screen, iOS makes the icon look like this:

Note: You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (this is available in iOS 2 and later).

Ensure your icon is eligible for the visual enhancements iOS adds (if you want them). You should produce an image in PNG format that:

• Has 90° corners

• Does not have any shine or gloss

Icons for Navigation Bars, Toolbars, and Tab Bars

As much as possible, you should use the system-provided buttons and icons to represent standard tasks in your application. 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 app 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 app 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 represent these modes or subsets.

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.

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

A custom icon that you provide for a toolbar, navigation bar, or tab bar is also known as a template image, because iOS uses it as a mask to create the icon you see in your application. It is not necessary to create a full-color template image.

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

• Use pure white with appropriate alpha transparency.

• 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 in the following sizes:

• For iPhone and iPod touch:

  • About 20 x 20 pixels

  • About 40 x 40 pixels (high resolution)

• For iPad:

  • About 20 x 20 pixels

For tab bar icons, create an icon in the following sizes:

• For iPhone and iPod touch:

  • About 30 x 30 pixels

  • About 60 x 60 pixels (high resolution)

• For iPad:

  • About 30 x 30 pixels

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:).

Note: For a tab bar icon, you can also provide a set of two fixed images, one for the unselected appearance and one for the selected appearance. If you provide fixed images, iOS does not treat them as template images and so it does not apply any standard or custom tab bar tint to them. However, iOS still draws the selection indicator image when the user taps a tab that contains a fixed-image icon. (To learn more about the selection indicator image, see “Tab Bar.”)

If necessary, include custom pressed or selected appearances for your icons. iOS automatically provides these appearances for items in navigation bars, toolbars, and tab bars, even when you specify a tint for the bar. However, you can supply custom appearances if the default treatment does not look good with your custom icons or bar background.

Give all icons in a bar a similar visual weight. Aim to balance the overall size, level of detail, and use of solid regions across all icons that can appear in a specific bar. In general, it does not look good to combine in the same bar icons that are large and blocky, and completely filled, with icons that are small, detailed, and unfilled.

Newsstand Icons

If your app uses Newsstand Kit to publish subscription-based periodical content, you need to provide icons for display in the App Store and on people’s devices. Follow the guidelines in this section to ensure that your icons look good on all iOS-based devices and in all contexts.

Important: The aspect ratio of all Newsstand icons should be between 1:2 and 2:1. In addition, all Newsstand icons must be flat and have 90° corners.

Do not add perspective to any of your Newsstand icons.

All Newsstand apps need to supply a Newsstand icon that represents the default cover art in the App Store. The long edge of this icon should measure at least 512 pixels (note that this icon is separate from the 512 x 512 pixel App Store icon that all apps must provide).

Your Newsstand icon should be a reasonable facsimile of the cover of a typical issue. For example, you probably want to focus on the parts of the cover that are fairly consistent from issue to issue. You should avoid adding to your icon elements that users would never see on an actual cover, such as a message to “tap here for the latest issue.”

In addition to the Newsstand icon, you also need to supply an icon that accurately represents each new issue so that it can appear on the Newsstand shelf and in the multitasking bar on an iOS-based device. It’s recommended that you create a single large icon for each issue, and allow iOS to scale it for display in both places (the icon displayed on the Newsstand shelf is larger than the icon displayed in the multitasking bar). Depending on the precise location of an issue on a Newsstand shelf, iOS might also add perspective to the icon so that it matches the realistic look of the shelf.

Specifically, you should create a per-issue icon whose long edge measures at least 512 pixels. To display the current issue’s icon on the Newsstand shelf and in the multitasking bar, iOS scales your large icon to the following sizes:

Table 8-2 Maximum scaled sizes for the long edges of per-issue icons

Device	Scaled long-edge size (Newsstand shelf)	Scaled long-edge size (multitasking bar)
iPhone and iPod touch	90 pixels (180 pixels for high resolution)	57 pixels (114 pixels for high resolution)
iPad	126 pixels	72 pixels

In addition to providing icons, you use keys in your app’s Info.plist file to define how the icons should appear on iOS-based devices. First, you use the binding type key to indicate whether your content is a magazine or a newspaper. Then, you use the binding edge key to specify the visual enhancements that iOS should add to the icon, such as the fold at the bottom edge of a standard newspaper. For more information about these keys and their values, see “Contents of the UINewsstandIcon Dictionary” in Information Property List Key Reference.

When you specify the magazine binding type, iOS adds the appearance of multiple pages and a shadow that suggests thickness. You must also specify a left or right binding edge for a magazine icon, to indicate the edge that should receive the stapled binding appearance.

For example, suppose that you supply a per-issue icon similar to this:

If you specify the left binding edge, iOS adds the stapled binding appearance to the left edge and the multiple-page appearance to the right edge.

When you specify the newspaper binding type, iOS adds the appearance of additional copies of the paper that are stacked beneath the current issue.

If your newspaper is standard size, you can specify a bottom binding edge to give your icon the appearance of a fold at its bottom edge. If your newspaper is tabloid-size (that is, approximately half the size of a broadsheet), you can specify left, right, or no binding edge to avoid the addition of the fold appearance.

For example, suppose that your per-issue newspaper icon looks similar to this:

If you specify the bottom binding edge, iOS adds the appearance of a fold to the bottom edge. (iOS adds the stacked-paper appearance regardless of the value you supply for the binding edge key.)

For additional information about setting up a Newsstand app, see iTunes Connect Developer Guide.

NextPrevious

---

© 2011 Apple Inc. All Rights Reserved. (Last updated: 2011-10-12)

Did this document help you? Yes It's good, but... Not helpful...

Shop the Apple Online Store (1-800-MY-APPLE), visit an Apple Retail Store, or find a reseller.

• Mailing Lists
• RSS Feeds

Copyright © 2010 Apple Inc. All rights reserved.

• Terms of Use
• Privacy Policy