If you’re in a hurry, just grab this icon template, follow the instructions, and enjoy nothing short of perfect icons from now on. If you wanna know more, read on, and I’ll show you just how deep the rabbit hole goes…
A bit of backstory
Yesterday we wrapped up the design of an app icon for one of our clients. I can’t yet share too much about the app, but here’s how the icon looks:
Design being done, the next step was to resize the icon artwork to all of the formats required for publishing the app on the App Store. Easy peasy, let’s just use one of the hundreds of handy Photoshop templates designers created for this purpose. This article is not gonna name any names but I chose a very popular template, and about 5 clicks later I had all of the formats neatly named and sorted in a folder on my desktop. Job well done, it seemed. But after a quick glance at the exported icons, I realized something was off. The icon’s design seemed a bit off.
Taking a closer look, I realized the template had created image artifacts resembling strokes and shadows where there were none. I tried a couple of other templates, only to encounter even more issues. Some of the templates created a semi-transparent 1px outline around the artwork, which can prevent you from submitting the app to the App Store and some even exported the icons with the wrong color profile.
Problems related to transparency and artifacts can be traced back to Photoshop’s Smart Object resizing algorithm. Almost all of the templates use Smart Objects in one way or another, and by default Photoshop reduces their size using the fancy Bicubic Sharper or Bicubic Smooth algorithms. The thing is, Bicubic was created for resizing photos, and it did a good job during the skeumorphic design era because, well, skeumorphic kinda looks like photos with all of the shadows and textures. But since then, design has become flatter and cleaner. Textures and shadows have been replaced by lines and shapes. So, what should designers do? Wait for Adobe to create a new Smart Object resize algorithm? No need, it seems, and here’s why. In the early days of computer graphics there was no photo editing, nor a Bicubic algorithm, but there was simple geometrical graphic design, not unlike the flat era of today, and there was something else – a trusty olden Bilinear resize algorithm. Now, some may say that it doesn’t perform as well with curves and circles when performing smaller changes in size, and they are right. But the thing is, after the original 1024×1024 pixel artwork, the next largest format required for the App Store is 180×180. Thats about a sixfold decrease in size, and more than enough to hide any imperfections. The icon we needed to export is nothing but circles, but it came out perfect.
As for problems related to incorrect color profiles, that’s just sloppy Photoshop work.
So, whats the solution
You could resize, export and name all of the formats manually and that would work fine. Some even advise creating a completely different design for each format, and I can’t really argue with that. Kudos for those people, they are really meticulous in their work. What has proven to be most effective for us is usually creating just one design, and in some special scenarios a second one to cover the extra small icon sizes.
Alternatively you can use some of these online solutions. We haven’t found the perfect one – some of them are only free for a couple of uses, some have outdated formats, some are difficult to use and with most of them you still need to do some kind of manual selecting and sorting of the icons you need at the end. Not to mention that they all require an online connection and that they take you out of Photoshop and your design environment. Out of necessity for a streamlined solution, here at 12Rockets we’ve created a Photoshop action with an accompanying PSD template that takes care of all of the exporting headaches and creates crisp and accurate app icons across all formats. Feel free to grab it and use it however you wish.