Comparing the Two Methods for Creating Line Icons: Offset Paths vs. Strokes

This article is dedicated to a
subject that is close to my heart but at the same time gave me some strong
headaches in the early days of my design process. 

If you haven’t already
guessed it from the title, well, it’s something deeply related to icon design,
more precisely line icons and the two quite different methods of producing
them: offsets vs. strokes. So whether you’re creating your own or modifying an icon pack from Envato Market, this article will help.

That being said,
buckle up and let’s go over the main pros and cons of using one over the other.

1.
What Are Line Icons?

Well, that’s a really good question,
especially if you’re just starting out as an icon designer, since at some point
I remember asking myself the exact same question.

For those who already know the answer,
well just bear with us, since it will only take a couple of seconds to get
everybody else up to speed.

Line icons are icons that delimit the different building block sections of a
composition, using thinner or thicker outlines, or lines.

There are two main
types of line icons, which are actually pretty similar, the key difference
being the use or rather lack of colored fill shapes.

Whether you decide to go fully naked and
use only lines, or add details by filling up the empty space between those
lines, it’s all up to you.

At this point, things might not seem all
that complicated, at least on the surface, but as soon as you go about the
process of creating the actual icons, things might start getting a tad fuzzy.
That’s mainly because there are a lot of opinionated voices out there that talk
about the different methods of creating the actual icons, but there aren’t many
of them that do a direct comparison of the two processes.

So I
thought I could step in and do this little written piece in order to do justice to both methods.

2.
How Are Line Icons Created?

Okay, so we now know what line
icons are, but how do we go about creating them?

As I mentioned in the introduction, there are two basic ways of
creating these icons. The first one is using offset paths, which
requires you to create a base shape and then add an offset to it, which you
will transform into a line piece by cutting out the smaller shape from the
larger one.

The second one relies on using
Illustrator’s basic shapes combined with the Pen Tool (P) to create paths that use only thinner or
thicker strokes, so no fills.

I’m going to go over
each of them in the following minutes, and try to shed as much light as
possible on both of them so that in the end you can decide on your own which
one suits you best.

2.1.
The Offset Path Method

First of all, what does the word “offset”
mean?

Well, when used as a noun, I have to say
that I really haven’t found any valid definition out there that would come
close to its use in design. On the other side, when used as an adjective,
things start to make a little more sense since the “placed away from a center
line; off-center” explanation brings it closer to the way Illustrator uses it.

Now, to be honest, I can’t say that the
official Adobe Illustrator manual does a very good job at explaining things,
since the tool is listed under a somewhat misleading title “Offset duplicate
objects”, which is a little bit incorrect.

That’s because the resulting objects
aren’t actually duplicates, since a duplicate has the same characteristics, so
size, color and shape as its original counterpart. I think the actual word they
should have used is “copy”, since a copy can be “similar or identical” to the
original, which is actually what Illustrator’s offset does.

I really believe that they could have
done a better job if they had just named it something simple like “The Offset
Path Tool” and described its functions using a couple of different subtitles
and sections.

They do make things a little clearer
once you start reading the actual body of the text:

“You can create a replica of an object,
set off from the selected object by a specified distance, by using the Offset
Path command or Offset Path effect. Offsetting objects is useful when you want
to create concentric shapes or make many replications of an object with regular
distances between each replication.”

I still found the
definition to be a little vague, so I decided to try and explain the concept by
taking a close look at the actual process that Illustrator follows in order to
create it.

So, an offset path is basically a copy of
a selected object that has been created by pushing its path towards the outside
of the original shape, thus giving you a slightly larger version of that object
that is identical in form and color but not in size.

Now, I don’t know about creating
multiple concentric shapes, but this tool can be a perfect fit for creating
line icons.

Yes, there are a
couple of tricks that you need to be aware of when using it for this purpose, but I’ll talk about them in the following moments.

The
Process

Well, the process depends on the
type of icon that you’re going to be creating. If you remember right, in the
first chapter I talked about the two types of line icons that are currently
being used by designers: pure naked
lines or line icons with fill shapes.

