Today we’re going to take a look at the different ways of exporting icons using a tool that is often feared, but will take your productivity to another level once you master it. That tool is none other than the Slice Tool, and believe me, if you’ve never used it before, you’ll want to read this article, since I’ll explain all there is to know about it when it comes to exporting icons.
Whether you choose to use a premade icon pack, or start from scratch, today we'll be teaching you some key considerations to think about when exporting your precious assets.
Before we get all technical, I want to take a couple of seconds and explain the reason for writing this particular piece.
So in a previous tutorial, I talked about using Artboards and Layers as methods for exporting our precious icons, but to be honest those methods might slow you down when you have a larger pack. The idea was that I wanted / needed to present a process suited for beginners that would be easy to understand, assuming they knew how to use the most basic of Illustrator’s tools.
Now, while those methods might not have been the best of the best in terms of productivity, they were pretty straightforward to follow and apply, giving you exactly the same result.
Since some of you thought that the process was way too slow and painful, I decided to up my game and show you the fastest way of exporting an icon pack, using a slightly more advanced method.
Well, I might have said advanced, but to be honest, it’s not all that hard once you play around with it a couple of times.
That being said, let’s get back to our main topic and talk a little bit about slices and how Illustrator uses them.
1. What Are “Slices”?
You can think of a “slice” as being a defined section of a piece of artwork that you can create in order to individually export rather than exporting the entire piece.
Initially slices were created for web designers, but as with most of Illustrator’s tools, this one quickly found a new use: exporting icons.
2. How Do “Slices” Work?
It’s quite simple actually. First let’s think of the Artboard as being a piece of paper onto which you lay down your artwork. Now, when you create a “slice” you’re actually delimiting a segment of that paper, by creating a cutout which you can then freely remove from the larger composition.
I like to imagine that the process is similar to that of taking a cutter and slicing the traced margins of that segment, separating it from the piece of paper.
With each created slice, Illustrator assigns a number, starting from the top left corner all the way to the bottom right one. At first you might not care too much about this action, but in time you’ll come to appreciate it, since you’ll have a better understanding of what’s going on with your artwork.
3. How Do You Create “Slices”?
If you’ve never created a slice before, don’t worry because it’s pretty easy to do. There are three ways of creating slices that you should be aware of:
- using the selected object(s)
- using guides
- using the Slice Tool
3.1. Creating Slices Using the Selected Object(s)
This first option is really easy to understand, since it allows you to create slices around the boundaries of one or multiple objects.
So, let’s say that we have a couple of icons, and we want to slice out the first one.
To do that, we will select the icon, and then go to Object > Slice > Make.
This will immediately separate that icon from the rest by creating a delimiting line around it.
Even though we’ve created a slice for just one icon, Illustrator has divided the remaining sections of the Artboard into larger slices, one for each side of the icon’s slice. We have a large one for the top side, a narrower one for the left side, a pretty wide one for the right side, and an even narrower one for the bottom side.
Now, if you take a closer look at your Artboard, you might see that these slices are numbered, in a pretty straightforward way, from the top left corner to the bottom right one. Illustrator assigns numbers to its slices to let you select which of the slices you want to export, and which not. I’ll talk more about this in the exporting process.
Quick tip: As you can see, the created slice boundary has a rectangular form, since Illustrator creates the delimitation by looking at the icon’s total width and height and not its shape. This is pretty understandable since if you were designing a web page, it would be pretty hard to break down your composition using more organic lines, and then put it back together perfectly.
There are a couple of things that you should be aware of when using this method. If you open up the Object > Slice menu, you’ll see that you have the Make option that we’ve previously used and a Create from Selection one a few rows lower down. While the two do the same thing when you have just one object selected, they behave entirely differently when you have multiple objects selected.
The key difference between the two is that with Make you can create slices around each of the selected objects, while with the Create from Selection option you will instruct Illustrator to create slices around the total surface of all the selected objects.
Now, if you were to create a web project (web page), the Create from Selection option would be totally fine to use, but if you’re creating an icon pack, you’ll always want to go with Make since you’ll want to individually export each and every one of your icons.
3.2. Creating Slices Using Guides
Compared to the previous method, the Guides one is more meticulous, since the process requires you to manually add vertical and horizontal guides to each side of the section of the artwork that you want to delimit.
First you have to activate the rulers by pressing Control-R (right click > Show Rulers) and then drag your guides and position them where you want the slice lines to fall. Once you’ve delimited your section using the guides, you can go to Object > Slice > Create from Guides to create the actual slices.
If you take a close look at the way Illustrator added numbers to the slices, you’ll see that once a section is delimited and assigned, it will force the other ones to grab the following number value no matter the size they have. Also, it’s pretty interesting to see that the slices are created around the delimited surface of the objects and not the intersection of the guides.
3.3. Creating Slices Using the Slice Tool
This third method is probably the “top dog” when it comes to accuracy, since it allows you to click and drag in order to create a 100% manual slice selection. To be honest, there will be situations when you’ll want to have more control over your slices, but I don’t find it all that helpful when it comes to slicing a large icon pack since it would take a long time to do it.
But, just in case you ever need to use it, you should know how to do so. First you need to grab the Slice Tool, which is by default located on the left sidebar towards its bottom section, just above the Hand Tool. Once you have the tool selected, you can position yourself over the section of your artwork that you want to delimit, and then simply click and drag to create a selection which will automatically turn into a slice once you release the mouse button.
Compared to a regular selection, the Slice Tool allows you to hold down the Space key in order to move / reposition your selection, which is pretty helpful since sometimes you might find that you’ve started on the wrong foot.
Now, the cool thing about this method is that the slices are instantly created, without the need of going over to the Object > Slice submenu in order to Make or Create a slice from a Selection.
Its only downside that I can think of is that you might not have 100% accuracy until you turn on Pixel Preview mode (View > Pixel Preview or Alt-Control-Y), allowing you to create pixel-perfect selections, which for today’s designers is a must.
4. The Exporting Process
So up to this point I’ve talked about the three different methods that you can use to create slices. Now it’s time to see which method is the best when it comes to exporting our precious little icons.
4.1. Exporting Using the Selected Object(s) Method
Let’s start out with the first method. As you recall, this one relies on using one or multiple objects in order to create the slices.
Now, let’s say that we have the same little icon pack as before, only this time we want to slice and export all of the composing icons, not just one.
Well, normally you would just select all the assets by pressing Control-A and then go to Object > Slice > Make.
Then you would go to File > Save for Web, choose PNG as your desired format, set your Export option to Selected Slices and finally hit Save.
The thing is that at first you might think it all went well, but as soon as you take a look at your icons (more precisely their size), you might find that something went wrong.
That’s because even if you used a custom Grid to size your icons, the assets themselves might not go all the way in terms of width and height, and since you used the icons as the selected objects and not the actual grids, that shouldn’t be a surprise.
The trick is to use the actual grids instead of the icons, and create the slices around them. This way your exported icons will be exactly as you want them.
Now, in my case for example, I’m using a 48 x 48 px grid, but I have an all-around 2 px padding added. Not to mention that my icons are slightly shorter, having a height of just 40 px. That means that if I were to create the slices using the icons themselves and then export them, my icons would be slightly smaller (44 x 40 px), since Illustrator used the Width and Height of my assets instead of my grids (48 x 48 px).
That being said, you should always have a second layer with just your grids and use them to create the slices in order to correctly export your assets.
Now, the cool thing is that once you create the slices and go to File > Save for Web, Illustrator gives you the option to manually select or remove which icons you export. So for example if I decide that I don’t want to select the last icon, I can simply go over it and left-click once while holding down Shift, and thus remove it from my final export.
By default if you select all your icons, and then go about saving them, Illustrator will keep all the slices selected. You can see whether a slice is selected by looking at its delimitation. If the line around your asset is red (all but the first icon), then your object is added to the final selection; if it’s blue and slightly faded then it is not (the first icon).
You can deselect parts of your icon pack by holding down the Shift key and left clicking on them. You might wonder why we use the Shift key. It's because since Illustrator already has all of them selected, you need to keep the key pressed in order to keep the rest of the assets selected, otherwise you will end up with just one icon active.
Now to be honest I don’t see why you would, since once you’ve finished your pack I’m pretty sure you’ll want to export all the assets, not just some, but I thought it would be nice to point that out.
As soon as you hit the Save button, Illustrator will ask you for a location to store your files, giving you the option of naming your assets. This part is a little tricky since the name you assign will be carried over to all of the icons, which is what we wanted, but the assets themselves will carry the number of their slices.
You could just export the files and then rename them, or you can do it directly inside the Save for Web popup by double clicking on each icon selection and giving it the desired name.
No matter the method you choose, you’ll still have to take your time and go through all of them in order to name them properly.
Now, to be honest I find this option to be the best out of the three since it’s super-fast, and it only exports your icons, so no empty Artboard slices that need to be deleted afterwards.
4.2. Exporting Using the Guides Method
As with the previous method, things are pretty straightforward. First you create the slices using the guides (Object > Slice > Create from Guides), and then you go to File > Save for Web.
Here there are a couple of things that you should be aware of. If you leave the Export option set to Selected Slices as we did for the first method, Illustrator will export your icons, but it will also export the empty slices between them. Now, if you don’t have a large set, then you could just deselect those slices, but if you have something larger, then it can prove to be a really painful process.
On the other hand, you could just export the icons and then delete the unwanted slices, but again it might take you some time.
Now if you take into consideration that you have to manually add the guides to each side of your icons, it’s pretty obvious that the first method is more suitable, since it’s hassle-free and a lot faster.
4.3. Exporting Using the Slice Tool Method
If you thought that the Guides method was slow and painful, then this one will put the final nail in your coffin since it will take you ages to finish.
By now you probably know that you have to manually create the slices for each and every one of your icons, and then go directly to File > Save for Web.
Here you will be tempted to use the Selected Slices Export option, but compared to the other two methods, this will only export the last slice from your Artboard. That means you have to use the All Slices option, which of course will export all slices whether they’re filled with icons or just empty space.
Finally you have to go through the entire folder and delete all the unnecessary icons and rename them as you need.
So do I recommend this method at all? No. Then why did I even mention it? Well I like to be as explicit as possible when talking about these sort of tools and methods.
Conclusion
So, at this point, I’m really hoping that you know what slices are, and more importantly how they are made, so that you can take advantage of this tool and make the process of exporting your icons fast and painless.
Now, I usually tend to leave the decision making up to you, but this time, I’ll have to be rough and tell you to go with the first method, the Object(s) one, since it’s pretty obvious that it’s the only way to go.
That being said, I would like to thank you for your time and attention, and as always I’ll talk to you the next time.
