After more than 10k downloads of my old app icon template and countless of requests for an update, i’ve put together an app icon template that should make your icon endeavors on the iOS platform easier.
Notice: My App Icon Template has been updated since i wrote this article. Most of what’s described here is still relevant for the new template, but you could also just go right ahead and read about that here.
More than a year ago i posted an article called ‘iPhone app icon design: best practices” in which i supplied a very basic app template with a handful of textures for 57×57 pixel icons. Seeing that resource being downloaded more than 10k times and receiving a lot of mail from people asking me to update the resource urged me to create a new, updated template.
Why another resource?
There’s already a couple of great app icon resources out there, so to justify a new resource i felt that it needed some additions. This has steered the development of my own template, which i’ve used and refined over the past month. I’m happy to finally release this template for public use, royalty free in any project you like, personal or commercial.
How to use this template
Let me give you a walkthrough of the template, and in the same breath show you how it differs from existing resources.
You can download the template here. When you open the template you’ll see an overview of the different sizes we’re aiming to create, it should look something like the picture at the beginning of this post.
Now in your layers window, in the 512px folder you’ll see a smart object with the educational title ‘EDIT THIS SMART OBJECT’. Go right ahead and do that.
See, one of the interesting ideas here is to use smart objects to automate the generation of all the icon sizes, theoretically making it possible only to create the largest icon size and see all other sizes scaled and adjusted. Now obviously this doesn’t give you the pixel perfection that we’re always looking for in the smaller sizes, but it does give you a way to quickly see how well a concept would work when scaled across the various sizes.
When we edit the above smart object we’ll get to the core of this template, the icon.pbs file. It should look something like this.
Everything is set up for you to create your icon in this single 512×512 file. Enabling the top most layer (titled ‘HIDE ME WHEN DONE’) will show you an overlay, estimating the rounded corners Apple will apply. But perhaps more interesting is the folders beneath, which brings us to the next feature of the template.
I think what made my previous app template popular, was the ready made textures bundled with the resource. So obviously an update to that template should include some textures that you can build off, get inspiration from or straight up just use.
As you can see above I’ve included a handful of textures that you can immediately apply to your icon. These are all 100% vector, feel free to use them in your project or alter them in any way.
All sizes in just a second
As soon as you hit save on your smart object and return to the template psd, you’ll see that all the sizes have been updated with your new icon, like this.
I can’t stress enough how much of an estimation this is and how important it can be to actually go in and custom create the smaller sizes. In this template i’ve tried to take as many precautions and apply subtle effects to give you, at least some sharpening and detailing applied automatically. This includes darker borders and a different treatment of all the icons that will be displayed in spotlight or settings (as they will be presented on lighter backgrounds on the device)
If your icon has several straight lines or sharp contrast you might experience half (blurry) pixels when it’s automatically scaled down. In these cases it’s impossible to automate and you’ll have to get out your pixel tools and manually correct it. After you’re done, this template has one last trick up it’s sleeve.
Exporting made easy
Bundled with the template comes 2 photoshop actions that’ll make exporting your icons a breeze.
Import these actions into photoshop and use them with the template, they’ll spit out all the files you need, both in Squared (no transparency, how apple wants them delivered) and in rounded versions (for other design uses). The files are automatically named after the Apple HIG so they’ll be good to deliver instantly. Finally a good use for Slices in PS!
Making better icons
I hope that this template will help strike another blow agains bad icons in the app store. Automation of icon sizes, bundled textures and a nifty export script puts it apart from other templates and arms the designer with a couple of tricks that will make drafting ideas faster.
NOTICE: This template has been updated!
Download the new version 2.0 from appicontemplate.com. Most of this article is still relevant, just know that the new template is based on the same idea but with more awesomeness.
Should you find some errors or have any ideas for improvement please shoot me an email.
Have fun creating icons.