Lately I’ve been getting a lot more technical and started exploring solutions to the different challenges that you might encounter along your creative journey. One particular challenge that we are going to discuss today
is that of scaling icons, which can prove to be a difficult process
for a lot of people.
Do take in
consideration that when I say icons, I’m actually talking about the ones
created using a pixel-perfect workflow, since these are the most sensitive when
it comes to the resizing process.
Now, before we
get into the actual process, I’m going to take a couple of moments and talk
about some icon-related notions that we should consider when it
comes to resizing our precious icons.
Whether you’re scaling your own icons or icons purchased from Envato Market, the process should be fairly easy to comprehend and use after reading this quick tutorial.
1. Start by
Choosing a Base Size for Your Icon
When creating an
icon pack, it’s really important that you start by making the right decision
when it comes to choosing the base size. The base
size is the smallest size that you will
create and then use to produce all the other size variations in your pack.
Beyond that,
your base size will also act as your custom grid, which you will use in order
to create a cohesive icon pack, since it will allow you to create your elements
within a delimited surface.
That being said, there are a couple of things
that you should do in order to get the base size right.
1.1. Think Ahead
I recommend that
before you start doing anything, you should first take a couple of minutes and think about how many sizes you want or need to
deliver the icon pack in. Will you be creating two sizes, three, five? Always try to think ahead and plan your steps so that
the process can be as smooth and forward-looking as possible.
Believe me, it’s far easier to establish your
variations from the start than to finish your project and then realize that
you might need to add an extra size, which as you will see later on, might pose
some problems.
1.2. Go Small
Once you have a
clear vision in regards to the number of sizes that the project will be
needing, take the smallest variation of them all, and use that as your base
size. So for example if you want to create three size variations for your icon, say 32 x 32 px, 64 x 64 px and 128 x 128 px, you’ll want to set your base grid using the
smallest size, which in this case is 32 x
32 px.
It might seem
weird, but if you’re creating using a pixel-perfect workflow, you’ll always
want to start from the smallest size possible, since the resizing process is
deeply connected to the width and height values of your icon’s composing
elements. I’ll elaborate more on this in the following sections.
2. Pay Attention
to Your Icon’s Number Values
The Width and
Height values of your icons are really important since they are directly
connected to the way your icons behave once you start resizing them. There are
a couple of things that you should take into consideration when starting the
actual building process.
2.1. Always Use
Round Number Values
If you’ve never paid any attention to the Width
and Height Values of your icon’s composing sections before, now would be
the right time to change that, since numbers play an essential role when it
comes to creating and resizing your icons.
The reason for
that is quite simple: icons are digital forms of artwork that usually end up
being displayed on digital screens, which as you know rely on pixels in order
to reproduce any type of imagery. That means that everything you create needs
to occupy a specific count of pixels off the monitor’s grid, in order for the
artwork to be as crisp as possible.
Now, I won’t go
over the process of creating pixel-perfect artwork, since I already have an
article that touches on that subject, but I will talk a little bit about the
way numbers behave once you resize your icons, and I will do that by giving you
a basic example.
So let’s say that we have a 32 x 32 px base grid, onto which we’ve created a 29.49 x 29.45 px rectangle (highlighted
with red) by simply dragging using the Rectangle
Tool, which would be the first section of a theoretical icon. As some of
you probably already guessed, the shape itself isn’t fully occupying the pixels
off the underlying grid, which means that if we were to resize it, things would
go haywire.
Don’t believe me? Well, let’s select the shape
and resize it using the Scale tool
by doubling its surface using a 200% increment
value.
As you can see, the resulting shape now has a Width of
58.98 x 58.9 px which means that
Illustrator has to apply an antialiasing effect in order to add alpha channels
to the pixels that aren’t being fully occupied by the rectangle’s surface,
which in the end will take away from the shape’s sharpness.
If you aren’t
creating with pixel perfection in mind that might not pose a problem, but for
all of us pixel junkies out there it’s something that has to be fixed, since it
will only create new problems along the way.
The solution is really simple: you just have to
select the shape and then force it to correctly snap to the pixel grid by enabling
the Align to Pixel Grid option found
under the Transform panel.
Then you just
have to make sure that every little icon section that you create next uses
round number values. For that, you might want to use the Snap to Grid option found under the View menu, in combination with the Pixel Preview mode, which should give you total control over the
size of your objects.
2.2. Use
Even Numbers as Often as You Can
This principle
is deeply related to the icon’s base size grid that you choose to work with. If
you remember, a couple of moments ago I told you that you should always try to figure out the smallest size that you will need for your icons, and build the
larger variations using that as a building block.
By doing so you will always make sure that
your icons are “anatomically correct”, since your artwork will scale correctly
without being subjected to any deformations.
Now, as you know, both even and odd numbers scale up correctly since, when doubled, odd numbers always become even ones. The problem
with using odd number values arises when you are faced to scale down your
assets, since cutting them in half will always result in decimal values, which
will inevitably break your design.
If you’ve done your research and chosen the
right base grid, this shouldn’t pose a problem, but if for some reason you need
to add a smaller size variation, then you’ll just have to scale it down and then adjust the different sections as needed.
3. The Actual Resizing
Process
So, up to this point we’ve talked about a couple of pre-scaling notions that you should
keep in mind every time you start creating size variations for your icons.
In this section I’m going to walk you through the actual process of correctly resizing
your icons using the Scale tool, but
first I want to briefly talk about one particular method that is widely used
but in my opinion should be avoided.
3.1. How NOT to
Resize Your Icons Using the Select-and-Drag Method
Lately, I’ve
noticed that a lot of people, some of my peers included, tend to resize their
icons using the select-and-drag method.
Let me keep it
simple and clear: never, ever resize an icon by selecting and then
dragging one of its sides or corners. This will always break your icon if
you’ve created it using a pixel-perfect foundation, since your shapes will snap
off the pixel grid, due to the fact that their number values will end up being
decimal ones, which won’t be able to correctly occupy the underlying grid.
The reason is
quite simple: when you drag, Illustrator has to expand the surface of your
artwork, by adding pixels to the total Width
and Height of your shapes, paths,
and even the empty spaces. But it can’t always correctly do this, since some objects
might scale perfectly fine, while others break due to the process of stretching
and adding pixels.
Since I like to teach by example,
let’s say that we have a little icon that was
created using a 48 x 48 px base
grid, with an all-around 2 px padding.
The icon was built using a pixel-perfect workflow, having each and every shape
perfectly snapped to the underlying pixel grid, but it uses both odd and even
number values throughout its composing elements.
Now, let’s turn on the Pixel Preview mode (View
> Pixel Preview or Alt-Control-Y)
and let’s select the right bottom corner of the icon’s bounding box, and drag
it diagonally towards the outside by 2
px.
As you can see, some of the shapes (the text lines, inner window frame,
bottom window delimiter line, etc.) have actually managed to scale without
falling off the grid, while others didn’t do all that well (the window circular
buttons, the icon’s outline, scrollbar, etc.).
That’s because during the
dragging process, Illustrator tried to add that 2 px value to each of the selected objects, but due to the
arrangement and space between each shape, it didn’t manage to keep up. That
resulted in shapes that have seen an increase in both width and height, others only
in the width (the text lines) while some haven’t been increased at all (the
vertical line underneath the bottom horizontal delimiter).
Now the thing to keep in mind is that we
actually went through the resizing process with Pixel Preview mode on, which allowed us to see and apply a precise
number value increment. If we were to repeat the same process but this time in
the normal preview mode, as you can see the results would be pretty painful to
watch.
Since at this point I’m hoping that I’ve made my case clear, let’s move on
and take a closer look at the correct way of resizing an icon using the
powerful Scale tool.
3.2. How to Properly Scale an Icon Using the Scale Tool Method
So resize your icons you want, young Jedi. Well after you’re done reading
this little section, you’ll be a master at it.
Understanding the Tool
I have to be honest: when I started making icons, I was basically doing it
blindfolded, since I didn’t know a lot about the different aspects of the
process, especially the resizing part. I always did a good job on creating the
first size batch, but when it came to resizing them, let’s just say things
started getting frustrating since most of them would fall apart.
Well, as you’ve
probably guessed, that meant I had to manually fix them, which in the end led
to a pretty time-consuming process, which basically sucked all the energy out
of me. Luckily I like to learn from my mistakes, so I started exploring and it
wasn’t long until I found that the solution was right in front of me: the almighty
Scale tool.
If you’ve never used the tool before, don’t worry since when it comes
to using the Scale tool, things are
pretty straightforward.
First we have to select the object or group of
objects that we want to resize, and then right
click and go to Transform > Scale.
Illustrator will bring up a little window
with a bunch of options.
As you can see from the above example, we are greeted with two different
methods of scaling.
The first one is Uniform which, as the name implies, will scale your shapes both Horizontally and Vertically,
which means that it will add pixels to both the Width and Height of your
selection.
The second one is Non-Uniform,
which allows you to individually scale your
object’s Width and Height using different values, or even
scale just one out of the two. Now, I wouldn’t use this particular option when
resizing an icon, but it might prove to be useful in situations when you want
to quickly adjust the Width or Height of an object using simple
percentages.
So we’ve talked about the two different options available within the tool,
but the real magic happens only when you know which percentages to apply to your
objects.
Choosing the Right Percentage Values
As I’ve already mentioned, the Scale
tool is a really powerful ally, but only when you know exactly how to use
it, since not all percentage values will result in a crisp looking icon. Believe
me, I learned this one the hard way.
The reason for that has to do with the Width
and Height values of the icon’s
composing elements. Yup, we’re back to that again. As I’ve already pointed out,
odd numbers behave differently than even ones when doubled. The same is true
when you multiply them with decimal values such as 1.5.
This is important because when dealing with resizing, we will have to
chose the right percentages depending on the values that our shapes have, since
percentages are in fact multipliers. Don’t believe me? Well let’s think a little bit about the way Illustrator uses
them from a mathematical point of view.
So as you all
know, 100% is 100 divided by 100
which gives us 1. Illustrator uses this value and multiplies it with the Width and Height values of each selected shape. Now since if you
multiply 1 with anything (but 0) you still get the same number, this isn’t
the best example.
But, if we take
a look at a value such as 200% which
is 200 divided by 100, we get a 2x multiplier, which will double the pixel
count of any selected object.
On the other
hand, if we were to resize an icon using a 50% value, which is 50 divided by 100, so a 0.5x multiplier, that will actually cut our selected object’s
dimensions in half.
Now the trick is
to know what multipliers to use when dealing with icons that have only even
number values and the ones that have both even and odd ones.
If we have an
icon that was built using only even numbers, then you can apply any percentages
as long as they are 100% increments
from the default 100% value. So multipliers
such as 200%, 300%, 400%¸ 500%, 600%… you get the point. That’s because even numbers (2, 4, 6, 8)
always turn these multiplier steps into even values (2 x 2= 4, 2 x 3= 6, 2 x 4=
8, 2 x 5= 10, 2 x 6= 12, etc.).
You can also use
multipliers such as 150%, 250%¸ 350%, 450%, etc., but you
should limit their use to only one time, since otherwise these values will turn
an even number into an odd one.
To understand why, let’s say that we have a 20 x 20 px square.
We want to scale it up using a 150% multiplier.
If we use it once, we will get a shape that is 30 x 30 px.
Use it twice and then you’ll end up with a 45 x 45 px one.
If we were to
use a 300% multiplier instead, then
the resulting shape would be 60 x 60 px.
If you’re wondering why, well that’s because 20 x 1.5 = 30 which multiplied again
with 150% (1.5) is 45. While 150% + 150% = 300%¸ the results of using the same multiplier twice
compared to its added value are quite different, since 20 x 3 = 60.
Another thing to
keep in mind is that some even numbers turn into odd ones even if you apply the
multipliers just once, e.g. 2 x 1.5 = 3;
6 x 1.5 = 9; 2 x 2.5 = 5; 6 x 2.5 = 15; etc. whereas 4 x 1.5 = 6; 8 x 1.5= 12; 4 x 2.5 = 10; 8 x 2.5 = 20; etc.
Depending on the
complexity of your icons, you might want to give these sort of multipliers a
try, but you should always double check if things resized as you wanted them
to.
Now, when it
comes to icons that have both even and odd Width
and Height values, you should
always use 200% step increments, so
values such as 200%, 400%, 600%, 800%, etc., since this
way your icons will resize exactly as you want them to.
Never use the 50% multiplier, since this
will break any pixel-perfect icon, because cutting odd numbers in half will
result in decimal values, which will snap off the pixel grid.
Now that we’ve seen which multipliers work best
depending on the case scenario, let’s take a quick example and see the process
of resizing an icon from start to finish.
The Process
So we have the
same icon that we’ve used as an example a few minutes ago, which as you know
has both odd and even values throughout its composing shapes. That means that
we can only use 200% step increments
when deciding on the multiplier value, but that’s totally fine since for this
example we will want to double the size of our asset from 48 x 48 px to 96 x 96 px.
To do that, I’m simply going to select my icon,
and then right click and go to Transform > Scale. In a matter of
seconds I’m greeted with the little Scale
tool popup window where I choose to go with Uniform and enter 200
into the value field, which by default is set to 100%.
As soon as I
click the OK button, Illustrator will do the math and resize my icon by
doubling its pixel count, keeping everything perfectly snapped to the Pixel
Grid.
It’s as simple
as that.
Quick Tip: even though Illustrator usually has the Scale Rectangle Corners and Scale
Strokes & Effects options checked, you should always double check them
to make sure that things go well.
3.3. Limitations
of Using the Scale Tool Method
So as you’ve
probably seen by now, the Scale tool
is a really worthy option when it comes to resizing your icons. If you know how
and when to use your multipliers, you should be able to create size variations
for your icon pack in no time.
But, there is a
slight limitation when it comes to creating those size variations
that you should be aware of, especially if you want to create icons with small
size increments (e.g. 16 x 16 px; 24 x 24 px; 32 x 32 px; 48 x 48 px; 64 x 64 px;
72 x 72 px; 96 x 96 px; 128 x 128 px; etc.).
The thing is, in
order to get that small bump in size variation (e.g. 24 x 24 px; 48 x 48 px; 72
x 72 px; 96 x 96 px), you’ll have to use the 150% multiplier (since 16 x 1.5 = 24; 32 x 1.5 = 48; 48 x 1.5 = 72;
64 x 1.5 = 96; etc.), which as you know might cause problems, especially when
you have odd number values throughout your icon’s composing shapes.
That means
that you’ll probably have to adjust some shapes here and there in order to get
the icons consistent. That might not be too hard when dealing with a small
icon pack, but if you’re working on something larger then you’re in for a long
one.
A good way to do
this would be to create the first 150% size
increment icon (for example, 24 x 24 px), adjust it where needed, and then use 200% steps to get the rest when you can
(48 x 48 px; 96 x 96 px).
Depending on
your project’s needs, you might need to tinker with your icons and look for the
right solution for you, but isn’t that what a designer does in the first place,
solve problems?
Conclusion
So there you have it: an in-depth presentation of how you should go about resizing an icon using a pretty simple
method. As always, try to play around with the tool after you’ve read this
tutorial, and I’m sure that you’ll get the hang of it in no time.
{excerpt}
Read More