Some time back we posted an article on using OS X Automator to quickly create iOS application icons in all of the various sizes required for the lineup of iPhones and iPads. How time flies and how quickly Apple is able to render the provided automator script out of date. We need to work on that.
Before we get to that though, let’s take a look at the new icon sizes required for Apple Watch applications! To successfully deliver an Apple Watch you’ll need to provide icons into your watch target (not the extension!) Images.xcassets for the following sizes.
For the 38mm-sized watch you will need:
- 14.5@2x for the Watch Notification Center screen
- 40pt@2x for the Watch App Launcher
- 86pt@2x for the Watch Quick Look screen
For the 42mm-sized watch you will need:
- 18pt@2x for the Watch Notification Center screen
- 44pt@2x for the Watch App Launcher
- 98pt@2x for the Watch Quick Look screen
In additional the iOS Settings page will contain an Apple Watch Companion icon which must be 29pt@2x for iPhone 5/5S/6 and 29pt@3x for the iPhone 6 Plus.
The upshot is you have to have 8 different icon sizes to support the Apple Watch! Creating all of these can be a headache if it isn’t done in an automated fashion, so here’s our take on it.
Download the CreateAppleWatchIcons.zip file to your Mac. It should automatically decompress into an Automator workflow document named CreateAppleWatchIcons. Double-click on the workflow and at the prompt select Install or if you are interested in seeing the workflow steps open it in Automator.
Once the installation is complete you’ll see the following dialog. Click Done.
Now, let’s create our Apple Watch icons! I like to start off with a 1024×1024 PNG of my application icon (when you go to put your app on the AppStore you’ll be asked for a 1024×1024 image anyway so you might as well have a copy). Put a copy of the original icon in a folder named something like MyAppAppleWatchIcons like this:
Then, right-click on your “source” icon (the 1024×1024 one) and at the bottom of the right-click menu find Services and select the newly installed CreateAppleWatchIcons menu item. Watch the automator script do its magic. It makes a copy of your original icon and then begins generating all of the required Apple Watch icons. You can then drag and drop them into your Images.xcassets folder of your watch target. Below is an example of the icons generated but not yet placed into Images.xcassets:
And what Xcode looks like when you’ve added your icons to your project:
Our tutorials have not yet been updated to make use of Apple Watch notification or glance controllers, so we haven’t yet seen our icons in action, but when we do you can bet we’ll use this workflow!