Below is an excerpt I wrote in a chapter from the spec of my current iOS app project. I dragged myself through multiple readings of Apple's doc plus some googling to delineate the icon files. Hopefully this will save you and your team much confusion and time.
My chapter presented here is aimed at the graphics artists and managers who are responsible for producing the image files. So the programmer must still attend to the documentation for the programming details necessary to complete the work. But hopefully this checklist of files will help the whole team.
The file names listed here were required in early versions of iOS 3. In later versions of iOS 3 and beyond, you may devise your own names as the programmer must specify the files by name. But why not use the same names anyway? Having consistent names across projects must surely be convenient and clear.
App Icons
Need for Icons
Apple requires us to supply images to represent our app as an icon. The icon is used for three purposes:
- Display on handheld devices
- Display on tablet devices
- Display in the App Store (on devices, or web browser, or iTunes app).
For each purpose, pairs of images are needed: one for conventional screens, and a second at double resolution for Retina screens. The second image always has a file name matching the first, but with the three characters @2x inserted before the file extension.
Format
All the icon files must be in PNG format (Portable Network Graphics). Do not use interlacing. Use a solid background, not translucent or transparent (no alpha transparency). Use 24-bit color (8 bits each for red, green, and blue).
Design
All icon images are square.
The graphics artist may choose to vary the design across the dramatic range of sizes going from 29 pixels square to 1024 pixels square. All the images should carry the same theme, the same color palette and message. But the larger sized images can make use of the additional pixels by adding more detail.
The graphics artist should be aware that Apple reserves the right to make two alterations to the image:
- In nearly all usages, Apple crops the display with rounded corners. The radius of the rounding may vary. Therefore, the artist should use all the pixels in the corners, filling them with at least the background color. The design should still be sensible and legible whether rounded or not.
- A glossy shine effect may be applied over the icon, as if a light is shining down on a slightly puffy icon. The shine slightly alters the tone of the colors of about half the icon. While we can request that Apple not apply the shine, keeping the shine is most common in iOS versions prior to iOS 7. In the future iOS 7, the shine feature may be removed. So the design should be sensible and legible with or without the shine effect applied.
More
Info
App Icons on iPad and iPhone, Techincal Q&A QA1686, by Apple
App Icons, iOS App
Programming Guide, by Apple
Custom Icon and Image Creation Guidelines, iOS Human Interface Guidelines, by Apple
Files
The graphic artist provides many files, with names as listed in these tables. The files are organized in folders, one folder for each table here, named the same.
On handheld devices, the same icon is used for both the Settings view and the Spotlight search results view. On tablets, we can specify different icons for each purpose, if so desired. Also, on tablets the Spotlight view trims a pixel (two on Retina) from each side to make room for a drop shadow (see * in tables).
The two iTunesArtwork files are actually submitted without any extension on the name, no '.png'. Strange but true. To avoid the confusion of having files without file name extensions, I do not bother the team with the peculiarity of Apple. I remove the file name extension at time of submission to Apple.
Handheld
Resolution
|
File Name
|
Purpose
|
29 x 29
|
Icon-Small.png
|
Settings & Spotlight views
(conventional screen)
|
58 x 58
|
Icon-Small@2x.png
|
Settings & Spotlight views
(Retina screen)
|
57 x 57
|
Icon.png
|
Device Home view
(conventional screen)
|
114 x 114
|
Icon@2x.png
|
Device Home view
(Retina screen)
|
Tablet
Resolution
|
File Name
|
Purpose
|
29 x 29
|
Icon-Small-29.png
|
Settings view
(conventional screen)
|
58 x 58
|
Icon-Small-29@2x.png
|
Settings
view
(Retina screen)
|
50 x 50
(48 x 48*)
|
Icon-Small-50.png
|
Spotlight view
(conventional screen)
|
100 x 100
(96 x 96*)
|
Icon-Small-50@2x.png
|
Spotlight
view
(Retina screen)
|
72 x 72
|
Icon-72.png
|
Device Home view
(conventional screen)
|
144 x 144
|
Icon-72@2x.png
|
Device Home
view
(Retina screen)
|
AppStore
Resolution
|
File Name
|
Purpose
|
512 x 512
|
iTunesArtwork.png
|
iTunes app or web
site
(conventional screen)
|
1024 x 1024
|
iTunesArtwork@2x.png
|
iTunes app or web
site
(Retina screen)
|
No comments:
Post a Comment