Apple Touch Icon Tutorial

How to cre­ate an Apple Touch Icon — Tutorial

Sub­se­quent to yesterday’s call and post, this arti­cle shows how to design an Apple Touch Icon fol­low­ing Apple Devel­op­ers Guidelines.

For the pur­pose of this tuto­r­ial we are focus­ing on Icons for iPhone, iPod and iPad; also we limit the exer­cise to icons for web­sites and neglect appli­ca­tions; Apple refers to these icons as Web Clip Icons (rec­om­mended for web­sites and web applications).

The icons must meet spe­cific cri­te­ria for dis­play in iOS (that’s the apple Oper­at­ing Sys­tem for mobile devices). Here are the rules:

• iPhone and iPod:  57 x57 pix­els and 114 x 114 pix­els for high resolution
• iPad: 72 x 72 pixels

iOS adds auto­mat­i­cally some style ele­ments to your icon, namely:

• Rounded Cor­ners
• Drop Shadow
• Reflec­tive shine

You can pre­vent iOS from adding styles by nam­ing your icon

apple-touch-icon-precomposed.png
You then have to respect some addi­tional cri­te­ria to ensure that your icon is eli­gi­ble to the visual enhance­ments iOS will provide:

• Pro­duce an image in PNG
• Rounded Cor­ners at 90 Degrees
• No shine or gloss

Exam­ple:

Our 57 x 57 pix­els design:

Apple’s iOS output:

• Apple rec­om­mends for all icons PNG .
• Stan­dard bit depth: 24 bits (8 bits each for red, green, and blue), plus an 8-bit alpha channel
• Do not use alpha trans­paren­cies in Web Clip Icons and Appli­ca­tion Icons

Make it a dis­cernible back­ground to look good on the home screen namely because iOS ads the rounded cor­ners to give all icons a uni­form look. Users rec­og­nize 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 trans­paren­cies, it seems to float within a black field with rounded cor­ners. This does not look very invit­ing, namely when the user dis­plays a back­ground image on his screen. The see through effect will cre­ate inter­fer­ence between the screen back­ground and your image.

To start with, cre­ate a new doc­u­ment, I like to use 512 x 512 pixels:

Now you see a white square; fill it with the color of your choice (back­ground color).

In my case: red.

Add a new layer and bring in your logo; in my case the let­ter Y, in white.

Save as PNG.

Game over.

• Start as before just with a trans­par­ent background.
• Add a cus­tom shape: Use the rounded rec­tan­gle tool, set the cor­ners to 90 degrees and select the back­ground color.
• Draw the shape. Tip: snap to doc­u­ment bounds.
• Add some style to the back­ground or leave it plain.

Add some text and or images:

or:

The icons will show as fol­lows (they are crisp on the iPhone):

Look­ing for­ward to tonight’s workshop :-).

• ios icon tutorial
• apple touch icon photoshop
• apple-touch-icon
• apple touch icon tutorial
• apple icon
• touch icon
• apple-touch-icon pho­to­shop
• pho­to­shop ios icon tutorial
• apple-touch-icon tuto­r­ial
• 90 degree cor­ners pho­to­shop ios

Related posts:

1. Cre­ate Apple Touch Icons and Startup Images
2. Apple Peel for WordPress
3. Apple Look for XO 2011
4. How to use Pho­to­shop Actions
5. Resiz­ing Pic­tures in Photoshop

Tags: Apple Touch Icons, Web Clip Icons

This entry was posted on February 3, 2011 at 12:57 am and is filed under Design, Featured Main, Tutorials, Web Design. You can follow any responses to this entry through the RSS 2.0 feed.