Since the Offset Path tool creates a
copy of the original shape, that implies that the process of creating the lines
will focus on using two objects, identical in terms of shape but different in
size.

No matter the type of line icons that
you decide to work with, the process of creating the actual offset is
identical. First, you create your original shape, and then with it selected,
you go to Object > Path > Offset
Path where you will be greeted by a little pop-up window with a bunch of
options.

The first one is Offset which, as you already know, controls the distance at which
Illustrator will create and position the copy’s path.

The second option is Joins, which controls the overall aspect
of a shape’s ending joins, giving you the following three options:

• Miter, which leaves the angles straight and pointed
• Round, which makes all the corner joins round
• Bevel, which adds a flat top base to each of the
  corner’s joins

Depending on the visual style that
you’re going for, you might choose one over the other. One thing that you
should take into consideration is that these Joins
only work on shapes that have pointed joins, and not round corners.

So, for example, if you have a square and
want to create an offset and set its corners to Round, you can easily do that. On the other hand, if you have a
rounded rectangle, the only type of Offset
that you’ll get is Round no
matter what you set the Joins option
to.

This shouldn’t be an
issue since I wouldn’t see anybody eager to create a rounded corner shape with
some weird corner pointed outline.

The third and last option is Miter Limit. I tried searching for an
official Adobe presentation of the option, but I couldn’t find a direct one.
Instead, I found a really nice explanation of the Stroke’s Corner Miter Limit,
which I guess works the same way as the Offset’s
one:

“The miter limit controls when the
program switches from a mitered (pointed) join to a beveled (squared-off) join.
The default miter limit is 10, which means that when the length of the point
reaches ten times the stroke weight, the program switches from a miter join to
a bevel join. A miter limit of 1 results in a bevel join.”

If you test this, you might find that
the default Miter Limit for the Offset is 4 (not 10) but other than that, they’re pretty much identical.

Okay, so we’ve probably gone a little
bit too technical on the subject, but I wanted to explain things as thoroughly as
possible.

At this point we know
how to create the offset, but how do we use it in order to create the actual
line icon? I’m going to show you the process for the naked line first.

Creating
Naked Line Icons Using the Offset Path Tool

For those who are asking why
I’m calling them “naked line icons”, let’s just say that I found the expression
simpler to understand for somebody who is new to the game. That being said, no
matter the type of icon that you choose, whether it’s naked or filled, they are
both line icons.

Now, since I usually find examples to be
more explicit than pure text, I’m going to walk you through the process of
creating a little pet project icon of your own.

Since I needed something basic, that
could easily explain the concept, I decided to create a little document icon, which
is fast and easy to create.

When creating icons, there are a couple
of things that the designer has to decide on. The first decision is
usually that of choosing the base size for the icon. This step is really
important since you will want to start from the smallest size and create larger
versions from it, which, depending on your project’s needs, could be 32 x 32 px, 64 x 64 px, 96 x 96 px,
etc.

Quick
tip: If you’re wondering why you should
start from a smaller size and work your way up to something bigger, well it’s
quite simple: when you create pixel perfect icons that have odd number values
(for example 3) and pick a relatively larger base size (64 x 64 px) but then decide that you also want to add a smaller one
(32 x 32 px) then you might notice
that things start to break. That’s because an odd number split in half will
give you a decimal value, which can’t be correctly snapped to the Pixel Grid.

You can read more on
the subject by going over some of my other tutorials:

• How to Create Pixel Perfect Artwork Using Adobe Illustrator
• Understanding Adobe Illustrator’s Grid System

In our case, let’s say that we want to go with a
relatively large base of 96 x 96 px.

Once we’ve decided on our size, we then
have to start thinking about the weight of our lines. This step is equally
important since we will need to create the main shape, making sure to leave a
gap between it and the sides of our 96 x
96 px grid, since this is where the lines will actually be positioned.

