Automatically create all your iOS 9 and OS X Icons

When you create your new app on iOS app in XCode you will be faced with 20 empty boxes to fill in, and that's before you log in to iTunes Connect and are asked for just one more... Oh... and you probably want one for your web-site too that has the the right mask applied. 

If you are creating a sister app on MacOS you'll need to add another 11 to that number... and you probably want them to be consistent but different (Mac icons will want to have their mask pre-applied too). 

This kind of task is one of the major reasons I created DrawDown. Although I use the interactive Mac App in this article, the resultant script can be used with the free command line version, it's just nice to be able to see the output next to the script. 

Getting Ready

We are going to need a few assets for our icon, so I've just organised my DrawDown and the assets it uses into a folder. By default the search path is the directory the script is in, so this saves a little bit of set-up and also makes it a bit more portable. All of these resources are available here.

Laying the Foundations

I want a consistent icon across all platforms, so the first thing I want to do is get the base unmasked icon in place before I create all the variants and sizes I want. 

My BaseIcon frame is made up for the greyscale gradient I prepared (all of these images are available in the resources I've made available at the bottom of the page in case you'd find it useful) which I've tinted blue. I've then drawn the logo of my app over the top.

So far so good, but I'd like to see how it will look as an iOS icon before I go any further, and I'll want to use that icon on the web-page for the app too. Square edges are so square. 

My new iOSPreview frame takes the BaseIcon and masks it with the iOS icon mask. It looks OK, but the logo is a little big, so I let's just resize the the logo on the base icon... This is the beauty of DrawDown, I just tweak the logo size in place and everything else will update. 

OK, I want my Mac Icon too look a little different. Circles are very popular for MacOS icons now so I'm going to create my Mac icon as one

This one is more complex, but it really shows how you can take advantage of a few images to build something that is professional and consistent. I want a border for my icon so I bring in the circle in the first layer, then I add another layer which is the base icon... a bit smaller (so the border shows) but masked by the circle. Finally I flatten and make sure the icon is exactly the right size. 

Downhill Slope

All of the handwork is done now, I just need to create all the different sizes we need. It's pretty repetitive so I'm going to do it in a single step here, you have the full script in the resources so you can see them all (fingers cross you never need to!)

All that's required now is to build the images (I'm using the app here, but you can just use the command line tool if you want)

And that's it they are all ready to use, and you can just drag them into the right place in XCode and iTunes Connect and you are away. 

Doing it Yourself

You can download all the resources used for this post here and drawdown is available as both a free command line tool and an interactive editor.