For a while now I've been doing my web development graphics with Adobe Illustrator, currently CS2 (I like to leapfrog versions if possible). I can't get enough of those sweet, crispy vectors. And thankfully, in recent versions of Illustrator, Adobe has provided a
"pixel preview" mode which allows the designer to zoom in and
accurately see how the vectors will be rendered on save.
Unfortunately, there seems to be an exception with small text in "save for web".
A closer look at the pixels...
As you can see, the "Save for Web" text looks thinner, less visible, and less juicy. Aside from being annoyingly different from the preview, it's often less readable. The smaller the text, the worse it is.
This has been driving me crazy for a while now. I'd coped in various, unsatisfactory ways, probably the easiest being adding a .1pt stroke around the text. But this was not a true solution, because pixel preview and Save for Web were still different.
Searching the web revealed that this was a common problem. Some people were even taking screen shots of their illustrator previews and finishing up in Photoshop. Dirtying up clean, beautiful vectors by pixellizing them for further editing... heresy! Somebody do something!
Eventually I found this page discussing accurate pixels for icons in illustrator. This use of the Rasterize effect to increase accuracy intrigued me, so I tried it on my normal, antialiased text.
First, I selected the text.
Then on the menu, selected Effect > Rasterize.
I made sure the Resolution was set at Screen, and changed the Anti-aliasing to "Type Optimized (Hinted)".
And lo and behold...
The Save for Web dialogue looks exactly like the pixel preview! Eureka!
Let's look at those juicy, juicy pixels...
Ain't it beautiful?
There you have it. No more .1pt strokes, and no more *shiver* screenshots. Just use the Rasterize Effect on small text, and you'll get accurate "Save for Web" exports every time.
Noodly!