Pixel (Flash) Fonts VS Illustrator CS

krissserz
28.Apr.2008 10.21am
krissserz's picture

Hello!

Pixel fonts are blurry in all of the CS versions of Illustrator, even if placed at full x/y values. Seems like the only Illustrator versions that shows pixel fonts the crispy way are Illustrator 10 and below. (I wrote to Adobe about it last year [2007, or even 2006], and I still didn’t get an answer [surprise!].)

Does anyone know the trick for crispy looking pixel fonts in any of the CS versions? I’d like to design my Websites in Illustrator CS... I’m done with 10!

Thanks.



Ralf Herrmann
28.Apr.2008 10.38am
Ralf Herrmann's picture

You can’t blame Adobe for using Illustrator in such a strange way. Illustrator isn’t based on pixels, so how should the pixel fonts be rendered in a good quality? You need an app that is based on a pixel grid and you need to set the view to 100% (1 pixel on the screens equals 1 pixel of your design).


krissserz
28.Apr.2008 11.35am
krissserz's picture

Yes. Thank you: I design my Flash Websites at 100%.

I’ve been working with Illustrator 10 to design my Flash Websites for five years. (Designing a Flash Website in Photoshop is completely inappropriate knowing that Flash is vector-based.)

But it’s frustrating to witness that Flash fonts have always looked great in the previous versions of Illustrator (10 and below), but not in the actual CS versions.

This means I’ll eventually have to design directly in Flash, but I’m so much more comfortable designing in Illustrator!

That’s why I’m trying to know if anyone is aware of the following:

1) How to make Flash fonts look good in the CS versions of Illustrator;
2) If this is not possible, WHY did Illustrator change that? I’m sure I’m not the only one cursing.

Thanks!


Eben Sorkin
28.Apr.2008 11.52am
Eben Sorkin's picture

When you export to flash though you don’t have problems then - do you? It’s just while you are in Illustrator itself, correct?

I suspect it has something to do with a change to the rendering engine. I wonder if they could give you a choice about that like they do in photoshop. Actually I should check to see if there is one...


Ralf Herrmann
28.Apr.2008 11.59am
Ralf Herrmann's picture

You can turn off anti-aliasing in the preferences. This will stop the “blurring”. But like I said: this will only give you a nice looking pixel font if the grid of the font and the grid of the Illustrator view will match coincidentally.
If you just do your layout in Illustrator and then move it to Flash, why do you care about the appearance of the fonts in Illustrator?


krissserz
28.Apr.2008 12.01pm
krissserz's picture

Exactly!

But no... There doesn’t seem to have a «crisp/smooth» choice in the Type palette like in Photoshop.

Thanks again!


krissserz
28.Apr.2008 12.05pm
krissserz's picture

In reply to Ralph:

You can turn off anti-aliasing in the preferences. This will stop the “blurring”.
- - This will make all of the other items on the artboard aliased as well.

If you just do your layout in Illustrator and then move it to Flash, why do you care about the appearance of the fonts in Illustrator?
- - Because the look and feel isn’t the same at all. Therefore, the design process isn’t the same, and the presentation process isn’t the same either...

Thanks again.


Manlio Napoli
28.Apr.2008 12.20pm
Manlio Napoli's picture

Effect > Rasterize
Here is a tutorial.


krissserz
28.Apr.2008 12.33pm
krissserz's picture

Thanks.

This seems to be the solution.

I still find it weird that I’ll need to do that extra step everytime I’ll create another text box, but if it works, ok then! (It probably would’ve been better to have a “crisp/smooth” option in the Type palette like in Photoshop, but still...)

Seems like this is it! Peace!


Mark Simonson
28.Apr.2008 1.13pm
Mark Simonson's picture

You can save a little time by saving the effect as a graphic style, which is very simple to do: Select one of your already-rasterized text boxes and drag it to the graphic styles palette. This will create a blank white icon in the graphic styles palette. When you select a text box and click on the icon, the same rasterize effect settings will be applied. Since a blank white icon is not very identifiable, it helps to give it a name (double click on it) and set the graphic styles palette to one of the list views.


Mark Simonson
28.Apr.2008 1.14pm
Mark Simonson's picture

(I didn’t know about this rasterize effect, either, until now. Pretty neat.)


krissserz
28.Apr.2008 2.33pm
krissserz's picture

Great! I’ll try that!

Much appreciated. Thanks!


frode frank
28.Apr.2008 3.15pm
frode frank's picture

I don’t want to kill the spirit, but if you’re using Illustrator to design your sites there’s a good chance you don’t really need Flash. One can remake any AI with just plain old html/css – if you care about usability, that is.


Eben Sorkin
29.Apr.2008 12.24am
Eben Sorkin's picture

Frode, what’s all this “if you care about usability, that is” stuff? Much as I venerate usability ( and I do you know...) the world is not made of usability alone. Not all individuals or business’ want or would even benefit from usability alone.


frode frank
29.Apr.2008 7.30am
frode frank's picture

I’m no evangelists on these matters, but I find it good to take use of the internet’s possibilities. Flash is, btw, an amazing tool.


krissserz
29.Apr.2008 1.06pm
krissserz's picture

To be frank, I really don’t think this is the matter of the subject here, but I’ll still take time to answer.

It’s simple: I’m used to Illustrator to design with. I don’t want to waste too much time having to get used to Flash’s tools. I work on a MAC, and my programmer works on a PC. So I have to break apart the fonts anyway when I give him the Flash docs. (Please don’t ask anymore questions relating to our/my method of work... It would be too long and not on the subject. Thanks. We all have our own ways of working for a lot of different reasons. That’s it, that’s all.)

Illustrator is vector-based, and so is Flash. I think it’s logical.

What wouldn’t be logical, would be to design the interior of a novel with Photoshop for obvious reasons.

Thanks.


frode frank
29.Apr.2008 10.25pm
frode frank's picture

Please forgive me if I came across harsh. Good luck with your work, Krissserz!


krissserz
30.Apr.2008 1.32pm
krissserz's picture

No problem!

Peace to all!


krissserz
30.Apr.2008 1.32pm
krissserz's picture

No problem!

Peace, and thanks again to all!


bert_vanderveen
1.May.2008 8.51am
bert_vanderveen's picture

Something else that may be useful: In Indy you should use a full point–grid & lock/place all elements on this. Makes for more consistent anti-aliasing when rendering to pixels.

. . .
Bert Vanderveen BNO


Thomas Phinney
1.May.2008 12.37pm
Thomas Phinney's picture

I would think that would work - *if* your output resolution was a multiple of your grid resolution. So for example if your grid is point-based, and you export at 100 ppi, the grid won’t help. But if you export at 72 ppi, it would.

Regards,

T