Skip navigation
Currently Being Moderated

Grainy text when saved for web

May 16, 2012 9:52 AM

Tags: #cs5 #fireworks

Why do graphics with text and/or images in Fireworks CS5 become more grainy or blury when saved/exported for web use?  Compared to results in Photoshop, text, image and graphic rendering when saved for web in Fireworks is lower quality or poor (grainy and blurry).  Why?! Should I not use Fireworks and only use Photoshop CS5?  Isn't Fireworks designed for creating web graphics?  If so, what am I missing?  Any help would be appreciated.

 

Brian

 
Replies
  • Currently Being Moderated
    May 16, 2012 11:01 AM   in reply to Skeggs91

    So you feel like the quality is degrading at the export stage... Do you have any samples of this?

     

    Are you using the Image Preview command to export, or one of the Preview modes (e.g., 2-up, 4-up) in conjunction with the Optimize panel? Have you tried different file types? Are you resizing?

     
    |
    Mark as:
  • Currently Being Moderated
    May 16, 2012 11:53 AM   in reply to Skeggs91

    Yeah, I'd encourage you to use whatever works for your situation.

     

    I should have asked you to include a screenshot of your original for comparison. I do see obvious JPEG artifacting around the letters as well as the images; this graphic has a lot of flat color, which would prompt me to try saving it as a GIF or PNG-8 (or even a PNG) instead of a JPEG.

     

    The cover images do look quite blurry, but I suspect they must look blurry in your original as well. Incidentally, if you saved these graphics as symbols, you could resize them multiple times in your layout without losing any quality—kind of like Smart Objects in Photoshop. (I'm assuming they might have been larger initially?) Also, you could check your Preferences to see what Interpolation method is being used when resizing. This could impact the appearance of the cover images, if they are being resized.

     

    Text rendering is tricky at small sizes. Making a seemingly minor adjustment to the pixel size can have an impact on how the text is rendered at this small of a size, depending on the font. As far as anti-aliasing goes, System Anti-Alias can be a good choice, sometimes; you might also explore the Custom Anti-Alias option. You might also have smoother results if you create the layout at twice the size (or more) initially—a display font will look better when rendered with more pixels—and then output it at half size.

     

    An interesting thing about Photoshop: If you zoom in to the highest setting, you can use the arrow keys to create subtle adjustments to the text rendering, depending on what kind of aliasing you've applied.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points