Life's easy with Medialoot.

Unlimited access for only $14/mo.

How to Get Pixel-Perfect Designs in Adobe Illustrator

How to Get Pixel-Perfect Designs in Adobe Illustrator

Pixels are not what most designers are thinking about when they launch Adobe Illustrator, but there are some pretty awesome things Illustrator can do with them. By default Illustrator is set up to be a resolution independent vector drawing and print layout tool — in short, not for pixels — but in this tutorial we will go over a few techniques which can add pixel-perfect design to it's list of uses.

As regular Medialoot visitors will know, I have previously posted a few articles discussing the advantages of using Fireworks instead of Photoshop for certain design tasks, this tutorial will hopefully do something similar for Illustrator by demonstrating it's widely unknown ability to work well with pixels.

Background

vector application icons designed in adobe illustrator

The inspiration for this post came to me very recently whilst working on a premium icon pack called Vector Application Icons, my aim for this set of icons was to create a collection of monochrome icons for web applications and other uses such as toolbar icons in iOS apps. The icons needed to be fully scalable for flexibility, so using vectors was a must, but I also wanted them to look crisp and sharp at tiny sizes (all the way down to 16x16px).

Photoshop could have done this, but its vector drawing abilities are not the most intuitive around, and Fireworks would have worked okay too; in fact, this is what Fireworks was designed for! But honestly, for me neither of them can compare with Illustrator when it comes to super fast, pure vector drawing.

So, with this in mind, I started reading up and testing techniques for working with pixels in Illustrator, and these are the top 3 techniques that I learned and now want to share with you guys.

Technique 1: Setting up a pixel based document

Step 1

Open up Illustrator and create a new document as usual (Ctrl+N)

Step 2

Underneath the Units drop down menu select Pixels as your unit of measurement, any values currently in the Width and Height fields will be converted to pixels. This usually results in a figure with a decimal point, so for example 100mm would become 283.46px, this is no good if we want a pixel perfect document though because there's no such thing as '46% of a pixel', there can only really be 0% or 100%, so let's just change this value manually to an absolute amount, in this example that would be 283px rather than 283.46px.

working with pixels and pixel grid in illustrator

Step 3

If it is not already expanded, click the little arrow to the left of the Advanced label to display 3 extra fields, these are the secret fields that let you set up a document centered around pixels.

working with pixels and pixel grid in illustrator

Step 4

Underneath the Color Mode drop down menu select RGB, as you should hopefully know design for screen always uses a RGB (red, green, blue), and design for print should use CMYK (cyan, magenta, yellow, and black).

working with pixels and pixel grid in illustrator

Step 5

The next field underneath Advanced is Raster Effects, this determines the resolution that the document will render effects such as Drop Shadow, Feather and Glow. Because we are working with pixels for screen output, there is no need for this to be anything higher 72ppi, it will just take longer to render effects.

Step 6

The next field underneath Advanced is Preview Mode, there are 3 options in this drop down menu, one of them is Default, which is the standard behavior in Illustrator, another is Overprint, which previews the document as it will appear when printed, but as you may have guessed by now, the option we are interested in is Pixel.

working with pixels and pixel grid in illustrator

Where as the default behavior in Illustrator is to display crisp sharp lines no matter how much you zoom into the document, selecting Pixel Preview Mode will display individual pixels if you zoom in beyond 100%. So, instead of perfectly smoothly lines, you will see pixelated images, this might not sound appealing but being able to see the pixels is essential for creating "pixel perfect" designs.

Step 7

Finally, you should see a check box at the bottom of the window that reads "Align New Objects to Pixel Grid". Selecting this option will make all new objects drawn within Illustrator snap to a pixel grid. Bare in mind though that this option only applies for new objects, not objects pasted into the document from elsewhere.

Technique 2: Snap to pixel when transforming objects

I mentioned in the final step of the last technique, that setting Align New Objects to Pixel Grid only works on newly created objects, drawn within the document, for example if you use the Rectangle Tool and draw a rectangle on the canvas it will align the edges of the shape the nearest pixel on the canvas (no half pixels) and set the width and height of the shape to the nearest absolute pixel values (no decimal points).

However if you want to modify your shape later, you run the risk of un-aligning that new shape from the grid, and likewise if you copy and paste a vector shape from another source into your document, it will not adjust the shape automatically to snap to the pixel grid (with good reason).

