Tips and Tricks to Design with Pixel Perfection in Adobe Illustrator

  •  11 Comments

Ever since Adobe Illustrator was launched, people wondered if they could make the transition and change the way they create and develop pixel-based artwork. As you know, before CS5 using Ai for vector pixel work was a kind of hard/clumsy process. Why? Because as opposed to Photoshop, which is a raster based software (which deals straightly with pixels), Illustrator is a vector program (that deals with points, lines and curves all mathematically drawn). In Illustrator’s early days, it wasn’t perfectly adapted to deal with the raw force of pixels. Luckily over the years things have changed for the better, and with the most recent CC version, Illustrator is becoming the “go to” tool for designers with pixel perfection in mind.

There are a lot of articles that show the ins and outs of setting up and using Illustrator, but unfortunately there is some fragmentation of information. Here, I’ll share my prepping process that has proven to work great.

Before we begin I feel that I need to make sure that all of you reading this article get to understand that creating pixel based artwork as the terms suggest is a process of creating for the digital medium but things don’t stop here. At this point you might say “OK so when I want to design stuff for digital displays I’ll go this way and for print I’ll just use the regular settings I got used to.” Not at all. In most cases (there are some situations where you won’t want to use this approach: hand drawn artwork, illustrations with more organic curvatures, etc.) the best way to design for both mediums is to embrace a pixel-based process.

Hypothetical situation: You’re working on a project that involves creating for digital and print mediums. You might think, I’ll make two different documents, one in which everything is aligned to a pixel grid (the stuff you need displayed digitally) and another one in which everything is loose to float all over the place (stuff that has to get printed). Well that could work out just fine, but why not try and do them both as intended for digital.

As you might know, the only difference between digital and print design (besides the RGB vs CMYK) is the quality of the raster effects, which you can easily change at any point by going to Effect>Document Raster Effects Settings and choosing a higher value such as 300ppi (compared to the lower 72ppi recommended for the screen). So you could just create a crisp design and just as well print it, after you make some color compensations. Simple as that.

Now that I’ve pointed that out, let’s see how we can prep for pixel perfection.

Step 1: Understanding the “Pixel Grid” Concept

You’ve probably heard of “align to the pixel grid” and some of you might be wondering what exactly that is. Every digital display is pixel based, which means it has both the height and width set in a pixel value. When working with Illustrator, to align an object to the pixel grid means to tell the program that it will occupy a specific position on the artboard but more important, its anchor points (that define the form) will be set at the intersection of 4 pixels (the gridline intersection). The difference between an object that is aligned and one that is not can be easily seen if it has rounded corners and curves but most important when working with small artwork that needs to look crisp.

Here you have an example of two simple rectangles (both the same size), onto which I’ve zoomed in to demonstrate the sharpness of pixel aligning. As you can see while the left one looks super crisp, the one on the right is fuzzy, looking as if it was anti-aliased.

Aligning rectangle right

So what went wrong? This did.

Aligning rectangle zoom

As you can see now, each corner of the left rectangle perfectly aligns at the grid intersection, whilst the right one tries to align to the center of an actual pixel, which in the end produces a fuzzy effect. This is something that can be easily explained by the fact that a point, or object can’t occupy half a pixel, or a certain part of it and look crisp. As the actual rectangle is composed out of pixels, each and every one of them must occupy an entire pixel off the grid so that things get aligned properly and end up looking sharp. If you were to print the two rectangles, you wouldn’t see any difference because printers aren’t pixel dependent.

What happens if you have curves? When it comes to curves, Illustrator applies an anti-aliasing process that in the end gives it a clear look. As with any other object that you align to a pixel grid, anchor points (start and ending) that form the curve need to be aligned to the grid, too.

Let’s take the first step to creating artwork that is intended to look as crisp as possible.

Step 2: Set Up a New Document

There are three key aspects for when setting up a pixel perfect document:

New document settings

Document size (width and height): When setting dimensions of the artboard always input whole values and never numbers followed by a comma (for example the value 200,58px for the height) – if you do set comma delimited values, you will end up with an artboard that has (depending on where you input the value: height or width) it’s lower side or right side protruding toward the interior of a pixel instead of the intersection of four different pixels.

Artboard with decimal values

