Designing iPhone Icons + Free Template
In the past few weeks, twice I’ve had to design the icons that go along with apps/bookmarks in the iOS world. These tiny little buggers come in seven different sizes and are used for different devices (iPad, iPhone, iPhone4) and different instances (home screen, settings, spotlight, iTunes store). It’s pretty confusing figuring out which corresponds to which…and this doesn’t even begin the challenge of designing at sizes as small as 29 pixels square.
There are things that unless someone tells you, how would you know? Like the retina display on the iPhone 4 has twice the pixels as the older models and can handle much more detail design-wise. Or that the final icons don’t need rounded corners since Apple puts them in and should be cropped without them. Or that the gloss effect can be applied through code or in the image itself. From my coworkers, I’ve basically gotten a crash course in iOS icon design.
There are a lot of free Photoshop templates out there but they seem to have either too many layers, no explanation of which size is for what purpose, aren’t pixel perfect or don’t make it easy to crop out the different sizes. After my own frustration, and by bastardizing a few free templates I found, I give you my own free iOS Icon Photoshop Template pictured above. It has:
- all the sizes grouped separately
- the sizes labeled in both the layers palette and in text
- only 2 pixel-perfect shape layers for each size; one for glow and one for the background
- slices for each size, named by size_useage
- a file size under 500KB
Feel free to download and use for free 
Back to Top
August 2nd, 2011 at 5:48 pm
Nice job, Jen. I share your frustrations. This is really useful.
August 2nd, 2011 at 7:02 pm
Nice work Jennifer!
August 24th, 2011 at 7:42 am
Nice work. Can you do one without rounded edges as well please?
August 24th, 2011 at 10:02 pm
Thanks guys!.
@Simon, all you need to do is disable the shape mask on the rounded-corner shape layer and, because of the slices, you’ll have the un-rounded version when you save.
August 30th, 2011 at 8:06 am
Thank you so much!!!
December 9th, 2011 at 2:52 am
Thanks for this ^^
December 9th, 2011 at 2:53 am
Great Work i look for this more time Thank you