Auto-Generate App Icons in Photoshop

If you design a lot of iOS apps, it can be time consuming to export your app icon into all the different sizes that Apple requires. Many are using a template for this, but that forces you to download a new template every time Apple changes the icon sizes, which can be often (e.g. iPad Pro). This tutorial will show you a future-proof method of generating all your icon sizes without a template or slices, by simply modifying your original psd slightly. You will need Photoshop CC 14.1 or later, which includes Adobe Generator, a powerful built-in feature to automatically export image assets in multiple sizes. No more slicing graphics or using \'save for web\' multiple times. Just rename your layer using a special naming convention and Photoshop will not only export your pngs, but will also keep them in sync with your .psd. It only takes a few minutes. If you have any questions, please post them in the \'Tutorial Forum\' tab below.

Open the .psd of your original icon artwork. If you haven’t designed your app icon yet, you can download the starter template and follow along:http://cityos.io/static/monika/app-icon-template-starter.psd.zip
A standard app icon design template usually contains 2 items: an overlay of the ‘golden ratio’ grid and a mask to round the corners of the icon to 90°.

The template is 1024pt x 1024pt @144PPI (@2x=2048px x 2048px), but this method works with any size, granted that layers contain only scalable vectors, smart objects, and effects. As a best practice, icons shouldn’t be designed with bitmaps.

First we want to hide all the layers that we don’t want to export. This isn’t actually necessary, as Photoshop will only export layers named in a specific manner, but it’s cleaner visually. For designers who use the golden ratio grid guide layer to design their app icon, just hide the layer by clicking the eye icon to the left of the layer thumbnail. If you don’t use the grid, just skip this step.

To visualize the final rendered icon, it’s also common practice for designers to apply a rounded corner layer mask or clipping mask to their icon . However, you must remove the rounded corners from your artwork because Apple or Xcode will apply them automatically. Be sure to disable the layer or clipping mask to hide the rounded corners.

Since your icon artwork can consist of multiple layers with effects etc, it is a good practice to convert your artwork to a smart object. This step is optional but makes it cleaner to work with and ‘locks’ the design from any unintentional edits. Group your artwork layers into a folder, then select the folder and: Right Click > Convert to Smart Object

Now for the magic. Photoshop will export any layers and folders that are named with a special format that indicates the file sizes, types, and names, etc. All we have to do is rename our layer.

Copy the text below, then paste it into the name field of your artwork layer:29x29 ios/ico_29.png,40x40 ios/ico_40.png,58x58 ios/ico_58.png,76x76 ios/ico_76.png,80x80 ios/ico_80.png,87x87 ios/ico_87.png,120x120 ios/ico_120.png,152x152 ios/icon_152.png,167x167 ios/ico_167.png,180x180 ios/ico_180.png,1024x1024 ios/ico_1024.png

Those are the icon sizes for iOS 7+. If supporting iOS 6.1 or earlier, you’ll need to group everything in another folder and rename it:50x50 ios/ico_50.png,57x57 ios/ico_57.png,72x72 ios/ico_72.png,100x100 ios/ico_100.png,114x114 ios/icon_114.png,144x144 ios/ico_144.png,512x512 ios/ico_512.png

To finish creating the remaining web clip icons, we need to repeat the same grouping process twice due to the character limitation. Select both the folder and the artwork layer, then right click and select ‘Group from Layers…’.

Now paste the following text into the Name field:120x120 web/apple-touch-icon-120x120-precomposed.png,152x152 web/apple-touch-icon-152x152-precomposed.png,167x167 web/apple-touch-icon-167x167-precomposed.png,180x180 web/ apple-touch-icon-180x180-precomposed.png

Navigate to the folder where your .psd is saved, and there should be a folder name [psdfilename] _assets with 2 subfolders:ios: these are the icons for your app and the App Storeweb: these belong in the head of your app’s website. If you don’t know how to do that, please refer to: http://apple.co/1OBFUre

Troubleshooting:
If the assets folder is missing, repeat Step 8 above.
If the assets are incorrectly exported, delete the assets folder, verify that the layer or folder is name correctly, and repeat Step 8 above.
Restarting Photoshop also helps clear up issues, as the Generator can sometimes be buggy.

If you change your artwork, Photoshop will automatically generate new assets in the assets folder to sync with your .psd document. This feature is tremendously convenient.

Also, since Apple is constantly updating their icon sizes, you can easily add new sizes by changing the layer name. Just follow this naming convention:[dimensions in pixels] [foldername]/[filename.extension]
example: 100x100 ios/ico_100.png

Although Android uses a different grid and style for its launcher icons, if you want to repurpose your iOS icon for Android, enable the rounded corner mask and group everything into a new folder named:
48x48 droid/ico_48.png,72x72 droid/ico_72.png,96x96 droid/ico_96.png,144x144 droid/ico_144.png,192x192 droid/ico_192.png,512x512 droid/ico_512.png

Whenever you reach the max 255 character limit, just keep making new folders. Hopefully Adobe will remove this limit in a later release.

Full info on customizing assets use the Generator:https://helpx.adobe.com/photoshop/using/generate-assets-layers.html