As a beginner, creating digital artwork intended for web use can sometimes get a bit frustrating, especially when you put a lot of time into a piece (be it an illustration, or maybe an icon), and then you suddenly realize that for some reason the final result didn’t come out all that crisp.
This is something that all of us dealt with when we first started out using Adobe Illustrator, so this is why I decided to create this short article to help you out if you're looking for solutions to this problem.
1. Vector vs. Bitmap
Before we start, I would like to shed some light on the different standards that you, I and everybody else working as a designer needs to be aware of when we assume this line of work.
There are two main types of images one will encounter while working as a creative tinkerer. One is Vector and the other one is Bitmap.
A Vector image is composed of one or multiple objects made up of a varying number of anchors and paths that are virtually scalable to any degree the user wants or needs them to be, a process which occurs without any loss in quality.
A Bitmap image, on the other hand, is composed of a series of fixed individual pixels aligned to a grid, which means that once an image is taken or created at a certain resolution, it will lose quality if its size is modified in any way (either upscaled or downscaled). This happens as the amount of pixel information (the actual number of pixels) is either reduced or forcefully enlarged, as some projects will require different sizes for different uses.
Although shrinking an image won’t have such a powerful effect on its quality, enlarging it will most of the times result in a blurry, pixelated file. There are some programs like Perfect Resize that use special algorithms for optimizing the clarity and detail level of images that need to be enlarged, but for me this further emphasizes the lack of an important property that Bitmap has in comparison to Vector: quality-agnostic scalability.
Both Vector and Bitmap are dependent on the medium in which they are used. As you probably know, a file can be displayed either digitally or printed out, the key difference being the way the image is reproduced. While printers are pixel agnostic, digital screens (PC monitors, phone and tablet screens, etc.) rely on resolution in order to compose and output any kind of images, whether it’s a Bitmap file or a Vector one.
This poses a delicate problem in the way Vector images relate to the pixel grid onto which they are laid out, hence the divide between pixel perfect artwork and choppy-like ones.
Luckily there are solutions that in my opinion should become standard rules to go by once you start working on any project, whether it is intended to be put on the web or printed out.
2. Understanding How Adobe Illustrator Works
Before you begin fixing something, you must first understand how that “something” works. Illustrator is a piece of vector-based software that uses mathematical algorithms to create and display the paths (whether they are closed or open) that we see, by using anchor points. These anchor points are simple points that you can manipulate in order to modify the size and shape of an object.
The anchors themselves are not all that important, but the way you position them and the object they form on your Artboard (snapped or unsnapped) is, and that is why in the following steps I will talk about all the little things that help us create pixel-crisp looking artwork.
3. Tweaking Illustrator’s Settings
By default, Illustrator comes with a bunch of options and settings, most of which are predefined, so that you can start working as soon as you have it installed on your machine. For most people out there these work just fine, but once your workflow becomes more detail-oriented you will find that you need to tweak some of them to get your designs where you want them to be. In the following steps, I will take you through some of the basic things that I like to adjust each time I have a fresh install of Illustrator.
Before we begin I would like to point out that these are personal preferences developed through a process of trial and error, and I will by no means label them as being “perfect” or “correct”—more like “suitable” to a pixel-perfect intended project. No one situation will fit the same pattern, but most times this will give you reliable solutions to adjust and adapt your workflow.
Step 1
Before we start adjusting our units, I want to take a second and compare the default value that Illustrator comes with (points) to the tweaked value we will be choosing (pixels) in order to see what sets them apart.
Point
From a typographic perspective a point (pt) is the smallest unit used for measuring font size, leading, indent, and the spacing before a paragraph.
Pixel
According to Wikipedia, from a digital imaging perspective, a pixel (px) is the “smallest addressable element” of a picture represented on a digital screen. As monitors and other device screens are meant to display images, we can also define a pixel as being the basic measurement unit by which we define the resolution of the device, and the size of the elements that are displayed onto it.
So, we have two units but how are they different? Many articles describe the two as being equal (1 pt = 1 px) but only on a 72 ppi display as 1 pt = 1/72 inch which means that once you have a higher ppi device, the ratio between the two starts shifting. If you look at the two from a CSS perspective, the W3 Org states that 0.75 pt = 1 px.
Apple wrote an entire entry on this in its iOS Developer Library page, trying to explain why using points as opposed to pixels helps when displaying images that will be rendered on lower and higher resolution devices.
“For example, on a device with a high-resolution screen, a line that is one point wide may actually result in a line that is two physical pixels wide. The result is that if you draw the same content on two similar devices, with only one of them having a high-resolution screen, the content appears to be about the same size on both devices.”
What they forgot to mention is that today, we have a significant number of manufacturers that have screens with different densities, which kind of makes the entire example a little fuzzy.
Now you might be wondering, which one should you choose? I tend to lean towards pixels. Why? Let’s just say it’s a personal preference, and since I’ve been mainly creating illustrative artwork, I’ve never heard people complain that an illustration ended up having a thicker outline on their iPhone than on their PC.
Also, pixels aren’t ppi dependent, and you can serve appropriate files to higher resolution devices by adjusting the ppi level when creating a New Document. Plus due to the large range of resolutions across different devices, I tend to believe that since 1 pt might be equal to 2 px on one of Apple’s devices, it might have a different value on a device from a different manufacturer that uses higher density displays.
The decision is up to you. If you find that pixels work for you, than head on to theUnits section of the Preference menu (Edit > Preferences > Units) and set both the General and Stroke values to Pixels. Since type is point-based, I recommend leaving it on its default value, as setting it to pixels won’t improve the clarity or the sharpness of the text.
Step 2
Once you’ve adjusted your units it’s time to tweak the Grid’s settings. I won’t talk too much about what a grid is as I have another article that explains everything you need to know about them. What I will say is that if you want to create sharp artwork then you should focus on setting up a super precise grid and working on it in collaboration with the Pixel Preview mode (which I will discuss more in a couple of minutes).
To change the default setup, go to Edit > Preferences > Guides & Grid where you will find two settings that you need to take in consideration: the Gridline everyoption and the Subdivisions one. I’ve been using 1 for both values for some time now and I found that it was the best fit for my process no matter which project I was working on. Yes, you will have to be more attentive but heck, if you’re like me you will try and become as detail-oriented as possible.
Step 3
For all of us arrow key pushers out there, Illustrator has a neat feature that allows us to move objects around with a higher precision by using the keyboard’s directional arrow keys. Since we want everything to be as pixel precise as possible, we need to adjust the value so that at each one key press the object will jump exactly one pixel in the direction we told it to.
The setting can be found under Edit > Preferences > General > Keyboard Increment.
This is super helpful when we want to move objects around quickly and precisely over short distances.
4. The Process
Until now, I’ve talked about some of the tweaks that you can use to make Illustrator more precise, but as examples usually teach more than simple function descriptions, I will show you the process that I usually go through once I start creating something intended to be used for the web.
Step 1
Everything starts with our Document. If we pay attention to some of its basic settings we can make sure our artwork has a strong pixel-perfect foundation on which we can start building.
Press Control-N (or go to File > New) and let’s take a look at some of the settings, starting with the Profile.
Since we usually focus on creating pixel perfect stuff for the web, the Profile should be set to Web. By doing so, Illustrator will automatically adjust the Units to Pixelsand the Color Mode to RGB (Red Green Blue).
If you take a close look at the Size of our document you will notice that both itsWidth and Height have round values (960 x 560 px) and not decimal ones (960.5 x 560.38). But why? Well if you create an Artboard that has a Width of 960.5 px there will be a section on the right that doesn’t occupy entire pixels off the grid, and will instead cover about half of their surface.
This is a no-no since we want Illustrator to Align New Objects to Pixel Grid. This function is really important as it instructs each newly created object to position itself correctly onto the Pixel Grid, making everything look sharp.
So if, for example, we have a 960 x 560 px rectangle and we want to align it to the center of our decimal sized Artboard, it won’t be able to do so since the right and bottom sides won’t cover the entire surface of their underneath pixels.
Some of you might think that this option should only be used with web intended content, but I think using it for print can add value as you will be working and positioning your anchors by a precise system, instead of flapping anchors all over the place.
Quick tip: In case you accidentally start a project that is based on a decimal value width or height, you can fix the situation by using the Artboard Tool (Shift-O) to change the values to round ones but you should try and get the sizing right from the start, so that it won’t give you a headache later on.
Step 2
Once I’ve made sure that my document is set up correctly, I usually start working on my elements, making sure that each and every one of them uses round values for the width and height.
As I demonstrated in the previous step, the same cover-the-entire-surface-of-the-pixel rule applies here too. If I want to create a sharp-looking shape, for example a square, I need it to have fixed values (for example 200 x 200 px), so that each side ends up covering exactly the same pixel number off the Artboard. By doing so I can create a shape that can be zoomed in at any percentage and still look crystal clear.
If my square had been 200.4 x 199.9 px, Illustrator would have started applying an antialiasing effect onto the right and bottom sides since these wouldn’t cover an entire pixel, and by doing so, my element would have ended up looking fuzzy.
Luckily for us, the good people over at Adobe offer a way of fixing these sorts of issues, by implementing the Align to Pixel Grid function found on the bottom side of the Transform panel. If you select the badly sized object and enable the Align tooption, it will automatically change the square’s Width and Height to 200 px as this is the closest round value identified by the software.
Quick tip: If the option isn’t visible, that’s because you need to activate it by clicking on the right down-facing arrow of the Transform panel and selecting Show Options.
Step 3
These are by far the most important features that Illustrator has to offer when it comes to creating pixel-perfect designs. Even though they both provide a similar function, there are a couple of key differences that set the two apart.
Snap to Grid
As the name implies, this option is directly related to the Grid that you have set up. The function can be activated by going to View > Snap to Grid (Shift-Control-”)and it basically instructs every single object from your Artboard to snap its edges to the nearest gridline intersections.
Snap to Pixel
The Snap to Pixel option behaves a little bit differently, as it does the snapping of the objects to the Pixel Grid which can’t be modified. The function is hidden until you switch to Pixel Preview (Alt-Control-Y) when it changes from Snap to Grid toSnap to Pixel.
Though different, you can make the Snap to Grid act identically to the Snap to Pixel if you Gridline every 1 px, at a Subdivision of 1, which basically means creating the smallest grid possible, which is in fact the same size as the Pixel Grid.
Step 4
Used in collaboration with the Snap to Pixel option, this preview mode will be your biggest helper in the process of creating pixel-crisp artwork. It allows you to zoom in at the pixel level, and see exactly which parts of your design need touching up. I use it all the time, and it has helped me a lot. As I’ve already mentioned, the tool can be activated by going under View > Pixel Preview or by using the Alt-Control-Yshortcut.
Step 5
Once you're finished with the creative process, take a little bit of time and make sure that all the anchors are correctly snapped to the Pixel Grid. When you do find anchors that have jumped off, simply grab the Direct Selection Tool (A), select the appropriate anchor point, and then position it back to its nearest gridline intersection.
You might think that using the Align to Pixel Grid option takes care of these sorts of problems, but from my experience, sometimes it tends to fail, and when it does I always rely on my trusty Direct Selection Tool (A) to fix them manually.
Step 6
The Bezier Handles are an important part of any vector software out there as they allow the user to modify the shape and orientation of any path (be it closed or open). The problem that most of beginners out there face when dealing with handles is that they usually tend to drag them all over the place, and by doing so almost always create shapes that look choppier.
The secret is to make sure that the handles are dragged (while holding down Shift) either vertically, horizontally or at a 45° perfect diagonal, in such a way that their endings are aligned to one of the gridline’s intersections.
Also, if the path you are tracing has a flat side, try to drag the handle so that it falls exactly onto the top section of that side without going over it.
5. Dealing With Resizing
When dealing with Pixel Perfect Artwork, resizing can be a real pain. If you try to select the object and drag one of the Bounding Box’s sides, it will enlarge or shrink it, but in the process of doing so it will also break things apart.
A solution would be to use the Scale option (right click > Transform > Scale > Uniform), and use 50% increments, so values like 150%, 200%, 250% for enlarging and -50% for downscaling to half of its original size.
This is why you should always plan ahead, so that you know the exact sizes that you need to design for.
Quick tip: Even with this method you will see problems, especially when you have a large group of elements with round corners and curved paths. When that happens, you will have to ungroup and then adjust different elements at a time.
6. Dealing With Rotation
When you have rectangles, rotating them is fairly simple, as you can snap their anchor points back to the nearest pixel gridline. But what about rounded corner shapes, or curved paths?
This is probably the most annoying part when aiming for pixel perfect objects, since in most cases it’s almost impossible to snap the anchors back to the Pixel Grid as it will surely affect the overall shape of the object. Usually when I have a rounded rectangle that needs rotating I apply the rotation and then leave the object as it is.
That's It!
If you follow these quick tips, you should be having no problems in creating beautiful crisp artwork ready for any device.