Quick tip: If you accidentally set up a document with wrong values, you can always modify it using the Artboard Tool by pressing Shift+O and then Enter. A new dialogue box will pop up letting you modify both the width and height of the artboard. After you set the right values, you need to go into Pixel Preview Mode and make sure the artboard is correctly aligned to the grid. If you find it’s not aligning well, grab the Artboard Tool again and click and drag using the mouse until it snaps in place.

Modify Artboard Dimensions
  • Units: Always make sure this is set to “pixels”
  • Align New Objecs to Pixel Grid checkbox: Checked

Quick tip: The Align New Objects to Pixel Grid will only work as the option suggests on newly created objects. If you copy and paste an object from a file that had this option unchecked it will not align until you set it to do so.

Step 3: Adobe Preferences Settings

Here we will go through some basic settings. In order to get the Preferences Window,  go to Edit>Preferences> and click General. You should now see a window, with subsettings and tabs. We will focus on the following:

  • General Settings
  • Units
  • Guides & Grid
Preferences Settings

3.1. Keyboard Increment Value Settings

Most of you have used arrow keys in order to move artwork around. But did you ever wonder about the actual value of one arrow movement?

With the Preferences Window open, at the General Settings Tab, you can identify the Keyboard Increment setting right at the top.

General Settings

Enter 1. This small value will allow us to move objects by a value of one pixel, making sure they will always stay aligned to the pixel grid.

Quick tip: The keyboard increment uses a pt value instead of a px value. Don’t worry, we will change that next!

3.2. Setting Up Units

The next important step is to make sure General and Stroke units values are set to Pixels. Navigate to the Units tab (in the Preferences Window) and from the dropdowns make the proper selection.

You might be wondering why we didn’t do the same for Type. I found that as hard because fonts are usually hard to align to the grid. Your best option is to leave it set on points. Also, it would be really weird to get the right dimensions for example if you’re wireframing for an iOS or Android app, as 12px ≠ 12pt.

Units Settings

3.3. Guides & Grid

The Grid is probably the least explained setting, but one that is really important to get right.

The Grid allows us to position things on the artboard. But how do values work? If you take a look at the options at hand, you will see that we have the possibility to set a value for the distance at which the gridlines (vertical and horizontal lines) appear but most important the number of subdivisions it has.

Grid Settings

To make things more understandable, let’s say you want to Gridline every 1000px and assign four subdivisions to it. That means that at every 1000px (both horizontal and vertical) you will set a line, which will form a square, that will have four subsquares. Each subsquare will have a width and height of 250px (1000/4=250). Pretty logical, but what does it mean for our pixel perfect design?

Quick tip: In order to be able to see the actual grid you need to go to View>Show Grid (Ctrl+”).

Assuming you have a artboard of 1000 x 1000px, and you create a 250 x 250px square, and most important that you have the Snap to Grid on (View>Snap to Grid) if you try to move the little square around using your keyboard, you will see that for each direction tap you give it, it will jump exactly one subdivision of the grid.

Grid Explanation

But this is kind of a perfect situation, where the artboard is a perfect square, width and height fit the Grid, and most important the blue object that we drew is the exact same width and height as the Grid’s subdivision. How will these settings stack up against a different scenario? Pretty much they won’t. With Grids you have the option of setting them up differently for different jobs.

There is however a universal solution, that of using a complex Grid that gridlines every 1px and has a subdivision value of just 1. I guarantee that by using these settings you will have total control on your objects and everything will snap like crazy to the pixels on your screen.

Step 4: Understanding the Snap to Pixel Function

One of the most important and helpful tools in Illustrator is the Snap to Pixel function. The option is available once you’re in Pixel Preview mode – if not it will appear as Snap to Grid as you depend on the grid for alignment.

You can activate it by going to View>Snap to Pixel (Shift+Ctrl+”), and what it does is basically instruct any new object to snap its anchor points to the nearest pixel gridline intersection. For example, if you leave this option disabled, whenever you move an object around, it will position itself inside a pixel square, which is exactly where it shouldn’t be. However, if you accidentally moved something around and you’ve noticed it isn’t snapping correctly, select the object, activate the function and then move it back and forward and it should quickly snap back in place.

Step 5: The Magic of Pixel Preview

Pixel Preview is the ultimate resource for providing pixel perfect designs. You can find it under View>Pixel Preview (Alt+Ctrl+Y) and once you turn it on, you can zoom in on your artwork and check if it’s aligned properly. I highly recommend you use it.

