Jun 28, 2011 4:31 AM
CS5 bug rendering anti-aliased text in 'Save for web'
-
Like (0)
Seems like there's a bit of a bug when using 'Save for web and devices' with thin weights of type in CS5 for Mac. Although thin type looks fine while working in Illustrator, as soon as you enter the 'Save for web' dialogue, it gets badly mangled. Looks like this issue has been present at least since CS4. It does not happen in Photoshop. It looks particularly bad for light text on a dark background.
Some people may say "sure, Illustrator is not really meant for intensive bitmap work". However, with features like 'pixel preview' and 'snap to pixel', Illustrator has (generally) become a very viable tool for web design, and personally I much prefer it to Photoshop. It is also clear that Adobe intends it to be usable in this manner. So the anti-aliasing render bug is definitely a problem. Just surprised they didn't address it when CS5 was born.
I put up some example images on http://www.thesheep.co.uk/2011/06/24/illustrator-save-for-web-anti-ali asing-problems/ to illustrate the problem.
Does anyone have any clever work-arounds for this? It's a bit annoying to have to move stuff over to PS before exporting, but maybe that's what I have to do. Hopefully Adobe will address this soon.
Which format are you picking up in the dialog.
It happens with all formats - JPEG, PNG-8, PNG-24, GIF.
Does no one else suffer from this?
I'm hoping someone from Adobe might come across this and add it to their bug list for CS6 development... is there a formal way to do that?
In Save for web go to the "Image size" tab and choose type optimized from the menu. This takes the anti-alias setting you have selected in the character-panel.
Does it get better when you do it that way?
Thanks so much Monika, that has solved the problem!
Very helpful - this will save me re-creating lots of artwork in Photoshop.
I never would have found that option there. Actually I think it is a strange place to put the option - under "Image size" - since changing the anti-aliasing settings is not really anything to do with the image size... but anyway, at least I know it is there now!
I also noticed that another option is to do Effect > Rasterize and then set the Options to Anti-aliasing: Type Optimized (Hinting)
Copyright © 2011 Adobe Systems Incorporated. All rights reserved.
Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).