Welcome to WebmasterWorld Guest from 54.161.88.189

Forum Moderators: not2easy

Message Too Old, No Replies

Clear Text on Graphics

Blurry text after exporting from fireworks.

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 26, 2004
posts:776
votes: 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?
5:54 am on Mar 10, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 4, 2004
posts:877
votes: 0


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

Full Member

5+ Year Member

joined:Mar 4, 2008
posts: 210
votes: 0


I'd use .png -- looks much better. If you may be concerned about PNG and IE, I have a fix.
1:47 pm on Mar 10, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:July 8, 2005
posts: 460
votes: 0


It shouldn't become blurry no matter what filetype you save as. What antialiasing are you using and how big is the text?
11:02 pm on Mar 10, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 26, 2004
posts:776
votes: 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.
11:45 pm on Mar 10, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:July 8, 2005
posts: 460
votes: 0


I use Sharp or None for small text in Photoshop. Maybe try different fonts.
10:53 am on Mar 11, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 4, 2002
posts:2204
votes: 0


Is the exporting process resizing the image?
12:34 am on Mar 12, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 26, 2004
posts:776
votes: 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.
9:02 am on Mar 12, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 4, 2002
posts:2204
votes: 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?

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 26, 2004
posts:776
votes: 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.
7:21 pm on Mar 12, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 4, 2002
posts:2204
votes: 0


Try a new typeface and repeat the process. Need to eliminate that possibility.
2:40 am on Mar 14, 2008 (gmt 0)

Full Member

5+ Year Member

joined:Mar 4, 2008
posts:210
votes: 0


I'm a bit out of depth here, but I've seen export with and without interlace. Have you tried both?
2:50 am on Mar 14, 2008 (gmt 0)

Senior Member from MY 

WebmasterWorld Senior Member vincevincevince is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 1, 2003
posts:4847
votes: 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

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

Preferred Member

10+ Year Member

joined:July 8, 2005
posts: 460
votes: 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.
12:58 am on Mar 15, 2008 (gmt 0)

Full Member

5+ Year Member

joined:Mar 4, 2008
posts:210
votes: 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.

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 26, 2004
posts:776
votes: 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?

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

Preferred Member

10+ Year Member

joined:July 8, 2005
posts: 460
votes: 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.