That gap will represent the actual
thickness of our lines, since we will apply an offset path to the original
shape, and then create the “line icon” by cutting out the smaller shape from
the larger one using Pathfinder’s Minus Front option.

For this example, we will go with a
thickness of 4 px, which means that our main shape will
have a gap of 4 px between the top
and bottom sides of our grid.

If you’re wondering why we’re only
interested in the top and bottom sides, well that’s because document icons are
usually taller but slightly narrower in terms of width. If this were a
different object, we might have needed to consider both the left
and right sides since you’ll want things to be consistent.

Now, let’s start building the icon by
drawing a 64 x 88 px rounded
rectangle with a 4 px Corner Radius,
which we will color using a darker shade of grey and position to the center of
our grid.

As you can see, both
the top and bottom sides of the shape have that 4 px gap which we will use as our offset’s value.

So, let’s select the shape and create the offset
by going to Object > Path > Offset
Path and entering 4 px into the Offset value field, leaving the Joins and Miter limit to their default values.

As soon as we click on OK, Illustrator will
create our offset object, which will have the exact same shape and color as our
document’s original shape.

Now, to create the
line outline, we will simply select both shapes, and use Pathfinder’s Minus Front option
to cut out the smaller shape from the larger one.

As you can see, we now have a new shape
that has an all-around 4 px thick
outline.

Pretty cool, right?

Now, let’s finish off
the icon, by adding a couple of text lines using the Rectangle Tool (M) so that it will look like an actual document.
When creating the shapes, make sure they have the same 4 px thickness value as the main outline, since line icons are
usually consistent in terms of thickness.

Creating
Line Icons With Fill Shapes Using the Offset Path Tool

So at this point you should have
a basic idea of how to create “naked line icons” using the incredibly powerful Offset Path Tool.

We will now take a look at creating the
same document icon, but this time we will use lines in combination with fill
shapes.

The process is almost identical—the
only key difference is that this time, we won’t be cutting out the smaller shape
from the larger one. Instead we will use the smaller one as a fill shape, and
the offset as the icon’s outline.

So, let’s create the same 64 x 88 px rounded rectangle with the 4 px Corner Radius, and position it
towards the center of our grid.

Then, with the shape selected, go to Object > Path > Offset Path and
give it an offset of 4 px as we did
with the previous icon.

Once you’ve done that,
simply color the original shape using a darker shade of grey to make it stand
out from the Artboard, and then add the little text lines.

As you can see, both of the processes
are really easy to understand and apply, but there are a couple of things that
you should be aware of when using the Offset
Path tool to create these type of icons. We will talk about those aspects as
soon as we go over the Strokes method
so that we can have a larger perspective over the two.

2.2.
The Strokes Method

This method is for many designers out
there the “right” one since “line icons” should be created using actual lines /
paths and not fill shapes. That’s probably a fair statement, but let’s be
honest, most of the people out there that buy our icons don’t really care,
since they’ll end up using them as .png files anyway.

The
Process

Compared to the previous method, the
process itself isn’t all that different, since we will still be using some of Illustrator’s basic shapes such as the Rectangle (M) and Rounded Rectangle Tool, but we won’t be cutting out anything.
Instead, we will transform the shapes into lines, by removing their fill color
and giving them a thinner or thicker stroke weight.

Along with basic
shapes, we will also be using the Pen
Tool (P) to add details and section delimitations to the icons depending on
the complexity of your composition.

That being said, let’s go over the
processes of creating both naked and filled line icons using this method, by
creating the same little document icon.

Creating
Naked Line Icons Using Strokes

No matter how you go about creating these
type of icons, you’ll always have to decide on their base size and the line
thickness that you’re going to be using.

Since in this case we will be creating
the exact same icon, our size will remain the same, so 96 x 96 px, and so will our line thickness (4 px).

If for the previous method we needed to
create two shapes, for this one we will only need one which we will transform
into the document’s outline by flipping its fill color with its stroke.

