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.
7 comments:
While it might not be a panacea for folks who still need to support older versions of IE, you can also negate that sort of border halation by saving as a 24-bit PNG and electing to preserve transparency.
Problem is, many times the line not only has a white border but your nice black thin lines become ugly fat gray ones.
In reality, there's a scientific reason for why all of this happens. Maybe one day when I have some free time (ha!), I'll detail exactly why Illustrator has such a hard time rendering web graphics. With example images, etc. One day... one day....
True, but you can usually get those edges to survive the resampling by nudging the dimensions one or two pixels up or down. If your image is ultimately going to be rectangular, CSS would probably be a wiser choice for the border.
thanks Mordy. A very simple process I see!
Thank you for the anti-aliasing tip, it helps =)
Thank you. Some really useful advice. One more thing I'd like to add. If you want to save as transparent gif (for ex. if you want to have the graphic be able to be presented on different color backgrounds defined in css)in the save for web options turn off transparecy dither. This might be common sense to most people but I thought I'd post it anyway.
Thanks Mordy - I wish I had come across this trick years ago.
Why do they bury the effect in the palette menu and not show it on the main menu!?!?
Post a Comment