Skip navigation
Starrim
Starrim
Currently Being Moderated

Possible bug in Illustrator CS4 text anti-aliasing in Save for Web and Devices

Jan 23, 2010 7:11 PM

Hello all,

 

This could be a bug... if so, I'd be happy to add it to Wade's bug list a few messages down the stream.

 

Here's what's happening: when I create small text using a very thin font (in this case, Helvetica Neue Light), the Pixel Preview gives a noticeably different anti-aliasing solution to the actual output from Save for Web & Devices. I'm attaching an original .AI file as well as a screenshots of what I'm getting in both situations.

 

I'd really prefer the Save for Web and Devices output to look exactly like the Pixel Preview. The font looks great in Illustrator but loses a lot of its punch when I Save for Web.

 

---Peter

Attachments:
2654 Views   10 Replies   Latest reply: Wade_Zimmerman, Apr 6, 2012 8:05 PM
 
Replies
  • Scott Falkner
    Currently Being Moderated
    1. Scott Falkner,
    Jan 23, 2010 9:14 PM   in reply to Starrim
    Report

    Illustrator is lousy at pixel-precise raster art, as you have just discovered. I would do this in Photoshop. There are many advantages:

    1. Anything can be rasterized and edited at the pixel level
    2. There are many options for how text is antialiased
    3. Since the format itself is raster-based, the on-screen display is the image, so saving as GIV or PNG or using Save for Web and Devices gives no surprises
    4. Photoshop has much less suck than Illustrator. Much.
     
    |
    Mark as:
  • Starrim
    Currently Being Moderated
    2. Starrim,
    Jan 23, 2010 11:06 PM   in reply to Scott Falkner
    Report

    Yes, I could indeed do it in Photoshop, with its great text antialiasing options. That's how I've always done web design in the past, but I actually really like most of how Illustrator does it too. I only just realized what a powerful tool it can be for web design. Pixel-precision, up to this one issue, hasn't been a problem. Plus, it solves the age-old problem of my always having to maintain separate vector files for my pages in case I want to change the shape of something down the road. Talk about double-duty. And I really don't like messing with vectors in Photoshop... some people love it, but for me it just doesn't feel right.

     

    Now then, why mess with pixels in Illustrator? Mm, for me that's not really the question. The issue is, they've put it out there, they've gone to the trouble of making it available — so it really should work correctly, without surprises.

     
    |
    Mark as:
  • Scott Falkner
    Currently Being Moderated
    3. Scott Falkner,
    Jan 23, 2010 11:40 PM   in reply to Starrim
    Report

    Starrim wrote:

     

    The issue is, they've put it out there, they've gone to the trouble of making it available — so it really should work correctly, without surprises.

    You’re preaching to the choir, pal.

     
    |
    Mark as:
  • Wade_Zimmerman
    Currently Being Moderated
    4. Wade_Zimmerman,
    Jan 24, 2010 4:05 AM   in reply to Scott Falkner
    Report

    First the threads that you refer to was actually created by Mylenium who ismore aveteran of the forum than I am

    and has helped far more users than I have as well.It is probably a thread that should be kept permanently at the top.

     

    To your situation and small text there are fonts that are specially optimized for small sizes on the web.

     

    I do not know how they would display though at such magnification. Or if you would really have need to enlarge the view to1600% for any practical purpose.

     

    Please explain the reason!

     
    |
    Mark as:
  • Jacob Bugge
    Currently Being Moderated
    5. Jacob Bugge,
    Jan 24, 2010 4:28 AM   in reply to Starrim
    Report

    Peter,

     

    I am surprised to see the difference; but then again, I have never looked that close at Type saved for web.

     

    Just to make sure: Is the artwork aligned with the point/pixel grid (or whatever it is called), in other words, do the boundaries (including those of counters) have integer point/pixel values? If not, that might hold an ambiguity which might explain the difference.

     
    |
    Mark as:
  • Starrim
    Currently Being Moderated
    6. Starrim,
    Jan 24, 2010 5:24 PM   in reply to Jacob Bugge
    Report

    Well, I ran a couple more tests to verify what was going on. It looks like:

    1. Converting type to outlines makes it look slightly different (worse) in the pixel preview due to the loss of hinting information in the font, but the Save for Web output is identical to the pixel preview. Illy is doing its job here; no complaints from me. This also means that points not having integer values is not the issue.
    2. Leaving type as type looks the best in pixel preview, but looks terrible in Save for Web — worse than converting it to outlines.

    I only zoomed in to 1600% before so the pixel-per-pixel difference would be glaringly apparent. The real problem I'm having is that the font becomes almost invisible when Saved for Web. And I'm starting to have a hunch why...

     

    Obviously there are two different type rendering algorithms going on here: one for pixel preview (which is identical to the actual document display at 100%) and one for Save for Web and Devices. It would seem that only the pixel preview is using the font's hinting information, which becomes extremely significant for small, thin fonts whose stems are less than 1 pixel wide. Interestingly, the PP also appears to be the least faithful to the actual letter outlines (see zoomed comparison); while perhaps what I'm getting from Save for Web is actually more so. What we need is a little more control, perhaps, of how Illy is anti-aliasing its type, like in Photoshop.

     

    What to do, what to do? I guess I'm stuck using Photoshop for this, or screen-grabbing Illustrator and slicing it up in Photoshop.

    Attachments:
     
    |
    Mark as:
  • Ben Hayes
    Currently Being Moderated
    7. Ben Hayes,
    Jun 24, 2011 4:43 AM   in reply to Starrim
    Report

    I have to report that this has not been improved in Illustrator CS5. I have been dismayed at how badly very thin type looks when saving for web and devices. But taking a screenshot from Illustrator, or reproducing the same text in Photoshop, gives perfect results.

     

    I have been working on a logo that contains some very thin weight type, and for this Illustrator's 'save for web' anti-aliasing is completely unusable.

     

    Here are the results of a test I just ran: http://benhayes.com/test/illy-export-problem/test.html

     

    Very disappointing.

     
    |
    Mark as:
  • jackl2070
    Currently Being Moderated
    8. jackl2070,
    Apr 6, 2012 4:23 PM   in reply to Starrim
    Report

    The issue has to do with the anti-aliasing method that save for web and devices uses. For whatever reason it uses the art-optimized anti-aliasing algorithm on type. There is, however, a workaround for this. Before output, select the type layer and go to Effect -> Rasterize... Then, under options select Type Optimized as the anti-aliasing method. Repeat for each type layer in the document. The save for web an devices output should now match the pixel preview.

     
    |
    Mark as:
  • Wade_Zimmerman
    Currently Being Moderated
    9. Wade_Zimmerman,
    Apr 6, 2012 7:59 PM   in reply to jackl2070
    Report

    In the Svae for Web and Device  under the image tab where it says art Optimize that is a drop down menu select Type Optimize as such

     

    Screen Shot 2012-04-06 at 10.54.21 PM.png

     

    htis is what it lloks like in AI and a browser when you choose Type Optimize

     

    Screen Shot 2012-04-06 at 10.51.01 PM.png

     

    This the difference between Art Optimized and Type Optimize

     

    Screen Shot 2012-04-06 at 10.52.47 PM.png

     

    That is what is happening to you you are selcting Art Optimize and that is the reason when you choose art optimize aqnd you rraster the image it looks right to you.

     
    |
    Mark as:
  • Wade_Zimmerman
    Currently Being Moderated
    10. Wade_Zimmerman,
    Apr 6, 2012 8:05 PM   in reply to Wade_Zimmerman
    Report

    This is art and text if using art and text I think Type Optimized does just as good a job as art optimize does with art work and renders text better.

     

    The top one is text Optimized

     

    Screen Shot 2012-04-06 at 11.03.32 PM.png

     
    |
    Mark as:
Actions

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