Drawing a single pixel path in Illustrator

Posted by on Jan 9, 2013 in Illustrator | No Comments

Trying to get crisp single pixel lines in Illustrator can be a frustrating affair. Particularly when you need to produce high fidelity design mock-ups for a client; even if they don’t notice, having slightly ‘fuzzy’ lines can be very irritating (or maybe that’s just me…)

Photoshop, of course, gives you that pixel level control naturally but if, like me, you enjoy the flexibility and power that Illustrator gives you when playing with colour palettes and changes of mind then there are a couple of tips that help keep things pixel perfect.

The tips…

Starting with a new document

Make sure that you open the advanced section of the new document dialog and check “Align New Objects to Pixel Grid” – this should be on by default for the “Web”  document profile. In general, once that’s done those single pixel lines seem to work out just fine.

Adding new objects in an existing document

If you are adding new objects, then you  can also toggle the alignment on and off as needed.

Select Window->Transform to show the Transform panel. Then select the flyout menu in the top-right corner and check “Align New Objects to Pixel Grid”

Aligning existing objects

Select Window->Transform to show the Transform panel. The make sure all the options are showing by clicking the little up/down button next to the Transform tab.

You should now see an “Align to Pixel Grid” option. Select the object and check this – your object should snap to the pixel grid. You can even turn it off again for that object so any subsequent changes no longer apply the snapping.

This might help if you don’t want pixel snapping

One tip that can work for the occasional line is to apply an “offset” effect to the stroke (Effect->Path->Offset Path) and set “offset” to 0.5px. That should give you sharper lines, although they may well appear thicker as well of course.

Checking the output

Either select File->Save for Web… and zoom around; taking a look.
Select View->Pixel Preview and again zoom in to see where your lines are going.

Useful link


Now, I wrote this… then I discovered the link to the help :) But, I felt the summary might still be of use so there it is.