Asset Catalogs are the key component in Xcode project for storing colors,
sprites, metadata, and of course graphics and managing those graphics can be a
challenge. Today we are going to talk about using app icon templates in Sketch
and Photoshop.

Using App Icon Templates

App Icon templates offer a simple and predictable way to create your assets
while using graphics applications designers are familiar with. We are going to
look at the top two graphic editors: Sketch and Photoshop.

Sketch

In the last few years, Sketch has grown to be one of the leading applications
used by graphic designers especially in the area of mobile application
development. Luckily they already supply an app icon template to use.

1. Run your Sketch Application and the launching dialog should appear showing various templates built into Sketch.
2. Select the iOS App Icon template. Now, you should see the template with various sizes of the app icon.
3. Go ahead and edit the largest icon. As you edit the large icon, you changes should be reflected in your other app icon sizes.
4. When completed, go to the top menu and select Export. In the Export dialog, select all the sizes you wish to export and then choose the folder you wish to export to.

If you go to that folder, you should see all your icon sizes. From there you can
drag the files into your Asset catalog App Icon slots.

Sketch offers a very simple way to export the set of graphics. Obviously, each time an edit needs to be made, Sketch will need to be accessed and the multiple files will need to be updated in the repo.

Photoshop

Photoshop has been a well-established graphics editor for over two decades.
However, it isn’t quite as targeted toward application development as Sketch so
it isn’t geared as much towards that purpose.

Kindly enough Apple offers us UI templates and widget for Photoshop (as well as
constantly updated for Sketch) through their Apple Design Resources
page.

1. Go to the Apple Design Resources page and download the template for the OS you will be building for. In this case, we will be using the iOS 12 version. Please note — these downloads are quite large so make sure to do this ahead of time.
2. Unzip the template collection, go to the Production Templates folder. We’ll be using the standard Template-AppIcons-iOS.psd file. Open that PSD file, opening Photoshop.
3. Make sure we are generating image assets on save. Go to File…Generate…Image Assets and make sure it is checked.
4. Go to your layers window and double-click the layer named icon. This is the layer you will be editing directly and will be carried through to the other app icon sizes.
5. Go to the folder containing the PSD file you have opened. You should see a folder with the same name but including the suffix -assets. In there you should see all the icon sizes exported from the template.

Photoshop is the more established application but also less focused on UI and
App Icon development. The templates can be quite large and even more cumbersome
to open each time and edit can be made.

Ideally, we’d like to simply edit one file which can be included in our repo and
automatically generated on the build. That’s where building a bash script to run on the build would be helpful.

Originally Posted at https://learningswift.brightdigit.com/app-icon-templates-graphics-xcode/