10 Replies Latest reply: Apr 6, 2012 8:05 PM by Wade_Zimmerman RSS

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

    Starrim Community Member

      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

        • 1. Re: Possible bug in Illustrator CS4 text anti-aliasing in Save for Web and Devices
          Scott Falkner Community Member

          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.
          • 2. Re: Possible bug in Illustrator CS4 text anti-aliasing in Save for Web and Devices
            Starrim Community Member

            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.

            • 3. Re: Possible bug in Illustrator CS4 text anti-aliasing in Save for Web and Devices
              Scott Falkner Community Member

              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.

              • 4. Re: Possible bug in Illustrator CS4 text anti-aliasing in Save for Web and Devices
                Wade_Zimmerman Community Member

                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!

                • 5. Re: Possible bug in Illustrator CS4 text anti-aliasing in Save for Web and Devices
                  Jacob Bugge CommunityMVP

                  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.

                  • 6. Re: Possible bug in Illustrator CS4 text anti-aliasing in Save for Web and Devices
                    Starrim Community Member

                    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.

                    • 7. This was not fixed in CS5
                      Artichoke_soup Community Member

                      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.

                      • 8. Re: Possible bug in Illustrator CS4 text anti-aliasing in Save for Web and Devices
                        jackl2070 Community Member

                        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.

                        • 9. Re: Possible bug in Illustrator CS4 text anti-aliasing in Save for Web and Devices
                          Wade_Zimmerman Community Member

                          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.

                          • 10. Re: Possible bug in Illustrator CS4 text anti-aliasing in Save for Web and Devices
                            Wade_Zimmerman Community Member

                            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