Perfect 1-Pixel Lines in Adobe Illustrator

A close-up of an Illustrator mockup for the OFLC Construction website

I always use Illustrator to draw out website layouts.  I know a lot of people like Photoshop for layout comps, but I stick with Illustrator because it’s drawing tools are so much better.  Photoshop is certainly one of the greatest pieces of software in the world today, but when it comes to drawing up button/layout/icon graphics, Illustrator’s vector drawing tools save the day. But one nagging problem that kept coming up was an apparent lack of pixel-perfect drawing options, especially when it came to stroked vector shapes.  The left side of the picture above shows the problem. Even when a particular shape is set to a 1-pixel stroke, it oftentimes straddles the pixel border, resulting in a stroke that’s twice as thick and half as intense.

This problem was driving me crazy until I found a blog posting on Vibr8bros.com that addressed this exact issue.  The solution’s too simple: make sure the stroke is set to center alignment (it usually is by default anyways), then set the line’s position at half values. For instance, if you have a vertical line with an X-position of 1124.293, just change the position to 1124.5.  Problem solved!

You can read the full tutorial on Vibr8bros.com here.

Free e-Book: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now