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
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 it’s 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.
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.
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).
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.
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)
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.
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.
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.
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.
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.
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.
Category: Tutorials
Download ALL of Our Premium Resources
Signup for a MediaLoot subscription today and get tons of premium resources to use commercially and even in web apps. At subscriptions starting at just $9, you can't lose...
Comments
Great post, thanks for all of the great tips! PS I love your vector app icons.
Too bad this doesn’t work in CS3
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
As a beginner I learned a few good techniques, thanks.
Thank u for posting.
This Adobe Illustrator tutorial is very helpful. I have added this tutorial on: http://illustrator-tutorials.co.cc/illustrator-tutorials/how-to-get-pixel-perfect-designs-in-adobe-illustrator/
Thank you!
Thanks to show me its really very professional assignment.
Great article!
How do you align to grid in CS4? This is not an option in the transform window, there must be another way?
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)
Ah yeah I don’t think you can, I am due an upgrade soon though!
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 :-(
Good!
That’s going to make things a lot eaiser from here on out.
Didnt know that, so thanks, so much to learn. Cheers Todd.
@PS: Just export your file from Illustrator to a PSD file. Make sure you hit “72 ppi” and turn off anti-alias.
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?
@Roy Abbink thanks! that works. funny cutting and pasting doesn’t, but this works well enough. frustrating!
great technique
I’ve heard of this technique - but so good to find a step by step tutorial. Thanks for sharing.
Is it possible to take art work from photoshop to illustrator then use this pixel perfect technique?
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!
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.
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.
It’s amazing for me to have a website, which is good in favor of my experience. thanks admin
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
Really gr8 idea. Very useful….
sbxrb eeici louis vuitton xl handbag louis vuitton belt louis vuitton outlet diaper bags bgwrt sdwzmo How to Get Pixel-Perfect Designs in Adobe Illustrator | MediaLoot kwhoxss beats by dre mixr vs pro beats dr dre cheap beats by dre for cheap hnfdpln fhynm coach outlet nags head nc coach outlet coach handbags warranty nbrfhzdp christian louboutin shoes new york city louboutin shoes outlet christian louboutin outlet locations sdospsdj
Thanks good information keep up your good work!Thanks for such informative
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?
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.
This is super helpful and very comprehensive! Thanks a lot!
My brother recommended I might like this website.
He was entirely right. This post truly made my
day. You can not imagine just how much time I had spent for this info!
Thanks!
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
I already tried those and I still get half pixels with illustrator. But I found this solution; using Fireworks.
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