This is an App Icon Template that, through Smart Objects in Photoshop, attempts to automate the process of rendering the various sizes that needs to be bundled with iOS Apps. The idea is to edit the largest size and have the smaller sizes automatically rendered enabling a much quicker workflow when designing icons. You’ll also find a selection of ready-made textures that you can build on and easy export actions that spit out the exact files you need to deliver to Apple.
How to use this template
In the 512px folder you’ll see a smart object with the educational title ‘EDIT THIS SMART OBJECT’. Go right ahead and do that.
Automation
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.
Textures
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.
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
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.