The solution lies not under a contextual menu, or in the Align tool palette where you may expect it, but within the Transform Tool.

Step 1

First make sure you have the Transform window open (Window>Transform)

working with pixels and pixel grid in illustrator

Step 2

Select an object, either drawn in Illustrator or pasted from another source.

Step 3

You may notice the checkbox labelled Align to Pixel Grid tick this if it isn't already. If your shape was drawn in Illustrator and is already aligned to the pixel grid, then any transformations you now apply to it with the Transform Tool will not break the alignment.

working with pixels and pixel grid in illustrator

If your object was pasted from another source and is not aligned to the pixel grid then you will notice as soon as you tick Align to Pixel Grid, the object transforms, and probably becomes much sharper than it was before, the only side effect to this technique is that adjusting objects to fit to pixels will alter the original paths slightly, sometimes giving undesirable effects with smaller shapes.

working with pixels and pixel grid in illustrator

Technique 3: Convert an existing document to pixels

The techniques so far assume that you are starting a new document and that you will be drawing new objects or pasting the occasional shape from other sources. But what if you have an existing document such as a website design or icon that you want to make pixel perfect without leaving Illustrator? Simple, just follow these few steps to convert existing default Illustrator documents to pixel based Illustrator documents.

Step 1

Firstly, if your document is not currently using pixels as it's default unit of measurement, secondary click on the document rulers (ctrl+r to show rulers) or go to File > Document Setup... (ctrl+alt+p) and change the unit to Pixels.

working with pixels and pixel grid in illustrator

Step 2

Now, let's turn on the pixel preview, go to View > Pixel Preview, now when we zoom in higher than 100% we can see individual pixels, rather than smooth vector lines and shapes, as mentioned in technique 1 the only way to get pixel perfect designs is to actually see the pixels.

working with pixels and pixel grid in illustrator

Step 3

To change the Document Raster Effects Settings you can find the settings underneath the Effects menu. Change the Resolution to 72ppi, as we are working with pixels for screen not print, and anything higher is not necessary.

working with pixels and pixel grid in illustrator

Step 4

Now we've successfully modified our document and set it up for pixels, but our existing content is not yet aligned to our new pixel grid, never fear, we can resolve this with one fell swoop.

Open the Transform (Window>Transform) window if it isn't already and make sure all layers are visible and not locked, then Select All (ctrl+a), and tick the Align to Pixel Grid option in the Transform window.

Before you do this you may want grab some popcorn and watch your document intently while you tick the box. As if by magic, you should see your document instantly get sharper and crisper as it aligns itself to the pixel grid and gets rid of any pesky decimal points in pixel values.

Conclusion

Whilst Illustrator is most suited to vector drawing and print work, it does have the ability to work extremely well with Pixels, and this is a good thing because it closes the gap a little between the enjoyment and flexibility of drawing with vectors and the preciseness and crispness of working with pixels for screen.

