Rockstar Icon Designer - Kate McInnes [50]
Crafting Icons for iOS
To ensure a consistent design the highlight and corner style for iOS App icons are not part of the icons itself, instead it is applied by the operating system.
Using a mock-up template is a good way to judge the design before it's in use. iOS icon templates can be freely downloaded at various design sites or you can easily create your own in Photoshop. Make sure that the reflection and corner layers are separate to each other so that the highlight can be toggled on or off for both the default and custom style highlights.
Technical Breakdown
Sizes
Regular Screens: iPhone 3 and iPod Touch
Required Icons Application Icons: 57 x 57px
App Store Icon: 512 x 512px
Recommended Icons
Spotlight Search & Settings: 29 x 29px
Web Clip Icon: 57 x 57px
Document Icon: 22 x 29px
Toolbar Icons: 20 x 20px
Tab Bar Icons: 30 x 30px
Retina Display Screens: iPhone 4 +
Required Icons
Application Icons: 114 x 114px
App Store Icon: 512 x 512px
Recommended Icons
Spotlight Search & Settings: 58 x 58px
Web Clip Icon: 114 x 114px
Document Icon: 44 x 58px
Toolbar Icons: 40 x 40px
Tab Bar Icons: 60 x 60px
iPad 1 & 2
Required Icons
Application Icons – 72 x 72px
App Store Icon- 512 x 512px
Recommended Icons
Spotlight Search – 50 x 50px
Settings – 29 x 29px
Web Clip Icon – 72 x 72px
Document Icon – 64 x 64px and 320 x 320px
Toolbar Icons – 20 x 20px
Tab Bar Icons – 30 x 30px
Image Format: PNG Files are required to have no alpha transparency for Application icons, transparency is permitted for Toolbars and navigation.
Colors Used: The choice of color should reflect the colors used in the application interface. Vibrant colors work well and will help your design stand out in the App Store. To make a harmonious design, chose one main color and two or three supporting colors.
Viewing Angles Used: The main body of the iOS icon is drawn straight on, but you can play around with the contents and draw objects in a variety of views. Remember to keep it clear and easy to recognize, the rest is up to your imagination.
Light Source: iOS will apply a default reflection to the top of that icon that's one third of the icons size. If you're creating an icon without this reflection you should try and match the direction of the light to complement the default icons around it and the slight drop shadow that's applied to all icons by the iOS.
Format: PNG-24
Android 2.0
Background
Led by Google and developed by the Open Handset Alliance, Android is an open-source operating system that runs on many different models of smartphones, netbooks and tablet computers. While it is often considered the alternative to iOS, Android has a larger market share than the iPhone with 550,000 Android devices activated by Google each day.
When Android was first launched onto the market the application icons had an isometric style similar to the Windows XP viewpoint, which was extremely hard to specify for the wide variety of objects that needed to be made into icons. In Android 2.0 the icon style was changed to a user friendly front facing view that is much easier to specify.
The icon style for Android is less constricted than iOS icons, and gives designers the ability to use custom shapes for Launcher icons which gives them the appearance of desktop icons viewed front on. With this freedom comes specifications, and you will find a comprehensive developers guide that explains how to create icons that blends with the Android style in the Android Developers Dev Guide.
Style
The style of Android application icons are rich in color with a soft use of lighting effects. They have a viewpoint that is direct from the front of