So, using the Rounded Rectangle Tool, select the same grey color as before and
then swap the fill with the stroke by pressing Shift-X. As you can see, this will remove any fill colors and let
you draw using paths, which is exactly what we want.

Quick
Tip:
The Shift-X color swap works as long
as you don’t have colors assigned to both the fill and stroke. If you do have
two colors, then it will only invert them, which isn’t what we want when
dealing with line icons. So, if you do have more than just a fill color, you
should make sure to remove the second one.

Now, change the Stroke’s Weight to 4 px and start
drawing the main shape of the icon by clicking and then dragging so that in the end you’ll have a 68
x 92 px shape with a Corner Radius of
6 px.

If you’re wondering why the values have changed, that’s because instead of creating a base shape and then adding an offset,
we will create the document’s outline directly using strokes. Now, if we were
to take a close look at the outline created with the offset path method, we
would notice that it has a width of 72
px…

… and an
outside Corner Radius of 8 px with just 4 px for the inside one.

The explanation is quite simple. Since Illustrator
by default aligns the stroke to the inside, that means that the thickness of
the line will be equally split on each side of the path, so 2 px for one side and another 2 for the other.

Now, even though the shape has the exact
same width as the previous outline created using the offset method, if we check
the Transform Panel we will see that
its Width value is actually smaller,
since Illustrator indicates the size of the actual path, and not the object. If
we expanded the path and turned it into a shape, it would have the exact
same values as the one created using the first method, since Illustrator would consider those 2 px from
each side (68+4=72).

Compared to the previous method where
you had to leave a gap that had the exact same value as the line’s thickness,
this time you’ll have to position the shape so that its path (which is
usually represented by the color of the layer) leaves a gap of just 2 px between the grid’s top and bottom
sections.

Quick Tip: depending on the Weight of your Stroke¸
you will always have to make sure that when you’re designing the icon on the
grid, you leave a gap that has a value of half of the path’s Stroke Weight, since when drawing the
shapes by clicking and dragging, Illustrator doesn’t count the number of pixels
that go outside the path indicator line. So you’ll have to make sure to keep
that in mind, and draw by leaving a small gap where the sides of your path meet
the borders of the actual grid, so that your design will fit inside that space.

Once we have our document’s outline, we can select
the Pen Tool (P) and start adding
the 4 px thick text lines to finish
off the icon.

Now that we’ve seen how to create the
naked lines icon, let’s take a look at the process of creating line icons with
fill shapes using the same method.

Creating
Line Icons With Fill Shapes Using Strokes

Well, the process for creating this sort of icon is pretty much the same as the one for the naked lines. The
only difference is that you’ll have to create a duplicate of your main
outline, and turn it into a fill shape by swapping its stroke color with its
fill.

So, let’s start by creating the main
outline by drawing a 68 x 92 px shape
with a Corner Radius of 6 px. If you’re feeling lazy, you can
simply create a copy of the one we already have, since it should speed things
up a bit.

Once we have the
shape positioned over the grid, we need to create a copy of it (Control-C > Control-F) and then flip
its stroke with its fill by pressing Shift-X.
Then simply change its color using the same dark grey as before, making sure to
send it to the back using the Arrange
> Send to Back option. Finally add the little text lines and you’re good
to go.

3.
Comparing the Two Methods

At this point, we’ve gone over each of
the two methods that we can use in order to create line icons. As I promised at
the beginning of this article, I am now going to briefly talk about the
advantages and disadvantages of using one method over the other, so that in the
end, you can decide for yourself which one suits you best.

3.1.
The Offset Path Method

Advantages
of Using the Offset Path Method

No matter the type of line icon you’re
creating, the Offset Path method can
easily be your “go to” tool, and no I’m not just saying because I use it on a
daily basis. I’m saying it because there are several things that really
make it stand out:

• First, the method is really fast, and
  straightforward, so as soon as you pick up the process you can create nice-looking, detailed icons in no time.
• It uses shapes instead of paths, which
  for some clients that don’t know how to use Illustrator might be easier to edit
  and work with.
