Posts Tagged ‘save to web’

TIP: To Anti-alias or Not to Anti-alias? (Real World Illustrator)

Friday, January 30th, 2009

[Editor's note: Designing a graphic in Illustrator and saving to web can produce lines that are not sharp pixels due to poor anti-aliasing (instead of a solid black pixel line it will be a single gray pixel or two gray pixels wide). Learn how to force lines to "snap" to the nearest pixel (to effectively turn anti-alias off) on export this this useful tip from Mordy Golding's blog.]

Republished from Mordy’s Real World Illustrator Blog.
Original post date March 7, 2007.
Mordy’s got a bunch more useful posts, check out his blog.

[Mordy] found this question posted on the Illustrator World forums and thought it would be cool to share a tip along with some helpful information.

I have an image with a brown rectangle for the background, a lake on top of that, and then some text. I would like the rectangle to have anti-aliasing turned off and keep anti-aliasing turned on for the text. The issue is, when I post the rectangle up on a website with a brown background, the rectangle’s border has some anti-aliasing to it, creating a white border around the image.

I understand I can turn off anti-aliasing for the entire document by unchecking Anti-Aliased Artwork in general preferences, but this also turns it off for the text.

Is it possible to turn anti-aliasing off for the rectangle only? Right now my only solution is to copy the image to photoshop and crop the image inside the border. (I tried creating a clipping mask in illustrator, but the the anti-aliased border moves to wherever the clipping mask is).

First, the anti-aliased artwork setting in preferences applies only to how Illustrator displays graphic on your artboard in Preview mode. It doesn’t effect how graphics are exported in Save for Web (or any other method). Although theoretically, you could disable anti-aliasing and take a screenshot of your artboard in Illustrator and then open the screenshot in Photoshop… but that would only be a useful method when you’re being paid by the hour.

Secondly, there is indeed a way to turn off anti-aliasing on a per-object basis. Select your object and choose Effect > Rasterize. In the Rasterize dialog box, set anti-aliasing to none. Since the effect is a live effect, the object is still completely editable as vector art, yet it appears as though it has been rasterized without anti-aliasing. And it will export just as you see it on your screen (of course, you’ll want to always use Pixel Preview mode when working with web graphics).

This tip is also especially useful for when you want text NOT to be anti-aliased. At small point sizes, and with certain typefaces, anti-aliased text appears too blurry to read. Rather than have text that no one can read, turning off anti-aliasing for such type objects will result in text that will remain editable in Illustrator (due to the live effect), but that will appear legible when viewed on the web.