Some users may already be familiar with Illustrators' pixel ability, whether it's by selecting the "Web" preset when you create a new document or through experimentation and years of experience, so I'm by no means claiming to have uncovered anything new in the software here, but hopefully with these tips at least some of you can say you've learned about a new side to your old friend Illustrator, that you didn't know it had.


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Comments

  • Reply »
    Gabe

    Gabe

    Too bad this doesn’t work in CS3

    May 12, 2011 at 9:42 pm
  • Reply »
    Tony Thomas

    Tony Thomas

    Hi Gabe

    Yeah, I should have mentioned this tutorial was written with CS5, do you mind sharing which parts in particular don’t work in CS3?

    I can’t seem to find much about these features in version histories and change logs online.

    Thanks!
    -Tony

    May 12, 2011 at 9:54 pm
  • Reply »
    Think360 studio - Web Design Company India

    Think360 studio - Web Design Company India

    As a beginner I learned a few good techniques, thanks.

    May 18, 2011 at 5:42 am
  • Reply »
    Gareth

    Gareth

    Great article!

    How do you align to grid in CS4? This is not an option in the transform window, there must be another way?

    May 30, 2011 at 11:22 am
  • Reply »
    Tony Thomas

    Tony Thomas

    Hi Gareth

    Unfortunately, I never used Illustrator for pixel based designs previous to CS5 so I’m not actually sure, if you can set up a “align new objects to pixel grid” document in CS4 it might snap points to the nearest pixel when you edit them with the pen tool.. not ideal but would achieve the same effect (with a bit more work)

    Jun 15, 2011 at 8:04 am
  • Reply »
    Gareth Redfern

    Gareth Redfern

    Ah yeah I don’t think you can, I am due an upgrade soon though!

    Jun 15, 2011 at 8:38 am
  • Reply »
    PS

    PS

    call me crazy, but what do you do AFTER this? i have my pixel perfect designs in illustrator CS5. but, making for the web. so, i cut and paste into photoshop - blurry. no more pixel alignment. i open them up in photoshop. again, blurry. i have tried making even number boxes around art, and odd numbered boxes. even in the vert, odd in the horizontal, and vice versa.

    over and over and over again, some elements are blurry, and not pixel aligned. without being able to slice up designs, this feature just seems like a bad joke :-(

    Jun 16, 2011 at 11:40 pm
  • Reply »
    Paweł P.

    Paweł P.

    Good!

    Jun 24, 2011 at 4:52 am
  • Reply »
    Kapri

    Kapri

    That’s going to make things a lot eaiser from here on out.

    Jun 27, 2011 at 6:46 am
  • Reply »
    Todd Cranston

    Todd Cranston

    Didnt know that, so thanks, so much to learn. Cheers Todd.

    Jul 14, 2011 at 7:17 pm
  • Reply »
    Roy Abbink

    Roy Abbink

    @PS: Just export your file from Illustrator to a PSD file. Make sure you hit “72 ppi” and turn off anti-alias.

    Aug 29, 2011 at 7:58 am
  • Reply »
    Tom

    Tom

    I followed the steps above and made a one pixel box. I have my keyboard increment also set to 1px. When I hit any of the arrow keys to move the box one pixel, it moves 2. I thought the issue was with the keyboard but when I turned on pixel preview it shows my 3x1 pixel bar blurry. I don’t think that should happen if it is pixel perfect. I think something is wrong even though I followed the tutorial above. Any thoughts?

    Sep 30, 2011 at 6:39 pm
  • Reply »
    PS

    PS

    @Roy Abbink thanks! that works. funny cutting and pasting doesn’t, but this works well enough. frustrating!

    Sep 30, 2011 at 11:46 pm
  • Reply »
    nav

    nav

    great technique

    Oct 31, 2011 at 2:36 pm
  • Reply »
    John | Graphic Design Brisbane

    John | Graphic Design Brisbane

    I’ve heard of this technique - but so good to find a step by step tutorial. Thanks for sharing.

    Nov 24, 2011 at 1:19 am
  • Reply »
    RC

    RC

    Is it possible to take art work from photoshop to illustrator then use this pixel perfect technique?

    Apr 19, 2012 at 8:27 pm
  • Reply »
    dirkjan

    dirkjan

    Thanks, good tip! I really like the flexibility illustrator offers but was still looking for ways to make my designs snap to the pixels better. Now i’m there! Thanks for sharing!

    Apr 24, 2012 at 4:20 am
  • Reply »
    Trevor

    Trevor

    Thanks for this article. It helped me tremendously, to solve a lot of mysteries. I like using illustrator to the max of it’s potential. This article gave me more insight and the technique described worked perfectly. Thanks again.

    May 26, 2012 at 12:35 pm
  • Reply »
    djwd

    djwd

    I think I love you. I’ve been using illustrator for my web designs for a long time and never discovered this. I was thinking to switch to photoshop like most of the people do because of pixel precision problems, but now I don’t think I will.

     

    Jul 2, 2012 at 2:13 pm
  • Reply »
    Chastity

    Chastity

    I wanted to thank you for this good read!! I certainly enjoyed every
    bit of it. I have got you book marked to look at new stuff you post…

    Sep 14, 2012 at 10:59 pm
  • Reply »
    Paul

    Paul

    Really gr8 idea. Very useful….

    Oct 2, 2012 at 9:33 pm
  • Reply »
    Lucas

    Lucas

    Great article but i have one problem. When i make a 16 x 16 px icon the PSD file is realy bad. Can somebody help me?

    Dec 17, 2012 at 4:56 am
  • Reply »
    AL Luckow

    AL Luckow

    This combines a lot of stuff that took me ages to figure out. My only regret is that I didn’t see this earlier. Illustrator is great for designing UIs and this post demonstrates a lot of great techniques for that.

    Dec 26, 2012 at 2:48 pm
  • Reply »
    Me

    Me

    This is super helpful and very comprehensive! Thanks a lot!

    Jan 19, 2013 at 6:40 pm
  • Reply »
    greg

    greg

    Wow great! Exactly what I was looking for! I knew the feature existed but I wasn’t sure the result would be satisfying so I’d never tried it before. The “align to pixel grid” thing used to annoy me big time, and now it’s my best friedn :)

    Mar 20, 2013 at 8:57 pm
  • Reply »
    korhan

    korhan

    I already tried those and I still get half pixels with illustrator. But I found this solution; using Fireworks.

    Apr 15, 2013 at 7:47 am
  • Reply »
    Cameron

    Cameron

    This was great. I don’t use illustrator a lot because of reasons like this. I just updated our company logo and made alternative, pixel perfect sizes. Thanks

    May 2, 2013 at 10:20 am
  • Reply »
    Rob

    Rob

    So frustrating - I have a beautifully crisp vector logo that I want to use on my website so I was following steps from “Technique 3: Convert an existing document to pixels” onwards. However, when I hit the “Align to Pixel Grid” option I saw no improvement in my logo. Any chance I could send you the file to look at?

    Jun 27, 2013 at 8:12 pm
  • Reply »
    Top Vectors

    Top Vectors

    I think illustrator is far superior to PS for crafting pixel perfect icons, if everything is set up correctly as you mentioned in you post. For some reason in takes me a lot longer to work with and switch between the tools in photoshop, which is a real drag on productivity.

    Jul 27, 2013 at 4:02 pm
  • Reply »
    Kawar

    Kawar

    Excellent Guide!!!
    Thank you Tony Thomas for helping me understand why I was getting pixelated png files… :)

    Aug 22, 2013 at 6:50 am
  • Reply »
    Abdul

    Abdul

    Awesome!!! Worked for me, I was getting really annoyed by illustrator not exporting sliced images in correct dimensions, technique 3 made my day.

    thank you :)

    Dec 8, 2013 at 4:11 am
  • Reply »
    Gulshan kumar

    Gulshan kumar

    Pixel perfection is very important in vector graphics, and your article is really helpful for the graphic designers who works in illustrator.

    I get very usable information to this article.

    Thanks Tony.

    Jan 1, 2014 at 5:40 am
  • Reply »
    Hana

    Hana

    This is great!
    The only thing is that is leaves the half pixelated and half not.
    The clean straight lines are great but as soon as I have a curve, it looks weird..

    Can you please help?

    Mar 3, 2014 at 2:00 pm
    • Reply »
      Tony Thomas

      Tony Thomas

      Hi Hana

      Sometimes Illustrator attempts to sharpen the edges of curves when snap to pixel is turned on. Which I agree can just look weird. I would recommend only ticking the ‘Align to Pixel Grid’ option (found in in the ‘Transform’ panel) for shapes with straight edges.

      Mar 18, 2014 at 9:53 am
  • Reply »
    marco

    marco

    where is the option aling to pixel in Ai CS6?

    Apr 1, 2014 at 6:00 am
    • Reply »
      Tony Thomas

      Tony Thomas

      Hi marco. The ‘Align New Objects to Pixel Grid’ option is a checkbox in the Advanced section of the New Document window. And ‘Align to Pixel Grid’ is a checkbox in the Transform window (if it isn’t visible click the little menu icon in the top right corner and select ‘Show Options’.

      Apr 1, 2014 at 6:04 am
  • Reply »
    JuniorGustabo

    JuniorGustabo

    I need help with a problem.

    Recently I was testing Adobe Flash Professional CS6 and I realized that this program doesn’t import images in SVG format.

    So I used Adobe Illustrator to open a SVG file and save it in AI format. The problem is that when I import the AI file into Flash CS6, the image appears smaller than it was originally.

    For example, if I create an SVG image whose size is 400x400 pixels and I draw a circle with a radius of 200 pixels, when I use the AI file generated by Illustrator, Flash CS6 indicates that the image has a size of 320x320 pixels and the circle is 160 pixels high by 160 pixels wide. It is as if all measures were divided between 1.25 including the width of the lines.

    I want to change the format of my images while retaining the original dimensions. How can i fix this?

    Sep 27, 2014 at 2:42 pm

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all