Clear Text on Graphics

Forum Moderators: not2easy

Message Too Old, No Replies

Clear Text on Graphics

Blurry text after exporting from fireworks.

Fortune Hunter

12:20 am on Mar 10, 2008 (gmt 0)

I am trying to create some buttons and graphics that have text on the graphic. The problem is that it looks fine in the application (Fireworks CS 3) but after it is exported the text gets blurry and isn't crisp text. Even if I set the export at the highest quality it won't come out any better. Is there another way to export text on a graphic and make it sharp and clear?

thecoalman

5:54 am on Mar 10, 2008 (gmt 0)

Use .gif

MarkFilipak

6:03 am on Mar 10, 2008 (gmt 0)

I'd use .png -- looks much better. If you may be concerned about PNG and IE, I have a fix.

jessejump

1:47 pm on Mar 10, 2008 (gmt 0)

It shouldn't become blurry no matter what filetype you save as. What antialiasing are you using and how big is the text?

Fortune Hunter

11:02 pm on Mar 10, 2008 (gmt 0)

The text is fairly small about 11 point in some cases. The anti-alias has been set to all of the settings at one point or another. It doesn't appear any of them are making it any clearer.

jessejump

11:45 pm on Mar 10, 2008 (gmt 0)

I use Sharp or None for small text in Photoshop. Maybe try different fonts.

limbo

10:53 am on Mar 11, 2008 (gmt 0)

Is the exporting process resizing the image?

Fortune Hunter

12:34 am on Mar 12, 2008 (gmt 0)

If you mean re-sizing the size of the file for download purpose, yes it does cut it down for the web unless you tell it not to. I have not tried to export it for print to see what happens since the web is the place for all the final graphics.

limbo

9:02 am on Mar 12, 2008 (gmt 0)

Sorry should have been more specific, I meant the dimensions. If the scale of the text is affected it will cause loss of clarity.

If it's not that it seems it must be an aliasing issue we haven't thought of - or possibly a font-compatibility issue?

Fortune Hunter

5:50 pm on Mar 12, 2008 (gmt 0)

No, to answer your question it does not cut down the physical dimensions. I do that before I ever export the graphic. It looks fine before export, but after export is when the problem occurs. I noticed it seems blurry no matter if it is .JPG or .GIF format.

limbo

7:21 pm on Mar 12, 2008 (gmt 0)

Try a new typeface and repeat the process. Need to eliminate that possibility.

MarkFilipak

2:40 am on Mar 14, 2008 (gmt 0)

I'm a bit out of depth here, but I've seen export with and without interlace. Have you tried both?

vincevincevince

2:50 am on Mar 14, 2008 (gmt 0)

It's almost certainly because you are using 'export for web'. That option does a particularly bad job. For photos and the like the results are acceptable; but for crisp lines you need to export for print and optimise it yourself.

Consider also exporting the buttons without text and then adding text using HTML; unless the font is rare - in which case you can consider sIFR

jessejump

1:01 pm on Mar 14, 2008 (gmt 0)

What font are you using that is getting blurred?
I just used 11pt Verdana in Photoshop, no anti-alias, Save for web 80% quality jpg- it looks fine.

MarkFilipak

12:58 am on Mar 15, 2008 (gmt 0)

I don't mean to be a nudge, but I have to repost this. I think it will solve the problem.

I'd use .png -- looks much better. If you may be concerned about PNG and IE, I have a fix.

Fortune Hunter

2:17 am on Mar 19, 2008 (gmt 0)

It's almost certainly because you are using 'export for web'. That option does a particularly bad job. For photos and the like the results are acceptable; but for crisp lines you need to export for print and optimise it yourself.

I always wondered about exporting for the web if that caused the problem. If I export for print, how do I optimize it myself? I have never done this so I am not sure how to cut down the size after it is exported.

Also I notice several people saying they export from Photoshop, is PH that much better than Fireworks for exporting graphics?

jessejump

5:12 am on Mar 19, 2008 (gmt 0)

Try-

Make one file with 5-10 text sizes, different anti-aliasing, different fonts.
Save as jpg, png, gif - see what works best.
Use optimization wizard, different export, save as options.

11 pt in an image is getting pretty small for legibility.