Activate Pixel Preview

Step 6: Correct Use of Measurements

As I pointed out in Step 2, whole values are a must even for objects. If you start building shapes, and one of them has a whole width but a comma delimited height its bottom will never align properly to the grid, making your design choppy or fuzzy depending on the form itself.

If you accidentally manage to get an object with a weird value, it most of the cases you can fix it by adjusting it. Let’s say I created a 60 x 60.68px square.

Comma Delimited Values

As you can see the bottom edge is completely misaligned. What we want to do is first disable the Constrain Width and Height Proportions, change the height to a whole value of 60px and then using the keyboard move the object up and down once to get it back in place. Problem fixed.

Disable Constrain

Another quick insight, if you start using even values (ex. 2, 4, 6 etc.) try and make all the other objects even. The same rule applies if you build around uneven values (ex. 1, 3, 5 etc.), Why? Well if you have a 20 x 40px rectangle and create another 5 x 20px object and then try to both vertical and horizontally align them you will see that because one is even and one is not, they won’t align properly. So just try to keep a balance between the dimensions you choose to work with and everything will be fine.

Even vs Uneven object dimensions

Step 7: Dealing with Objects From a Non-Pixel-Aligned Document

One of the biggest problems when working with different files is that you will find that there are a large number that are designed with a non-pixel approach. There is a solution. Simply copy the desired object(s) to your working artboard, select all objects using Ctrl+A and from the Transform Panel (Window>Transform) check the Align to Pixel Grid option.

Note: This will only work on artwork that has whole values. For situations where you have comma delimited values, you will need to manually tweak them (using the steps above) in order to get them properly aligned.

Align new objects

Conclusion

There you have it, seven simple steps to ensure your artwork looks pixel crisp on any display. I hope you enjoyed this tutorial and learned something useful along the way.

Newsletter