• It handles the resizing process a lot
  better when the icons are created without pixel perfection in mind.
• It gives you a better control over the
  positioning and spacing of your objects.
• If your icons aren’t designed using a
  pixel-perfect workflow, it’s easier to see and fix visual glitches where two
  lines don’t overlap perfectly.
• For some, using the Offset Path method allows them to select their shapes more easily, since
  they don’t need to drag or click on the center of the line in order to make the
  selection.
• Used in combination with the Pixel Preview mode, I found it to be a
  lot easier to create my shapes, since I didn’t have to check if my stroke weight
  was consistent.
• It provides an easier process of
  coloring the icons, using the Eyedropper
  Tool (I).
• It’s easier to add details since the
  offsets get positioned under the original shape, which means that you don’t
  have to send them to the back manually each time—you just create the offset
  and then assign it a color.
• It handles odd-numbered values better,
  since the shapes perfectly snap to the Pixel
  Grid if the option is enabled.
• It plays really well with Clipping Mask.

Disadvantages
of Using the Offset Path Method

As with any tool, the
Offset Path has a couple of
disadvantages that for some could be a deal-breaker:

• The biggest one is probably the way the
  outlines behave when used on colored line icons, where the larger shapes acting
  as lines tend to go outside, and not over the main colored shape, which results
  in a slightly different look from the ones created using strokes.
• There will be situations where your
  offset might get broken due to the shape of the main object that you will be
  using as a cutout. This is mainly due to the fact that offsets are outward-facing
  paths, where strokes are usually aligned to the center.
• It’s not always the best fit when it
  comes to creating elaborate icons with more organic lines, since the process of
  using basic shapes has its limits.
• If, for some reason, you have to adjust the thickness of your lines, you’re
  going to have to go through a long process of deleting and recreating most of
  your lines.

3.2.
The Strokes Method

Advantages
of Using the Strokes Method

Even if the Offset Path is a great tool, that doesn’t
mean the Strokes method can’t be a viable
alternative. There are a couple of advantages that you should be aware of
before deciding if this method is right for you:

• It might not be the fastest of the
  bunch, but once you get the hang of it, the process of creating icons using it
  is really easy and enjoyable. At some times you might feel it’s more creative
  since you’re dealing with paths and not shapes.
• It’s probably the only method that
  allows you to easily edit the Weight of
  the lines on the fly by simply adjusting the Stroke levels.
• It forces you to get down and dirty with
  the Pen Tool (P), which in the end will
  improve the way you handle it.
• Compared to the Offset Path method, you can easily create round endings since the Stroke panel gives you the ability of
  using Round Caps.

Disadvantages
of Using the Strokes Method

Now that we’ve seen the good parts, let’s
take a couple of seconds and talk about the bad ones:

• First, it’s way harder to take control
  of your lines, since the selection process is rather difficult.
• Depending on the way the designer built
  the icons, it can be harder to resize.
• Coloring the different elements can get
  annoying really fast if you don’t know how to work with the Live Paint Bucket (K).
• Moving things around on the Artboard can sometimes break some parts
  of the lines.
• They don’t handle odd-numbered values all
  that well, since the Stroke is
  usually aligned to the Inside, which
  means that the anchor points won’t snap to the Pixel Grid, making it harder to create organic lines.
• Icons created using Strokes can prove to be a challenge for those who are trying to
  edit or adjust them.
• If you’re not using a pixel-perfect foundation, overlapping
  lines could break your design.
• Sometimes you might end up with loose
  anchors, which could break the look of the shape it’s part of.
• It doesn’t work all that well with
  clipping masks, since you’ll need to create new fill shapes in order to hide
  the different sections that otherwise would still be visible.

It’s
a Wrap!

So there you have it, a quick but in-depth comparison of two awesome methods for creating line icons that should point out
which one suits your workflow best.

As always, I hope you’ve
learned something new, and if you have any questions or you just
want share some of your knowledge, post your comment in the section below and I’ll get back to you as soon as I can!