How to create an Apple Touch Icon – Tutorial
Subsequent to yesterday’s call and post, this article shows how to design an Apple Touch Icon following Apple Developers Guidelines.
For the purpose of this tutorial we are focusing on Icons for iPhone, iPod and iPad; also we limit the exercise to icons for websites and neglect applications; Apple refers to these icons as Web Clip Icons (recommended for websites and web applications).
1. Apple Touch Icon Guidelines
The icons must meet specific criteria for display in iOS (that’s the apple Operating System for mobile devices). Here are the rules:
- iPhone and iPod: 57 x57 pixels and 114 x 114 pixels for high resolution
- iPad: 72 x 72 pixels
iOS adds automatically some style elements to your icon, namely:
- Rounded Corners
- Drop Shadow
- Reflective shine
You can prevent iOS from adding styles by naming your icon
You then have to respect some additional criteria to ensure that your icon is eligible to the visual enhancements iOS will provide:
- Produce an image in PNG
- Rounded Corners at 90 Degrees
- No shine or gloss
Our 57 x 57 pixels design:
Apple’s iOS output:
- Apple recommends for all icons PNG .
- Standard bit depth: 24 bits (8 bits each for red, green, and blue), plus an 8-bit alpha channel
- Do not use alpha transparencies in Web Clip Icons and Application Icons
2. Icon Design Recommendations
Make it a discernible background to look good on the home screen namely because iOS ads the rounded corners to give all icons a uniform look. Users recognize the icons shape and know that the icon is tappable.
Make sure your image fills entirely the required area. If your image is smaller, and has transparencies, it seems to float within a black field with rounded corners. This does not look very inviting, namely when the user displays a background image on his screen. The see through effect will create interference between the screen background and your image.
2. Create an Apple Touch Icon or Web Clip Icon with Photoshop
To start with, create a new document, I like to use 512 x 512 pixels:
Now you see a white square; fill it with the color of your choice (background color).
In my case: red.
Add a new layer and bring in your logo; in my case the letter Y, in white.
Save as PNG.
Custom Design a Web Clip Icon with Rounded Corners
- Start as before just with a transparent background.
- Add a custom shape: Use the rounded rectangle tool, set the corners to 90 degrees and select the background color.
- Draw the shape. Tip: snap to document bounds.
- Add some style to the background or leave it plain.
Add some text and or images:
The icons will show as follows (they are crisp on the iPhone):
Looking forward to tonight’s workshop :-).