Introduction to Icon Slate

One of the most valuable utilities in my icon design workflow is a little app called Icon Slate. I found it when doing my first icon design job a few years ago and I've been using it ever since. It's allowed me to streamline the more tedious aspects of icon design, like formatting and file names required by various platforms.

Icon Slate makes it easy to take your raw artwork and prepare it for shipping off to clients, no matter what platforms they're developing for. It can pack up .icns files for OS X applications, .ico files for Windows applications, or properly named graphics files for iOS and Android, with full support for Retina and other high resolution displays.

This tutorial will take you through turning artwork I created in Sketch into a set of PNG files ready to be used by a developer for an iOS app. If you'd like to follow along, you'll need a copy of Icon Slate (Mac only!), which you can purchase here, and some of your own artwork at 1024x1024 pixels or you can download my artwork if you'd like.  

Creating a Document

Creating a new document in Icon Slate starts like any other Mac application, so open up Icon Slate and go to 'File > New Project'. You'll be presented with a window with a lot of options that might seem overwhelming at first. 

For right now we only have to worry about one thing, and that's the list item labelled iOS. Make sure that is the only item checked off (check it off first and then uncheck the other items, the UI forces you to have at least 1 item checked). 

Now that we have the template we're working with selected, click the 'New Project' button in the bottom right corner. Now we're off!

The Project Window

Once you've created your project, you'll be presented with the project window. There's a lot going on here, but we're not going to worry about most of it right now. We only really have to look at two things for the moment. First is the area with the white boxes that takes up most of the window, this is where we drop our artwork and preview how it will look at different sizes. Second, the section of the toolbar labeled 'Displayed Sizes', which you can use to toggle between standard and retina sizes. 

Before we do anything else, we're going to save our project. Go to 'File > Save...', and save the file to your desktop with the name 'Tutorial'

Importing Artwork

Bringing your artwork into Icon Slate is pretty simple; navigate to your artwork in the Finder, and drag-n-drop it into the largest box. The smaller boxes will then be autofilled. Ideally you'd have separate PNGs of your artwork specifically tailored to each size, but for the purposes of this tutorial we're just working with a single graphic.

But we're not done yet! Go to the toolbar and click on the button that says '2x'. You'll see all your artwork vanish, but don't worry it's still under the '1x' button. Whereas '1x' was the regular resolution files, '2x' is what's formatted for Retina displays. Repeat the same process here, and click the '3x'.

'3x' size is currently only in use by the iPhone 6 Plus and 6S Plus, and a such you'll notice a smaller selection of icon sizes. Repeat the drag-n-drop process once more, and we have now imported our artwork and can now get exported. 

"Build" Your Icons

Going back to the toolbar, in the top left you'll see a button that looks like a 'play' button labelled 'Build'. This was greyed out when we first created our project, but now that our artwork is in place it's active and able to be clicked.

Before we do that though we have to name our icon. Double-click the text that says 'New Icon' at the top of your main project view, and type in a name. In my case I'm naming it 'Scheduled', but if you're using your own artwork name it something relevant. This will determine the naming on the files we end up exporting.

So now our artwork is in place, and our icon is named, go ahead and click the 'Build' button. You'll be presented with a save dialog box, navigate it to your desktop and hit save. You'll find a folder with the name you gave your icon, open it and you'll see 13 PNGs all appropriately named and formatted for use by a developer.