Sep 14

The ‘Rasterize’ effect on text in Illustrator

2005 at 12.56 am posted by Veerle

Who says you only need Photoshop for your designs for the web? Say you have to create a small button to promote a book and you want the font in a tiny pixel font sharp and crispy. On the other hand the illustration needs to be as flexible as possible. So do I choose Illustrator or Photoshop? The answer is simple choose Illustrator and use the Rasterize effect. Select your text path using the Selection Tool and choose ‘none’ as anti-aliasing option. It’s as easy as that! 

And yes, your text is still selectable, editable, scalable etc. exactly how you want it. How’s that! :-) Use the Pixel Preview mode (command/control + option/alt + y, available in Illustrator CS and of course CS2) to control the pixel sharpness. You can edit the paths to your own liking until they are as crispy as possible. Thanks Jon for triggering my mind :-)

Rasterize effect on text in Illustrator

These buttons to promote Jeremy Keith’s book “DOM Scripting” were created using Illustrator (CS2). Still, text looks crispy sharp using Illustrator don’t you think?

Jeremy Keith's Dom Scripting book

Jeremy Keith's Dom Scripting book

If you like, you can download these icons and use them to support Jeremy.

This book is not aimed to programmers but to us, simple thinking designers :o) A review is on its way as soon as I receive my copy and had a digg into it ;-)


18served

gravatar

1

permalink this comment Markus Wed Sep 14, 2005 at 02.02 am

Nice idea.

I think I should have a closer look @ Illustrator.

thx, markus


gravatar

2

permalink this comment Robert de Mildt Wed Sep 14, 2005 at 02.38 am

great suggestion!

I must admit I find myself spending more and more time with Illustrator. It’s worth the time and effort to learn. I managed to switch to thinking with vectors & shapes instead of pixels and since than it works well for me. 


gravatar

3

permalink this comment Pat Wed Sep 14, 2005 at 03.15 am

Thanks for the tip!! :-) it can be useful…


gravatar

4

permalink this comment lazymouse Wed Sep 14, 2005 at 04.31 am

I’ve finally switched to Illustrator from Freehand and I prefer it, and, of course, I can find lots of tips here at Veerle’s place!


gravatar

5

permalink this comment AkaXakA Wed Sep 14, 2005 at 06.45 am

So it’s kinda the opposite from the ‘smart object’ in Photoshop cs2?


gravatar

6

permalink this comment Matthew Wed Sep 14, 2005 at 07.01 am

Thanks for the tip.

Also, from the looks of the sample chapter from ‘DOM Scripting’ on Friends of Ed… I think I will be getting that book as soon as possible.


gravatar

7

permalink this comment Veerle Wed Sep 14, 2005 at 07.07 am

@AkaXakA, not sure if I understand your question, but if you mean that you maintain editability after applying ‘Rasterize’, then yes you could say so. Although these are different things. In Photoshop you rasterize a layer, in Illustrator you actually apply an effect to an object. Hope I’m making a bit of sense here.


gravatar

8

permalink this comment lex Wed Sep 14, 2005 at 10.06 am

nice one veerle .. thanks for the tip!


gravatar

9

permalink this comment ine Wed Sep 14, 2005 at 01.30 pm

starting classes illustrator next week. can’t wait to see the useful tricks for webdesign…


gravatar

10

permalink this comment Jerome Dahdah Wed Sep 14, 2005 at 02.28 pm

I suppose this only works from CS2 onwards? I just tried it in CS and my text is no longer editable. It appears in the “Links” palette as a bitmap object.


gravatar

11

permalink this comment Veerle Wed Sep 14, 2005 at 11.51 pm

@Jermome Dahdah, strange, it should work in CS too. I did another test right now in CS and it works just like in CS2. You can also select that effect afterwards in the Appearance palette and just trash it, then you are back to aliased text just like before, so that’s total flexibility. The text remains editable exactly the same as in CS2. Are you sure you select Effect > Rasterize after you’ve selected your text (with the Pointer tool)? Also, do you use a proper installed font? Maybe try it with another font to see if you get the same result. I guess if the printer set is missing or the font is corrupt you’ll have trouble applying this effect. Other then that I wouldn’t really know…


gravatar

12

permalink this comment nerdcool Thu Sep 15, 2005 at 07.27 am

You’ve done it again.  Another excellent tip from the Illustrator genious.  I thought I knew a lot about Illustrator but you always come up will great new tips.
The different display styles of fonts has always been an annoyance.  I’ve often had to ‘outline text’ to get text to display as it would when you ‘save for web’.  The problem with this is that you lose the editing capability.  Now I can just use the ‘rasterize’ effect with supersampled anti-aliasing.
Keep up the good work!


gravatar

13

permalink this comment Jerome Dahdah Thu Sep 15, 2005 at 11.52 am

Ehh… my bad. I mixed up “Object > Rasterize” with “Effect > Rasterize”. :) Who’da thunk they’d give two seperate functions the exact same name?

Thanks for the tip, this could be quite useful.


gravatar

14

permalink this comment luxuryluke Thu Sep 15, 2005 at 02.25 pm

I simply cannot wait for this book!
function preorder{};
for pay {now};
get ‘later’;
else pay {later};
perhaps ‘forget’;
?}


gravatar

15

permalink this comment Amirsan Sat Sep 17, 2005 at 08.59 am

I want to learn Illustrator so bad.  I hear how useful it is if your creating logos and such.

Does anyone know any good start points for me to learn Illustrator 10?


gravatar

16

permalink this comment Veerle Sat Sep 17, 2005 at 11.00 am

@Jerome Dahdah, glad you got it working.

@luxuryluke, very funny ;-)

@Amirsan, Total Training has very good DVD tutorials, I got a few myself, they are great and worth the price. Not sure if they still have vs 10 though…


gravatar

17

permalink this comment sabeen Tue Sep 27, 2005 at 04.46 am

I tyied u technique to get rasterize effect on text, but my text is not clear it’s blur hoe to get rid of that blur effect ...........


gravatar

18

permalink this comment Eric Tue Jan 10, 2006 at 10.13 am

> “you want the font in a tiny pixel font sharp and crispy”

You can also use a screenshot of the font rendered using Windows XP with ClearType smoothing !



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist