How to create pixel perfect icons
Hey guys, so today’s tutorial is somewhat different, even special, since we will take on a subject that has probably been a source of frustration for a lot of you out there, that are currently crafting icons on a daily basis.
Now, if the title wasn’t explicit enough, let’s just say that in the following moments, we will get as technical as possible and show you all you need to know in order to adhere to a Pixel Perfect Workflow, so that you can improve your skills when it comes to creating icons.
That being said, sit back and get comfy since things are about to get really interesting.
1. Understanding the concept of pixel perfect
Before we dive into the whole “how to do this and that” side of the story, I want to take a couple of seconds and talk about a few notions that you need to be aware of in order to better understand why you should try and adhere to a Pixel Perfect workflow.
Let’s start with the most basic notion, that of the pixel. As you probably know, every display, be it that of a monitor or a mobile device is composed out of a hefty number of small individual points, called pixels. They are the smallest addressable element that once put together form an image.
From a technical perspective, the pixel is also the unit used to measure resolution, which is usually quoted as Width x Height (ex. 1920 x 1080 px). Now, the way it works is really simple: the higher your resolution is, the bigger the number of pixels used to display the image gets, and thus the crisper the image ends up looking. Use a lower resolution, and well you get the idea.
Now, resolution is kind of tricky since it can be used to describe the size (and thus level of detail) of an image or the maximum output that a screen can display, but even so, you shouldn’t worry all that much about it, at least for now.
The thing is, the pixel by itself is insignificant, since let’s be honest you’ll rarely see an image composed using just one point. Okay maybe some of you did, but come on, be serious, why would you want that? The pixel becomes a powerful medium when used within a Pixel Grid, which we’re going to talk about next.
The Pixel Grid
The Pixel Grid is the actual fabric that a monitor uses in order to display an image, and it’s composed out of a high number of pixels stacked next to one another both vertically and horizontally.
Now as with Resolution, the Pixel Grid has a dual nature, since it can be used to describe both the Resolution of a device (the maximum output) and the Resolution of the image itself (the size of the image).
The way it works is really simple: when you create an image be it vector or raster, it occupies a specific number of pixels off of the Grid, that can be independent to the monitor’s own finite Pixel Grid. This means that you don’t have to limit your artwork to the specifications (maximum resolution) of your device, but on the other hand, when you want to display it, it will suffer some resampling in order to fit on that screen.
Illustrator itself gives you the ability to preview and zoom in on the Pixel Grid, but more on that a little bit later.
The “Pixel Perfect” Concept
Now that we’ve briefly talked some of the key notions of how images are created and displayed, it’s time to address the meaning of the Pixel Perfect concept, and see exactly what it stands for.
To do that, we’ll have to take a short journey back in time, when technology was in its early days, and 4k was not even thought possible yet. I’m talking about the 80s, when the Xerox 8010 Star was born and along with it the first UI (user interface).
The timeframe is really important since, for the first time we started rethinking of the way humans interacted with machines, and ended up creating visual symbols powerful enough to break the communicational barrier between man and machine.
These symbols were developed by David Smith and Norm Cox, and were the first ever icons of their kind, which have and continue to be the foundation for all that Icon Design is today.
Now the thing is, these icons looked a lot simpler than the ones we have now, since spatial anti-aliasing wasn’t yet developed, which meant that monitors couldn’t display smooth lines and corners using alpha channels.
This forced Smith and Cox to deal with the limitations of their time, which they overcome by relying heavily on the Pixel Grid.
The way they did it was pretty straight forward, since they created each icon using a square grid, by selecting and painting the shapes pixel by pixel using black (since colored monitors had yet to come).
At this point you can start seeing a connection between the story and our subject, since the phrase “Pixel Perfect” reflects the designers decision to adhere to this older technique of using the Pixel Grid to create the form and composition of an icon, by snapping each shape and line to the underlying Grid.
The result is that each icon looks sharper since its composing elements use precise number values, which are carefully positioned to occupy full pixels off of the Pixel Grid.
2. Adjusting Illustrator for a Pixel Perfect Workflow
Now that we have a better understanding of the concept, let’s see how we can start refining Illustrator’s settings in order to get the most out of it when it comes to creating with pixel crispness in mind.
There are three main settings that we will need to adjust:
the Keyboard Increment
and finally the Grid.
2.1. Adjusting The Keyboard Increment
Let’s start out with the first setting off our list, which controls how your shapes behave once you move them around using the directional arrow keys.
First, go to Edit > Preferences and then click on General (or Control-K). As soon you click on the menu section, a new window will appear giving you the option to set your Keyboard Increment value.
With some of the latest versions of Illustrator, this setting already comes set to 1 px, but in case you have a different value, make sure to change it accordingly.
Now if you’re used to moving your shapes around using the arrow keys, this setting will help you a lot, since you’ll now be able to make super precise movements in those situations when using a mouse is painfully slower.
Quick tip: if your increments are shown in pt values instead of px ones, don’t worry since we’ll change that in the following step.
2.2. Adjusting The Units
Once you’ve made sure that you’re using the smallest possible keyboard increment, you can now move on to the second setting, which controls your measurement Units.
As you can see, there are three different options, that you can individually set up:
For each option, you can select from six different measurement units (points, picas, inches, millimeters, centimeters, and pixels), but we will only be interested in just one, which of course is Pixels.
Why you might ask? Well, since most of the times we use and display icons on digital screens, which of course are pixel based, it’s really a no brainer.
The first one is General, and as the name implies, it controls the unit measurement for most of the things from within Illustrator, from your shapes to your Rulers and beyond. By default Illustrator sets it to Points but of course, we will have our way and set it to Pixels.
The second option is Stroke which defines the measurement unit for all our strokes, which we will set to Pixels, since our General and Stroke settings have to match.
The last option is Type which crazy or not can’t be constrained to pixels, since type was created outside of the digital medium, being totally dependent on Points, so we will leave it as it is.
There are some that might try to set it to Pixels, but believe me, it won’t help you; it will just make things harder to measure, since 12 px isn’t the same as 12 pt.
Once we’re finished adjusting our Units we can then move on to setting up a custom Grid.
2.3. Setting Up a Custom Grid
Before we start playing with the Grid’s settings, we must first understand what it is.
According to the Merriam-Webster online dictionary, a grid is defined as a “network of uniformly spaced horizontal and perpendicular lines (as for locating points on a map).
The thing is, the definition is kind of vague, since it doesn’t really explain what it does, at least from a designer’s perspective.
For me, the Grid is the structural backbone of my composition, which allows me to establish order and hierarchy within my design, by defining precise spaces based on its two dimensional structure, which is made up of multiple intersecting straight (vertical, and horizontal) lines.
Well, that’s what it should be, but, I kind of flipped its function around, and turned it into a precise tool that allows me to easily snap my artwork to the Pixel Grid.
I’ll elaborate more on that in a couple of moments, so for now let’s just set it up.
Assuming you still have the Preferences window opened, navigate to the Guides & Grid section, and let’s talk a bit about the options that we are presented with.
The “Gridline Every” Option
A Gridline as the name implies is a line (be it vertical or horizontal), that Illustrator draws in order to create the Grid. The option itself controls the distance at which the software draws these lines.
By default, Illustrator is set to Gridline every 1000 px, which means that at each 1000 px it draws a vertical and horizontal line. Since we’re aiming for absolute precision, we will want to set it to the lowest setting possible, which is 1 px.
The “Subdivisions” Option
If the Gridline every controlled the distance at which Illustrator added the lines, the Subdivisions controls the number of sections that fall in-between those lines. By default it comes set to 4 but we will want to lower it down to just 1.
Now with these settings you will have set up a super precise Grid which is at a 1 to 1 ratio with the Pixel Grid. This is important since we will be able to use the Snap to Grid option which will make sure that our shapes are snapped to the Grid which is now scaled down so that it perfectly matches the Pixel Grid.
At this point, we’re pretty much done with Illustrator’s settings, which means we can talk a little about the actual workflow, where all the magic happens.
3. The Workflow
Up until now we’ve tinkered with Illustrator’s settings in order to make sure that we have everything properly setup. From this point on, we’re going to talk about the actual workflow, and we will start by seeing how to set up a proper document.
3.1. Setting Up a Proper Document
When you start adhering to a Pixel Perfect Workflow, the process of creating a New Document is as equally important as any other step, since there are a couple of things that you need to set up in order to assure that everything goes well.
That being said, let’s quickly go over the main settings that you’ll need to lookout for.
The Document’s Profile
The first thing that you should keep an eye out is the Profile that you’ve set for your document. As you probably know, Illustrator can be used for both Print and Web related artwork, and it gives you the option to automatically set up your document depending on what profile you choose.
Since most of the times the icons that you’re going to be creating will end up being used on the web, you should always make sure that the Profile is set accordingly.
Quick tip: once you change some of the other available settings (ex. the resolution, orientation, etc.), Illustrator will set the profile to [Custom], but it will continue to maintain the properties of the Web profile.
The Width and Height of the Document
Once you’ve chosen the right profile, you need to make sure that the Width and Height of your document, are declared using whole number values so for ex. 800 x 600 px
and not comma delimited ones such as 800,65 x 600,49 px,
otherwise your Artboard won’t be able to snap to the Pixel Grid, which will make some of your assets pixel imperfect.
This is usually the reason why when you want to add a background shape to your artwork, you can’t get it aligned to the center of the Artboard, since the Artboard itself isn’t occupying full pixels, which ends up leaving a small white space unoccupied.
A quick solution to this problem would be to use the Artboard Tool (Shift-O) to change the Artboard’s Width and Height values to whole numbers, and then drag it using the mouse so that it would snap back on to the Pixel Grid.
This options is usually adjusted to Pixels when you set up your profile, but you should always double check it, especially when you’ve worked on other projects that were intended to be used for both web and print since sometimes you might accidentally leave it set to something else.
The Align New Objects to Pixel Grid
At this point you’ve probably noticed that we have an Advanced tab that is currently hidden.
To change that, simply left click on the little right facing arrow, and Illustrator should now give you a bunch of other options.
The one we’re particularly interested in is the “Align New Objects to Pixel Grid”, since it instructs each newly created object to align its edges to the Pixel Grid, so that everything is as sharp as possible.
As with the Units, this option should be automatically set up if you choose the Web profile, but you should always double check it yourself.
3.2. Using Whole Number Values
A Pixel Perfect Workflow is all about the ability to create shapes that occupy full pixels off of the Pixel Grid. Usually the problem is that designers tend to ignore the Width and Height values of their shapes, since most of the times they create them using the old “click and drag method”.
What happens is that Illustrator creates these objects using comma delimited values, which makes it impossible for them to occupy whole pixels off the Pixel Grid.
To compensate, the software applies an anti-aliasing effect, to fill in the pixels that aren’t full occupied, which of course makes the shape look all mushy when zoomed in.
The secret, at least my secret, is to always keep your eye on the Width and Height value fields from the Transform panel, and try and create shapes that fully occupy the pixels from underneath.
3.3. Using the Transform Panel’s “Align to Pixel Grid” Option
Now at this point, some of you have probably noticed, that my panel has a couple of extra options, one of which is the Align to Pixel Grid.
As the name implies this function helps you snap any created object back to the Pixel Grid, by rounding up any decimal Width and Height values to whole ones.
To use it, you simply have to select your shape, and then press on it to make it active.
The way it works is a little tricky, since Illustrator approximates the values by looking at the position of your shape in relation to the Pixel Grid itself.
If it has misaligned pixels on every side (see the previous images) then it will round up the Width and Height values to the smallest neighbors, which in our case are 16 and 14 px, thus shrinking the shape towards its center.
If the shape has misaligned pixels on just two of its sides, then it will round up the Width and Height values by stretching the surface of the shape until it snaps back on to the Pixel Grid, which in this case are 17 and 15 px.
Quick tip: in order to be able to view all of the Transform panel’s options, you will have to click on the little down facing corner, positioned on the top right side, and enable the Show Options.
3.4. The Pixel Preview Mode
The Pixel Preview mode is probably one if not the most important tool when dealing with pixel perfect icons, since it allows you to view the actual fabric that you’re using to layer your design on.
With it enabled, you can easily see which shapes are perfectly aligned to the Pixel Grid and which ones need to be adjusted in order to do the same.
By default, Illustrator has it disabled, but you can easily turn it on by going over to the View menu and clicking on Pixel Preview or by using the Alt-Control-Y keyboard shortcut.
Quick tip: as soon as you enable this preview mode, Illustrator will indicate it’s active by adding a little check mark next to it in the View menu, and a short description within the name tab of your document.
Now the thing is, the Pixel Preview mode by itself isn’t all that powerful since as the name implies, it is just a viewing mode intended to show you the pixel structure that lies underneath your work.
The true magic happens when you use it in combination with the Snap to Pixel option as we will see in the following moments.
3.5. The Snap to Pixel Option
If the Pixel Preview enables you to view your artwork from a pixel perspective, the Snap to Pixel option helps you ensure that each and every shape that you create, perfectly snaps onto the Pixel Grid.
Now, by default Illustrator comes with it disabled, but you can quickly change that by going over to the View menu and clicking on it to make it active or you can use the Shift-Control-“ keyboard shortcut.
The advantage of using this function is that you can easily create your icon’s composing shapes by clicking and dragging, since Illustrator will always make sure they are perfectly aligned to the Pixel Grid, compared to the normal preview mode where creating your shapes using the same method always results in comma delimited values that force the shapes to misalign.
You can also adjust the length and height of most of your shapes using the same click-and-drag method, and they will continue to snap perfectly to the Pixel Grid, which for me is a really impressive feature, since I’m constantly adjusting my icons until I get them right.
If you find that Pixel Preview mode interferes with your creative flow, well you might want to disable it and checkout the Snap to Grid option.
3.6. The Snap to Grid Option
If you’re not particularly fond of the Pixel Preview mode, you can always rely on the custom Grid that we’ve set a couple of steps ago, which is so precise that will behave exactly as the Pixel Grid as long as you instruct Illustrator to snap your shapes to it.
Now some of you’ve probably noticed that the Snap to Pixel option transforms into Snap to Grid once you exit the Pixel Preview mode.
By default, it isn’t active, but once you turn it on, it will behave exactly as the pixel one, making sure that each shape you draw is perfectly aligned to the Pixel Grid.
Now remember this is happening only because we set up our Grid using the lowest values possible. If we were to use the default Grid that Illustrator comes with, then our shapes would snap entirely different from the Snap to Pixel option, since the Gridlines and Subdivisions would make them behave that way.
Wrapping Things Up
So there you have it guys, all the information that you need to know and use in order to make sure that your icons come out looking pixel crisp. Now, even though the examples were in regards to icons, you can use all the information to create any other piece of imagery, from illustrations to Ui projects since the principles and tools behave the same.
That being said, I hope you found this tutorial helpful, and if you have any questions, leave them comments section bellow and I’ll get back to you as soon as possible.