Text Quality in Images

CkretAjint · 05-30-2009, 01:23 PM

Make sure you save the images out at 100%. Do NOT resize them in the browser window.

randomdude2009 · 05-30-2009, 01:27 PM

Thanks I do that but the crispness of the text still deteriorates comapered to the original. It seems the outline of the text is fuzzier than the original.

CkretAjint · 05-30-2009, 01:30 PM

What font are you using? Do you have a screen cap of this issue?? How bad is it???

hank_scorpio · 05-30-2009, 01:33 PM

When you make the image in fireworks, add the text, but don't save it as a jpg, save it as HTML, I'm not sure if that is in the Save As or in Export, probably both.

But you need the HTML. That will save the background image and the text will be selectable/editable in the code and be text not an image.

randomdude2009 · 05-30-2009, 01:34 PM

Hi ,
I used Garamond in this case. Animated Gif. Pls see http://www.classifiedads.ie/account_access.gif
Thanks

randomdude2009 · 05-30-2009, 01:37 PM

Thanks eugenetyson but I want to be able to use textures in the text if needs be. Ideally I want to make my images/button as crisp clear and professional look as possible.

Ned · 05-30-2009, 01:40 PM

Originally posted by randomdude2009 View Post

Hi ,
I used Garamond in this case. Animated Gif. Pls see http://www.classifiedads.ie/account_access.gif
Thanks

It looks fine to me. GIF by default (you can change this when you optimize the image through Save for Web or whatever) uses a selective color palette, which is the main cause of your fuzzy edges, along with the fact that there's only so many pixels to use in the image at that small size. This is what you'll expect to get with any web-sized raster text...

You could try a more complete color palette instead, and see if that helps.

If it were me, I would have made that button in CSS to keep it completely vector based.

randomdude2009 · 05-30-2009, 01:42 PM

OK Thanks Ned!
CSS isn't my forte unfortunately. I will google how to do that. Don't know much about vectors either. Will look it up.
Thanks

hank_scorpio · 05-30-2009, 02:02 PM

Why don't you just try the html route instead of dismissing it.

randomdude2009 · 05-30-2009, 02:06 PM

I will look further into the html. Thanks everyone for the feedback. I was just looking at the ad on the sidebar of this site i.e Wordpress/Joomla & Oscommerce Templates. It just looks so much crisper than the images I create.
Thanks

CkretAjint · 05-30-2009, 04:14 PM

Looks fine on my screen for it's size and content. *shrugs*

digizan · 05-30-2009, 07:05 PM

Originally posted by randomdude2009 View Post

Whats the best way to ensure crisp text on images? If eg I use white text on a red background the crispiness goes. Is there a font that is best etc..?
Thanks

The smaller your text gets, the more issues you're going to have with anti-aliasing causing fuzziness. You might want to:

Try using a more geometric sans serif font as there will be less variation in line weight between the parts of the letters—sometimes the thin lines & serifs of a serif font can get anti-aliased to the point that they almost disappear.
Change your anti-aliasing settings. I don't use Fireworks much, but CS4 gives you the option to change the amount of anti-aliasing used and even use custom settings.
Try using a pixel font (also referred to as a "bitmap" or "screen" font). Pixel fonts don't need to be anti-aliased and will look nice & sharp, the drawback being that each one is only intended to be used at a single size. Read more here (includes links to both commercial & free pixel fonts).

Digi

randomdude2009 · 05-30-2009, 09:10 PM

Thanks Digi, I will try that

tZ · 05-30-2009, 11:57 PM

Use a gracefully degrading font stack. You can also take a look at this article for other ideas.

HTML Code:

font-family: Garamond,Adobe Garamond Pro,Georgia,serif;

Text Quality in Images

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment