infotoaster, logic on fire

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!

So I wanted to add a section to my site for web tips and interesting graphics/programming and other ideas I run across or discover.  And I wanted it easily editable, searchable and all RSS lovely.  And, these days, if that's what you want, you get a blog.

Blog.  A good name for the clear gel-juice around a freshly opened can of potted meat.  A fat, smelly pirate.  "Arrrr!" said Blog, "Where's me potted meat!?"

So, yeah.

It's not standards compliant at the moment, I admit I'm adapting someone else's code.  But it's built on the open source project DasBlog so I'll be tweaking it here and there until w3.org's validator stops barking at me.  At least the CSS validates!