Photoshop Tutorial: iPhone and iPod Touch Icons

Professional Icons

Everybody has heard about the iPhone, the phone that shook the world of mobile phones. The iPod Touch is the same device, but without the phone. These devices have an interface consisting largely of icons arrayed on panels, and a dock. Both default icons for applications and themed icons are a necessity. This tutorial covers the methods and theories behind the icon making process. It will also teach you to incorporate standard graphics design methods into your icons.

Be sure to check the attached images for an example of parts of the icon, some finished products, and an example of an icon set.

Step 1 – Basics.

We’re going to need a slate on which to create our icon!

– Create a new document in Photoshop, size 60x60px with a transparent background.
– Make a new layer, and select all (Ctrl+A).
– In order to achieve the standard rounded edges of an iPhone/iPod icon, press Select->Smooth, and use 5px.

Step 2 – Wallpaper the icon.

This is the back part of the icon, behind the symbol. This is typically what defines a theme, and stays the same throughout one (save perhaps for color).

– If you’ve deselected the layer, reselect its contents (Ctrl+Click on the layer preview on the left of the layer in the layers panel).
– Create the background of the icon, keeping the area you’re working in selected the whole time. The typical icon has a subtle gradient here (I use a three-color gradient that goes from one color to a lighter version, and back), but you can use any steps to make the icon. You can even act as though you are making a desktop wallpaper, with good results!
– If you’ve got a complex background, you may wish to darken, or lighten it a bit, in order to make a contrast with the rest of the icon. If you plan to have black text/symbol, lighten it, and vice versa.

Step 3 – Symbolism.

This part of the process defines what the icon is for. From a simple text to the most detailed image, all of these are symbols. The symbol of the icon should convey what the icon is for, whether it be a web browser, a picture viewer, what have you.

– Design your symbol – this can be a photo, a cutout from a photo, a mono color design made on the spot, or anything else you can imagine. The size of the symbol should leave at least 5-10px of padding space on every side of it.
– Position the symbol, either in the middle or one of the corners of the icon. To match most themes, including the default one, you’ll want it in the middle.

Step 4 – Reflection.

We’re going to create a professional reflectivity effect, to make the icon look crystallize, or glassy.

– Create a new layer (Ctrl+Shift+N).
– Select your icon background area again, on the first layer we made. This is done with a Ctrl+Click on the layer preview on the left of the layer in the layers panel.
– Fill the selection with white.
– Set the opacity to something between 5 and 50%, this is highly subjective and depends on the background. For the standard-style icons, I typically use 10%.
– Erase the layer to suit your needs. Almost no matter what you do, this will look good. Guidelines are to keep a solid chunk of the layer remaining, at the top of the layer. A good method is to use shape selections to delete the majority of the reflection layer. See below for the default-style reflection.

In order to create a reflection of the standard icon style (see the images for an example), follow these steps:

– Deselect anything you’ve got selected (Ctrl+D) and make sure you’re on the reflection layer.
– Choose the circle selection tool, in normal mode.
– Click and drag until the circle is very wide, and taller than you want the reflection to be (it helps to look at a completed icon while doing this, in order to mimic the angle of the curve and the positioning of the reflection).
– Position the circle so that it’s center lines up with the center of the icon.
– Invert the selection (Ctrl+Shift+I).
– Hit delete.

Step 5 – Templates and Glory.

Save the icon files and revel in your now-evident icon-creation skills.

– Save the PSD file. Most of you would do this anyway, but it’s especially important with icons. This way if you’d like to make matching icons, you can simply re-open this and replace the symbol layer(s).
– Save the icon as a PNG file. I use the File->Save As dialog, as it doesn’t do unnecessary compression (this image isn’t for the web).
– Enjoy the icon you made – post it on forums, use it on your iPhone/iPod, etc. People will appreciate icons posted for public use! If you especially enjoy making them, try making an icon request thread for ideas.
– Become an internet-renowned icon designer!