11 Comments
  1. Justin White Nov 30, 9:38 pm

    “I’ll make two different documents” – Worst Idea Ever. That being said.
    Illustrator should adjust sizes when snap to pixel, or align to pixel grid is enabled. When you work with align to pixel grid, everything looks fine until you go to check the dimensions of an object. Your perfectly aligned and dimensioned rectangle is actually positioned at coordinates 12.134 x 32.743, with dimensions of 120.345 x 64.234.
    With this in mind, it would be nice to also adjust/nudge/round-up to the nearest whole number. For example, he rectangle above, with Align To Pixel Grid enabled, should be positioned and dimensioned as follows.

    x=12, y=33 w=120px h=64px

    Let’s recap.

    Current align to pixel grid implementation, where perfect rendering is seen as in your example.
    x=12.134, y=32.743 w=120.345px h=64.234px – But the rectangle LOOKS perfect.

    The way it should be, and for some reason IS NOT.
    x=12, y=33 w=120px h=64px – Rectangle looks perfect, because it is perfect.

    I can provide countless examples of work, were using anchors and handles to modify dimensions has caused these decimal values to appear. It’s a PITA but I live with it. I also use tools like Sketch by Bohemian code where snapping is permanently enabled. It does exactly what I’m describing here.

    Reply
    0
    • Andrei Ștefan
      Andrei Ștefan Dec 1, 4:24 pm

      Hi Justin,

      I have to say, I’ve just read your comment and I was scrolling the article and your remarks side by side but I can’t figure out where did you got those numbers for the xy coordinates and w/h.

      The actual sizes of the elements used (the black rectangles) are: 26×140 px both with an artboard of 200x200px which makes the first pixel aligned rectangle positioned at x: 83px and y: 100px while the non-aligned one positioned at x: 114.943px, y: 100.438px which are indeed comma delimited values (but that was the point to demonstrate).

      In regards to the awkward handling that Illustrators seems to undergo, I can confirm that some times the values even if they are round, if you double the size of the grouped objects (using the scale tool) to 200% it might bust some of the alignments which in the end will force you to go back, check every corner and nudge them back so that everything ends up perfect.

      For the first comment regarding the double document setup, I personally know a lot of people that work this way, simply because they find it hard to adapt to the more time consuming process, some even saying that pixel alignment might end up limiting their creative freedom.

      That being said, I think that when it comes to the different users out there, every single one will probably have a different approach on a given project, or use of a tool.

      Reply
      0
  2. Sam Dec 3, 9:29 pm

    What about working with text in pixel based documents? I’ve been using the rasterize effect with 72 ppi, rgb, art optimized in order to see what kerning will look like and to get straight lines snapped into pixels when possible. Is this recommended or is there another, better way?

    Reply
    0
  3. Andrei Ștefan
    Andrei Ștefan Dec 4, 2:34 pm

    Hi Sam,

    To be honest, I don’t think that a universal solution exists, due to the fact that we have tons of fonts (from sans serifs to serifs and scripts).
    If you take Myriad Pro for example, it’s mostly composed of straight lines with a curvature here and there. You might get parts of it snapped but I doubt you can make the entire thing pixel perfect.
    There are situations where if the text part is small enough, you could actually build the letters using primitive shapes.
    Starting with Ai5, you have specific antialiasing options for text, you can find this under the Character Window (WINDOW>TYPE>CHARACTER) by allowing the Show Options. The option should be located on the lower right corner and have a double “a” icon. Once you click on it you should 4 values: none, sharp, crisp and strong. Try playing around with these options depending on your font and see how things end up once exported.
    Another approach would be to create the illustration without any text in Ai and import it into Photoshop as it should handle text rendering a lot more better.

    Hope that helped!

    Reply
    0
  4. Tomás Antunes Dec 30, 5:30 pm

    Precision is definitely important.
    I like to darken up the grid and use 8 subdivisions.

    Reply
    0
  5. Richard H Feb 20, 3:21 am

    Andrei,

    This is a great article. I’m a longtime Illustrator user (since v5!) and I’ve been trying to learn how to use for website development since I am so comfortable with the tool. I will keep this list by my side as I learn the ropes of this workflow.

    I am wondering what is your workflow for

    1) exporting individual elements for the web (do you export an artboard and then slice it up on photoshop? or ??)
    2) getting specs for css.

    Thank you so much!

    Reply
    0
    • Andrei Ștefan
      Andrei Ștefan Feb 20, 10:52 am

      Hi Richard,

      Happy to hear you found the tutorial interesting and useful!

      To answer you question, if I have a larger number of elements on my Artboard I usually position them on different layers and when I need to export one of them I simply hide all but the layer I am interested in and then use the Object > Artboard > Fit to Object option to scale the artboard down to the size of my element (after I save the element I undo the artboard resizing so that it won’t get saved).

      http://i61.tinypic.com/1128os1.png

      For the second question I didn’t quite understood what you wanted to achieve

      Reply
      0
  6. Richard H Feb 20, 11:02 am

    Andrei,

    That is an awesome answer! Thank you. I’ve been using Illustrator all these years and never even saw that option. Brilliant.

    The second question has to do with elements that are drawn or placed with CSS. I was wondering if you extract any CSS values to make any elements (like background boxes) or to place them. Do you measure out the dimensions and hex codes and then enter them by hand when coding? I’ve heard that in workflows in other tools that its possible to get some of those kinds of values to generate automatically and was hoping Illustrator had something along those lines.

    Thanks so much for your fast reply. Illustrator is my tool of choice and I am really excited to use it for web design!!

    Reply
    0
  7. Richard H Feb 20, 11:06 am

    I just did a little research and found this link which outlines how to extract CSS values. Apparently a lot of people use Illustrator for web design :) You get all the credit, Andrei for waking me up to this fact.

    http://www.adobe.com/inspire/2014/02/illustrator-web-designer.html

    Thank you!

    Reply
    0
    • Andrei Ștefan
      Andrei Ștefan Feb 20, 1:19 pm

      Hi Richard,

      Haha, you’re welcome but I can’t get any props for the last question as you found the answer by yourself with the use of some google magic.

      Reply
      0
  8. Austin Jan 5, 9:20 pm

    I apologize if I missed something(I am really new to using Illustrator) but I am curious about one small issue I’m seeing on my art board. I followed your directions for setting up a new board properly but when I turn the grid on, it appears the bottom and right edges are located just inside the grid lines while the top and left edges appear to sit on top of the grid lines. I’m not sure if this is just how it’s supposed to be or if there’s something I am missing. I really appreciate your help and this article has already given me a lot of much needed insight.

    Thank you

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters

Download Web Design Freebies & Resources

psd

Please Confirm Your Email!