View Full Version : How to make professional, crisp fonts in image format??

10-26-2008, 05:47 PM
I use Photoshop CS 2.

I have noticed that a lot of professionally designed websites use image files for menus. Their saved image fonts display in my browsers (FF and IE) as exceptionally crisp and clear.

When I try to create my own menus using fonts saved as .gif or .jpg they do not appear as professional. I have tried the "smooth" and "crisp" features in Photoshop and still no luck.

How do I create navigation images using the fonts that come with Photoshop CS2 so that they are professional looking when making my menus? What tips/tricks am I missing?

10-26-2008, 05:55 PM
Did you try 'none' ?

10-26-2008, 06:01 PM
yes I have tried "none" as well

I have tried a number of fonts that come with CS2.

Arial is the one I tried the most since it is used so frequently.

I will reproduce what I am doing:

I simply type my text, save it as .jpg or .gif.
After saving it I upload it.
That's it.

It just doesn't look as good as professional websites.

What am I doing wrong?

10-26-2008, 06:19 PM
Try 'Verdana' with 12pt, 'none'. Also can you post a link to your image?

10-26-2008, 09:12 PM
I think the .png files are usually sharper. Have you considered using PNG format?

Major Payne
10-27-2008, 04:22 PM
GIFs (http://en.wikipedia.org/wiki/Gif) are limited to 256 colors while PNGs (http://en.wikipedia.org/wiki/Png) provide full color. Problem with PNGs is that they are poorly supported by IE and similarly engine driven browsers without extra attention.

10-27-2008, 06:53 PM
Problem with PNGs is that they are poorly supported by IE and similarly engine driven browsers without extra attention.

I think, this notion only applies for transparent PNGs.

10-27-2008, 07:08 PM
I think, this notion only applies for transparent PNGs.

Correct. :thumbsup:

And even then, there are some tricks around it.

10-27-2008, 08:47 PM
Correct. :thumbsup:

And even then, there are some tricks around it.

Indeed, it only applies to the alpha opacity ability of PNGs (although, apparently, IE does render PNGs just that little bit darker than the other browsers, but not enough for anyone to really care. Don't you miss Arbitrator?).

I'm rather curious to see what he's outputted and why he considers it not "professional".

Major Payne
10-27-2008, 11:33 PM
Just for the inquiring mind:

* No support on old browsers (such as Internet Explorer below version 4).
* No animation, still images only (unlike GIF). PNG compatible browsers include: Apple Safari, Mozilla Firefox, Opera, Camino, Internet Explorer 7, and many others. For the complete comparison, see Comparison of web browsers (Image format support).

However, Internet Explorer (Windows), before version 7, has a fair share of issues, which prevent it from using PNG to its full potential.

# 4.0 crashes on large PNG chunks.[16]
# 4.0 does not include the functionality to view .png files[17], but there is a registry fix[18].
# 5.0 and 5.01 has broken OBJECT support.[19]
# 5.01 prints palette images with black (or dark gray) backgrounds under Windows 98, sometimes with radically altered colors.[20]
# 6.0 fails to display PNG images of 4097 or 4098 bytes in size.[21][22]
# 6.0 cannot open a PNG file that contains one or more zero-length IDAT chunks.[23]
# 6.0 sometimes completely loses ability to display PNGs[24], there are various fixes[25]
# 6.0 and below fails to display alpha-channel of PNG images used as CSS background.[26]
# 6.0 and below has inconsistent/broken gamma support.[27]
# 6.0 and below has no ICC-profile (iCCP) support.[28]
# 6.0 and below has no color-correction support.[29]
# 6.0 and below has progressive display of interlaced images (replicating method).[citation needed]
# 6.0 and below has broken alpha-channel transparency support (will display the default background color instead)

10-27-2008, 11:50 PM
If we still developed for IE 4-5.01, maybe it would be a problem. It is well known that the main problem with PNG support in IE 6 is with alpha transparency. That said, this person did not mention the need for transparent images, and they also tried a JPG which does not support transparency (ergo, that part is void).

Still it is best when text can be left out of images, but when it must be included, then I believe that PNG is the way to go unless transparency is of concern.

11-14-2008, 08:26 PM
Are you using a proper font if it's for a smaller image? Try using sans-serif fonts and see if that's any better.

11-14-2008, 10:11 PM
If your feeling real sassy you could embed the font using sIFR (http://www.mikeindustries.com/blog/sifr/) or if your feeling extra extra sassy embed it with the new typeface.js (http://typeface.neocracy.org/) :)


11-15-2008, 05:41 AM
.... or FLIR - Facelift Image Replacement (http://facelift.mawhorter.net/) :)