A Tutorial With Sketch 3 and AEIconizer

Making an app icon is not difficult to do. In this short tutorial, I’ll show you how you can make your own App icon using Sketch 3.

I recommend Sketch 3 because the price is reasonable, it is receiving very favourable reviews, and I’ve found it easy to use. There are also a large number of Sketch plugins available and the list is growing everyday. We’ll use one in particular, AEIconizer, to make creation of the iOS app icon seem quite trivial.

Update: As of March 2016, the newer Sketch App Icon Template seems incompatible with AEIconizer. I’m using an older template until this issue is resolved. I’ve added it to GitHub here should you wish to use it. If you’ve had success with the newest Sketch App Icon template, it would be great if you could leave a comment about it. Sorry for any confusion and if I see that the Sketch template and AEIconizer are compatible again, I’ll update here accordingly.

Here is the link to obtain a free Sketch 3 trial. Once I first tried it, my decision to purchase was an easy one and I’m really enjoying it.

Let’s pretend we have a Beautiful new app so we want a nice B as the icon. Open Sketch and select File > New From Template > iOS App Icon. If you use the template I’ve added to Github, just open it versus using the New From Template.

You’ll see the nice template with all the iOS app icon sizes. The best thing is that you only have to design it on one, so choose the biggest one, App icon for the App Store. After we design the icon, we’ll obtain an excellent plugin, AEIconizer, that will generate all the other sizes from this one icon!

Click on Insert > Text, and enter a B. With the B selected, change the font size on the right panel to 600 and center the B.

Note: In the steps below, if you have grabbed the template I’ve put in GitHub, you can substitute ITunesArtwork@2x in the steps below with Icon-Original (ie. create your master icon with Icon-Original)

In the left panel, click on Icon Shape under ITunesArtwork@2x to select the icon. Now in the right panel, click Fills and in the popup dialog, select the second square, Linear Gradient. In the canvas, you’ll see two selection indicators stretching from top to bottom of the icon. Here is what the icon should look like now before applying colors.

Let’s have a gradient go from blue at the top, to red at the bottom. Select the first color stop circle at the top, then click the bottom color bar to establish the color range you want to choose from.

In the above screenshot, you would click on the bar blue area to choose from blue colors for gradient start. Now click on the second color stop indicator at the bottom, and pick a shade of red so we have a nice transition from blue to red. Here is what mine looks like now.

Let’s make the B stand out better. Click on it and change the color to white.

For the purpose of illustrating the steps in making an icon, we’ll leave the drawing part as it is, and move on. Now we need the AEIconizer plugin to reproduce the icon for all the other sizes. You can find it here.

When you download the plugin, open the zip file and drag the AEIconizer.sketchplugin into the plugins folder of Sketch. Where is that folder? In Sketch, just click on Plugins > Reveal Plugins Folder, and that is the folder where you drag the plugin. If you need it, here is a brief introduction on Sketch plugins.

With the plugin in place, you should see it under the Plugins menu right away.

Now the fun part. In the left pane, select iTunesArtwork@2x. Now select Plugins > AEIconizer and the magic happens! You’ll see all the icons generated, and the original is still as it was so you can delete the generated icons and redo it as you need to. Here is what mine looks like.

The final step is to export the shiny new app icons. On the right hand side window, at the bottom select Export Artboards and then choose the directory where you want to export them to. Here are all the exported icons which can now be used in xCode.

I hope you’ve enjoyed making an app icon!