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 of58.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 Widthand 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 yourobject’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 Scaletool 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 Widthand 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 2xmultiplier, 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 Widthand 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 Scaletool 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.
