iOS Icon Design: Preparing Photoshop

Easy

Posted On by John Slater in Design, iOS Icon Design, Reference, Tutorials

In this series i want to cover the ins and outs of icon design. Although your app, it’s look and feature set are the most important things you shouldn’t let down the visual appeal of your app with a poor icon.

I’m a web designer by trade and i find myself judging things on aesthetics constantly and this includes iPhone apps. When i download an app to be displayed on my home screen i expect the same level of design as in the app, you won’t find a poor icon on my first page because of this.

I won’t go into too much details on Icon Guidelines just yet, i’ll leave this for the final post on this subject but it is important to ensure your icon looks as appealing your app its self, after all this is what entices people to open the app.

In this article we will cover the preparation for design within Photoshop. You can use any graphics program you wish to create your icons, some people choose Fireworks, some people choose Illustrator and some Photoshop. By preference i’ll use Photoshop CS5 for these tutorials.

1. Open Photoshop

To kick start off the design process lets open up Photoshop and create a brand spanking new document to get us started.

2. New Document & Sizes

The Apple user-interface guidelines list all of the various icon sizes you’ll encounter while developing for iOS.

  • iPhone, iPhone 3G & iPhone 3GS (Non-retina display) – 57×57 pixels
  • iPhone 4 & iPhone 4S (retina display) – 114×114 pixels
  • iPad & iPad 2 – 72×72 pixels

Ideally you want to design your icons so they are scaleable simply because Apple may, in the future, create higher density displays and you’re icons will need for account to these in the same way the 57×57 icons got pushed out when iPhone 4 was released.

Here you can see i’ve chosen to design for the iPhone Retina display so that i can later scale down the icons for iPad and iPhone non-retina.

3. Masking Those Corners

Apple’s user interface guidelines clearly specify that your icon cannot and must not contain cropped corners simply because the iPhone does this process it’s self.

With this said it’s always a good idea to know what your limits are and where the icon edges are. So here we will create a box with rounded corners in Photoshop so we can create a mask.

The icon radiuses for iPhone and iPad are as follows…

  • iPhone, iPhone 3G & iPhone 3GS (non-retina) – 9 pixels
  • iPhone 4 & iPhone 4S (retina display) – 18 pixels
  • iPad & iPad 2 – 11 pixels

Grab the rounded rectangle tool from the tool bar.

Now in the top bar you’ll see a text box called radius, in here type “18 px” and ensure “snap to pixels” is enabled from the drop down next to it, in this drop down also enter in the sizes you wish for the rounded box to be which should be the size of your icon.

Ensure the newly created rounded box is in the dead centre of your canvas, otherwise your mask will be off and so will your icon.

Now i’ve created a new folder (Icon) which i will use to apply the clipping mask to, i’ve also created a layer with a solid colour (Solid) within this. The reason for the solid colour is just to make it visually clear what is being clipped, nothing more.

Finally, CMD+Click on the “Shape 1″ layer, this will create a marquee around the shape. Then select the new folder (Icon) and click the icon in the layer panel shown above.

As you can see we now have something that sort of looks like an iPhone icon in Photoshop. You can now begin designing your icon within the masked folder and you’ll have some level of guidance when it comes to the edges.

4. Preparing for Export

The user interface guidelines make it clear that you shouldn’t export your icon with masked corners, so lets unmask them corners temporarily for exporting.

Right click on the folder’s mask icon and click “Disable Layer Mask”. This will not deleted the layer mask but instead switch it off so you can export the document.

Next…

In the next article we will discuss in more detail the different icon sizes that iOS devices can handle as well as pre-rendered icons and what they are, what they mean and why.

This will lead us nicely to the last of our articles in this series where we will discuss Apple’s user-interface guidelines and how you can avoid App Store rejection when it comes to your app’s icon’s.

About John Slater

I'm a professional web designer professionally, in a professional way, but also love iOS Development and two years ago is when i threw myself into the deep end and learnt enough to create a few apps. While i develop my skills i want to help others learn iOS development, because i'm kind like that. @slaterjohn