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.

Step 1

Open Icon File in Photoshop

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°.

show more
Step 2

Hide Grid Layer

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.

Step 3

Disable Rounded Corner Mask

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.

Step 4

Convert to Smart Object

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

Step 5

Generate iPhone and iPad Icons

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

show more
Step 7

Generate Remaining Web Clip Icons

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

Step 8

Generate Image Assets

Go to File > Generate > Image Assets
Photoshop will automatically create app icons based on the names of the layers and folders.

Step 9

Find Generated Assets

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 Store
web: 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

show more
Step 10

Updating Assets

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

show more

Tutorial Forum

There are no posts here yet. Add the first post