homepage Welcome to WebmasterWorld Guest from 54.145.252.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Blurry fonts again
but related to creating buttons...
microcars

10+ Year Member



 
Msg#: 3520367 posted 7:52 pm on Dec 4, 2007 (gmt 0)

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?

 

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3520367 posted 10:01 am on Dec 12, 2007 (gmt 0)

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.

PCInk

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3520367 posted 10:10 am on Dec 12, 2007 (gmt 0)

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.

HelenDev

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3520367 posted 10:23 am on Dec 12, 2007 (gmt 0)

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.

microcars

10+ Year Member



 
Msg#: 3520367 posted 4:29 pm on Dec 12, 2007 (gmt 0)

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

Jon_King

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3520367 posted 5:02 pm on Dec 12, 2007 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved