Welcome to WebmasterWorld Guest from 54.158.65.139

Forum Moderators: not2easy

Blurry fonts again

but related to creating buttons...

   
7:52 pm on Dec 4, 2007 (gmt 0)

10+ Year Member



I have been trying to create new button images (gif) with just the text in the button.
Using Illustrator, I sometimes get nice clear text once I resize and save, but usually it is slightly blurry for some reason.

I recall reading (somewhere...) that you can optimize the placement of objects and text in Illustrator so that when you resize, the pixels are in "the right place" and you get sharp text as opposed to not so sharp.

?

I see nice clear text in buttons all over the place but if I try to re-create it from scratch, mine look like crap.

What am I doing wrong?

10:01 am on Dec 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Micro Cars.

Have you got anti aliasing on? This is a feature of most graphics tools which help blend the type with the background.

Also - never resize text once it's in an image - this will cause you problems with clarity - design your images at the exact size you need - type too. This way what you see, really is what you get.

10:10 am on Dec 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Also if you are saving as a gif file, make sure there is enough colors in the palette and that they are optimised for the picture you are saving.
10:23 am on Dec 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Unless you're using a fancy font, another good alternative is to create background images without the text for the buttons. Then use actual links for the text and use CSS to style it and add the background image.
4:29 pm on Dec 12, 2007 (gmt 0)

10+ Year Member



Also - never resize text once it's in an image - this will cause you problems with clarity ...

I think that might be my problem.

as for CSS, I am only *just* starting to use it and I was concerned that some browsers would render the text larger than the button graphic, but perhaps I am being overly cautious.

thanks for the tips

5:02 pm on Dec 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Following up on what Limbo said,

If you have your button graphic at the finish size and you add a text layer with your text at finish size, then as you adjust the text anti-alias to either none, sharp, crisp, strong, or smooth (adjust from the text pallet) you will see exactly how the type will appear.

For me, I usally find gif works best for small type but you may find jpg works better in some cases. Try both.

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month