Pixel perfect productivity in Illustrator

By: Gavin


  • design
  • illustrator
  • tips

When I first thought about going to a BarCamp experience I was a little nervous about the prospect of doing a talk in front of people who had no idea who I was, let alone met before. Amongst the usual reservations, nerves, uncertainty and the like, my main thought was: would they be interested in what I have to say? It's a bit like that feeling when you see a word on screen you only ever pronounce in your head and when the day comes to say it aloud you realise you might actually be pronouncing it differently to everyone else! Some thoughts never leave our heads and until we do we never really know how others will perceive them. That's why I decided to share my experiences with Illustrator and what techniques I use to improve my productivity and workflow where I can.

Step 1: Don't be a mouse!

Like a mouse we will often take the route we know is safest even if it takes us longer to get there; that's why it's possible to train a mouse to do an entire agility course all by itself. But we don't want to be like a mouse! We want to be open to new techniques and new ways of working right? So what are you waiting for?

Step 2: How to tame Illustrator

Set up keyboard increments

If you want greater control over your pixels remember to define all your measurements and units correctly under "Illustrator > Preferences > Units". You can leave fonts as points if you like because thinking about typography in relative measurements will help you a lot when laying out your type. Once you’ve set Illustrator to use pixels for the units remember to define your keyboard increments. Go to "Illustrator > Preferences > General" and set "Keyboard Increments" to something like 0.25px. This means you have greater control over your vector points and you can nudge them by a quater of a pixel. This is really handy for tweaking the anti-aliasing of your icons.

Avoid creating new documents to align new objects to pixel grid

When you rescale shapes, Illustrator will do its best to ensure vertical and horizontal lines don't spread over more than one pixel. This is fine when you have a rectangle or square but when you have a shape with organic lines and a few straight lines Illustrator moves the vector points in order to make the pixels line up and will alter the shape of your original vector path. If you are not careful before you know it that beautiful icon you spent ages getting to your exact liking has become all skewif. So in my experience it is better to turn "align to pixel" on and off in the Transform window when and as you need it. (Tip: the "align to pixel" feature is only available in CS5)

Avoid using "save for web & devices" when generating UI assets

When you’re designing user interfaces you want them to appear exactly how you intended them to but for some reason Illustrator has a bad habit of distorting the pixels placement of your lovely graphics when you choose "Save for web & devices". Instead it's better to export them because it will save your interfaces exactly as you want them. What's great about this option is that you don't even have to size your canvas to fit the asset you want; simply copy the asset in question to a new document choose "File > Export..." and select the PNG format. Just make sure "User Artboards" is unchecked to have it save the the exact dimensions of your icon or graphic.

"Effects > Stylize > Rounded Corners" is easier than using the "Rounded Rectangle Tool"

This might be obvious for some but creating rounded corners in Illustrator is much easier if you go to "Effects > Stylize > Rounded Corners" because it means you can:

  • Alter the size of your rounded corners whenever you want by going to the Appearance window
  • Resize your rectangle without worrying about distorting the arcs of your rounded corners.

Only expand objects when absolutely necessary

And lastly: know when to expand the appearance of shapes so you don't shoot yourself in the foot later. As a rule of thumb I try to limit expanding any shape until absolutely necessary or until generating final assets for a user interface. If you merge any shapes now you limit what you can do with them later if you decide to change your mind.

Step 3: Share your techniques!

So the moral of this article is that if you want to be more productive, share your experiences! Share the little things even if you think they might not be that useful, because somewhere, someone is walking through an agility course just like yourself.

About the Author