Make iPad Icons Make iPad Icons This article provides information on the following topics: Required Product See Also In this topic, we'll learn how to create icons for iPad applications. The topic is based on the Apple article Introduction The Apple iPad device defines new standards in personal application development. The device has a multi-touch interface that brings the user experience to a new level of ergonomics. In this environment, icons have an important role to play to guide the user intuitively. In addition, some applications need custom icons to represent custom document types or application-specific functions and modes in navigation bars, toolbars, and tab bars. These icons must meet specific criteria so that the iPad OS can display them properly. iPad Icons Criteria The following table contains a summary of information about these icons and images and provides links to specific guidelines for creating them: Size in pixels Guidelines Application icon (required) App Store icon (required) Launch image (required) Small icon for Spotlight search results and Settings (recommended) Document icon (recommended for custom document types) 64 x 64 Web Clip icon (recommended for web applications and websites) Toolbar and navigation bar icon (optional) Tab bar icon (optional) Top of Page Application Icons For iPad, only one size is required: 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) Note Ensure your icon is eligible for the visual enhancements iOS provides. You should produce an image that: 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. An icon that appears to float on a visible black background looks especially unattractive on a Home screen that displays a custom picture. To create an application icon in Axialis IconWorkshop, follow the procedure below: Top of Page Application Icons for the App Store To create an application icon for the App Store in Axialis IconWorkshop, follow the procedure below: Top of Page Launch Images Supply a launch image to improve user experience; avoid using it as an opportunity to provide: An About window 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. Design a launch image that 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. For iPad, create launch images that include the status bar region in the following sizes: Top of Page 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 application so that people can recognize it in a list of search results or in Settings. For iPad, 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. Create icons that measure: To create small icons for your iPad application in Axialis IconWorkshop, follow the procedure below: Top of Page Document Icons Optionally, you can provide custom artwork for iOS to use instead of your application icon. To do this: Place your custom artwork within each rectangular space as desired: The artwork can be centered, offset, or it can fill the entire space. Keep in mind that iOS applies a gradient that transitions from transparent (at the top edge) to black (at the bottom edge). Top of Page 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. For iPad create icons that measure: Note 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 Note Ensure your icon is eligible for the visual enhancements iOS adds (if you want them). You should produce an image in PNG format that: Does not have any shine or gloss To create an Web Clip icon in Axialis IconWorkshop, follow the procedure below: Top of Page 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 (Apple website). 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 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 Use pure white with appropriate alpha. Do not include a drop shadow. Use anti-aliasing. For toolbar and navigation bar icons, create an icon in the following sizes: For tab bar icons, create an icon in the following sizes: These sizes represent the maximum dimensions a tab bar icon can have. If you provide a larger icon, iOS will center it and clip the excess. Note The icon you provide for toolbars, navigation bars, and tab bars is used as a mask to create the icon you see in your application. It is not necessary to create a full-color icon. 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, blocky, and completely filled with icons that are small, detailed, and unfilled. To create these icons in Axialis IconWorkshop, follow the procedure below: Related Topics make cursors Send us feedback about the site. Microsoft, Windows, Windows XP, Windows Vista are registered trademarks of Microsoft Corporation Adobe, Flash, Photoshop, Illustrator are registered trademarks of Adobe System Incorporated Apple, AppStore, Ipod, iPhone, iPad are registered trademarks of Apple Inc
Clker.com is owned by Rolera LLC, 2270 Route 30, Oswego, IL 60543 support\at\clker\dot\com
Comments