Quick Tip: Exporting Icons Using Slices in Adobe Illustrator

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.