A Step-By-Step Guide to Designing an iPhone App Icon

When designing app icons for an iPhone or iPad, which both have black backgrounds, remember to use color.

I don't think introductions are necessary, so let's just jump right in.

We will be designing an icon in Adobe Illustrator at the largest icon size needed, which is 512px by 512px. You can easily scale to smaller sizes using the batch process in Photoshop once your icons are complete.

Now, on to the 1st step.

Step 1: Setting up the document

• Start by opening a fresh new document in Illustrator. Your dimensions should be 512px by 512px.
• Use RGB for the Color Mode. The Raster Effects setting should be at “Screen (72 ppi)” under the “Advanced” tab.

Easy enough? On to step 2.

Step 2: Icon in a round shell

Now that your document is setup, it's time to get down to brass tacks.

• Let's bring up our handy-dandy “Tools” (Window - Tools). Hold down left click over the “Rectangle Tool” to bring up more options.
• Once they fly out, select the “Rounded Rectangle Tool.” Once you have that, simply double click anywhere in the document. A new options box should appear with a few options to modify.
• Enter 512px by 512px and set the “Corner Radius” to 90px and then click “OK”.
• Bring up the “Selection Tool” (V) and click on the de-cornered square. Give it a fill by double clicking the square icon in the bottom left of the “Tools” palette.

QUICK TIP: The iPhone and iPad screens have black backgrounds, so it's wise to make your icon background stand out somehow. If black is your weapon of choice, you still want to make sure it has a subtle gradient or some type of border so the icon doesn’t get lost in the fray.

• Illustrator tosses in that new rounded square wherever it feels the need, which is unacceptable. Select the new edgeless square with the selection tool (V) and bring up the “Align” tool (Window - Align).
• The 1st thing you want to do here is choose “Align To Artboard” by clicking on the icon in the bottom right.
• Choose “Horizontal Align Left” and “Vertical Align Top”, which will move your rogue corner-less friend perfectly into your canvas area.
• Since we have got the hang of cutting corners, we might as well move onto making our circular icon in step 3. (Yeah, that segue just happened.)

Step 3: Circle, in a square, in a phone (Optional Step)

Not even going to try making a clever lead-in here. We are too far into the mix to joke around.

• Make your way back to the “Tools” panel and bring up the “Ellipse Tool” (L).
• Double-click like you did before and bring up another helpful option box. I am not going to go into detail about how the circle in the example was made since our main goal is to get the proper dimensions and layout for the app. (But if you really must know, the circle is 420px by 400px.)
• The newly created circle will need a fill and the one in the example has a gradient fill applied to it. We can achieve that by selecting the circle and bringing up the “Gradient” panel (Window - Gradient).
• Colors can be added and subtracted from the gradient slider by dragging and dropping colors from the “Swatch” panel. Click on the small arrow in the upper right corner of the “Gradient” panel to reveal more options.
• Choose “Gradient Type” and select “Radial”.

QUICK TIP: Using a darker red on the outside will give the illusion of a spherical shape.

Now that you have presumably created a sphere with design magic, try your wand out on some scribbly effects. (The segues just keep on comin'!)

Step 4: Adding a dash of scribble (Optional Step)

So you have a Facebook app you say? Alright then, let's give it some personalization.

• Head on over to www.brandsoftheworld.com and search “facebook”. Go ahead and download one of those great free vector art versions of the logo. I'll wait. It will save you some time by not having to recreate it yourself.
• Open that bad boy up and grab the Facebook “f” by double-clicking into the vector art file and cutting the letter out (⌘ + X). You can paste it back into our document (command + v) and move it to a nice location within the sphere.
• Select the “f” and choose “Effect - Stylize - Scribble”. Another nice box pops up for us to tinker with. The “Line Options” will vary depending on the size of the image so it is best to use the scribble on a case-by-case basis and not just use the same settings every time. The screen grab below shows the settings used in the example.

QUICK TIP: If you ever need to adjust the scribble, you can easily bring up the controls for the object you want to tweak by choosing “Window - Appearance” and then click on the “FX” portion.

Your Facebook “f” should now have its own unique look and you can go to bed comfortable tonight. Or can you? There is still the matter of saving this thing for the iPhone and iPad, and batching it for multiple sizes. Looks like we have one more step before we can all rest easy.

Step 5: A batch of icons (pun intended)

With our icon in its finished state we are ready to output this for the iPhone and iPad.

• “File - Save for Web” will get the job done for us. With the “Save for Web” option box, select .png for the output setting. Save this puppy to your folder of choice. (I recommend putting it in a folder with its dimensions and call the icon “facebook”.)

Formatting sizes

Let's assume you have a dozen or so of these nice large images for the iTunes Store but you need to get them ready to take on different format sizes. Setting up different batches in Photoshop is the easiest way to accomplish this.

(We’ll set one up at 72px by 72px for this example but other iPhone and iPad sizes include 57px by 57px and 48px by 48px.)

• Open up the iPhone app you just finished in Photoshop and start the process. (We are going to make a set of Actions for the icons to follow so that when we want to size images in the future Photoshop will do it on the fly for you.)
• By choosing “Window - Actions” you can get access to the proper area. Clicking on the folder “Create new set” will make a new folder you should name “iphone.” Within that folder, choose “Create a new layer” in the same location and call it “72x72.”

With the new layer selected, the magic can once again unfold in real-time.

• Click on the “Begin Recording” icon (looks like a red button) and choose “Image - Image Size”.
• In the new option box, set the width and height to 72px by 72px. (Everything you are doing right now is being recorded by Photoshop and will continue to be until we manually stop it.)
• The last step we need to take is to actually save this image by choosing “File + Save for Web” and saving it once again as a .png called “facebook” but to a new folder called 72x72. Same name, same attitude, new location.
• Now stop the recorder by clicking the “Stop Recording” button to the left of the “Record” button.

Your formatting is complete and you can batch the whole series of icons in a matter of seconds at 72px by 72px.

• Choose “File – Automate – Batch” to bring up the options box. Under “Set”, pick the action we created “72x72”.
• Under the “Source” folder search for the folder you created earlier with the 512x512 version of the icon.
• Under the “Destination” folder click “Choose” and point it to a new folder called 72x72. Make sure “Override Action ‘Save As’ Commands” is checked and then click “OK” to start the batch process.

Now let Photoshop do its thing while you go grab a soda. That's all there is to it! Just repeat the last few “Action” steps to setup batches for the other two folder dimensions and your icons are complete.

A few things to note

Drop shadows and gloss:

• Apple automatically adds a shadow underneath all icon apps so there is no need to create one.
• The iPhone and iPad also add a top gloss to the icons so make sure to keep the top of your apps gloss-free unless you really want those things to shine.
• You can get an idea of what the icon will look like once the gloss has been added by quickly drawing a white oval (command + L) over the top portion of your icon and setting the transparency (Window + Transparency) on the oval to around 30%.

Now that we’ve rounded corners, scribbled letters and batched images, I think we can walk away from this tutorial unscathed. In the future, I will give tips on how to tackle home page concepts for clients. Will the post focus on television or sports analogies to get the point across? Tune in to find out.