CS5 bug rendering anti-aliased text in 'Save for web'

Seems like there's a bit of a bug when using 'Save for web and devices' with thin weights of type in CS5 for Mac. Although thin type looks fine while working in Illustrator, as soon as you enter the 'Save for web' dialogue, it gets badly mangled. Looks like this issue has been present at least since CS4. It does not happen in Photoshop. It looks particularly bad for light text on a dark background.
Some people may say "sure, Illustrator is not really meant for intensive bitmap work". However, with features like 'pixel preview' and 'snap to pixel', Illustrator has (generally) become a very viable tool for web design, and personally I much prefer it to Photoshop. It is also clear that Adobe intends it to be usable in this manner. So the anti-aliasing render bug is definitely a problem. Just surprised they didn't address it when CS5 was born.
I put up some example images on http://www.thesheep.co.uk/2011/06/24/illustrator-save-for-web-anti-aliasing-problems/ to illustrate the problem.
Does anyone have any clever work-arounds for this? It's a bit annoying to have to move stuff over to PS before exporting, but maybe that's what I have to do. Hopefully Adobe will address this soon.

Hi,
I am experiencing this same problem of pixelated gifs when I use the "save for web" dialog from Illustrator, but this solution has not worked for me. I have tried the trick of using type-optimized anti-aliasing, but it doesn't change the output at all. I've done this from within the "Image size" tab as well as through Effect>Rasterize>Options)Anti-aliasing: Type Optimized. My image is a logo made entirely from text, although for some of it I used "outline path", so I'm not sure if it still qualifies as text...I'm a newbie at this stuff, so the technical details are still quite opaque to me.
Does anyone know of a solution to this that does not require me to add Photoshop to my workflow?
I'm using Illustrator in CS5, version 15.0.2.
Thanks in advance
Jonathan

Similar Messages

CS5 Crop marks don't work in Save For Web

I'm playing in the trial version of Illustrator 5.
I'm having trouble figuring out the crop marks. I select an object and try the various versions of creating crop marks. But when I Save For Web, it does not use the crop marks as a guide to trim the artwork down. The crop marks are visible.
In CS3, which I've used for years, I would create an object and use the crop mark tool to create the marks at the size of my object. When I would Save For Web it would save the file to the exact size of my crop marks, no matter if I had artwork in clipping masks that go outside the crops.
Why does this not work in CS5?

You do speak the truth so in CS 4 and now Cs 5 you instead of drawing a rectangle and the making it into crop marks you simply draw an artboard then when you export you select to use artboards in the export dialog and select the artboard you just made and voilá.
Now before you go crazy this is an advance you can also choose to export all the artboards a range of artboards or a non-contiguous selection of artboards this way.
the difference here is that you draw the artborad which is actually drawing a rectangle and making the crop marks as in the CS 3 all in one opertation
it is really the same feature with lots of features added to it. Including the ability to name the art boards (cropped areas) number them reorder them
manage them in the artboard panel and then the team went farther than that with pasting in place pasting an element on all the artboards at once.
It is really just the crop area feature but with lots of possibilities.
If you need t draw an artboard within another artboard hold down the shift key.

About CS6 save for web quality.Always aliasing.

I used to save JPEG or PNG by save for web before(CS5).
I found out beside the "save for web" interface changes and the quality become very low in CS6.
No matter setting high quality 100%. it is sill aliasing.
I know if use "export" it colud be better. BUT I can't set the image size.
I have to edit artboards or resize in photoshop.
I want to make sure what worng with my cs6 save for web. it's my computer problem or does anyone else have the same problem??
Thanks.
mac pro os x 10.8.3 / cs6

save for web setting
I tried optimized and matte...same result.
save-for-web-seeting-300%forview
result_save-for-web

Photoshop CS6 Save For Web UI extra border Bug

Last week we finally got upgraded to CS6, and I'm dissapointed to see the visual defect I reported in CS5.5 still exists in Photoshop CS6 Save for Web. The details and screenshots are all the same as in my previous thread. http://forums.adobe.com/message/3843054#3843054
Isn't there a way to fix this? I rely on PhotoShop to be pixel perfect, not to add extra distracting lines and borders to my work.

FYI, just to test I just did a crop of an image, then screen grabbed the result.
To ensure the edge is visible, I changed the workspace background from the dark gray I usually use to a lighter gray... Here's the pertinent part of the workspace...
A closeup of the upper-right corner:
Notably, I don't see any black line around it like you showed. This leads me to wonder whether I interpreted your screen grab properly...
-Noel

Save for Web Export

I am trying to use the save for web export option to save out a file of type JPEG.
I have gotten the code working fine if it saved out with the default file type of .gif, but I cannot get it to work with .jpg.
set theExportOptions to {class:save for web export options, interlaced:true, quality:30}
tell current document
export in (theLocation as text) as save for web with options theExportOptions
end tell
These are the pertinent lines from my code, so if anybody can tell me how to save the file as type JPEG so that it is a scripted version of Photoshop's save for web feature, that would great.
I am also using Photoshop CS2 v9.02 if that helps.

You would have to code that seperate eg:
FitImage(1000,500);
function FitImage( inWidth, inHeight ) {
   if ( inWidth == undefined || inHeight == undefined ) {
      alert( "FitImage requires both Width & Height!");
      return 100;
   var desc = new ActionDescriptor();
   var unitPixels = charIDToTypeID( '#Pxl' );
   desc.putUnitDouble( charIDToTypeID( 'Wdth' ), unitPixels, inWidth );
   desc.putUnitDouble( charIDToTypeID( 'Hght' ), unitPixels, inHeight );
   var runtimeEventID = stringIDToTypeID( "3caa3434-cb67-11d1-bc43-0060b0a13dc4" );
   executeAction( runtimeEventID, desc, DialogModes.NO );

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

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

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
htis is what it lloks like in AI and a browser when you choose Type Optimize
This the difference between Art Optimized and Type Optimize
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.

[CS5][Save for Web][Anti-aliasing] Fine lines in exported PSD with adjustment layers

Hello,
You can reproduce the bug this way:
- link a PSD with a adjustment (Levels, Brightness/Contrast) layer in your AI file
- Save for Web, with AA for Art (not text) selected
In the exported image there will be artefacts, white lines usually.
Flattening the PSD or deleting the adjustment layers will solve the problem and anti-aliasing will be applied correctly.
I used CMYK/RGB settings, FOGRA39/Adobe RGB 1998 for all the files involved.

Hi,
I am experiencing this same problem of pixelated gifs when I use the "save for web" dialog from Illustrator, but this solution has not worked for me. I have tried the trick of using type-optimized anti-aliasing, but it doesn't change the output at all. I've done this from within the "Image size" tab as well as through Effect>Rasterize>Options)Anti-aliasing: Type Optimized. My image is a logo made entirely from text, although for some of it I used "outline path", so I'm not sure if it still qualifies as text...I'm a newbie at this stuff, so the technical details are still quite opaque to me.
Does anyone know of a solution to this that does not require me to add Photoshop to my workflow?
I'm using Illustrator in CS5, version 15.0.2.
Thanks in advance
Jonathan

Type anti-aliasing in Save For Web CS5

Hi,
Has anyone found a way to get the type anti-aliasing settings to maintain their appearences in Save For Web.
The type looks very different as if its lost the settings when I go to save it.
Thanks!

Well I set the type to Sharp in the anti-alias settings in the Character dialog.
When I go save for web regardless of the output settings the aliasing gets all blurry like it never was set.

Anti-aliased text when exporting PDF to image

I need to be able to batch-convert multi-page PDFs to individual bitmap images (one image for each page) with anti-aliased text.
Photoshop works this way if you open a single PDF, allowing you to select one or more pages to rasterize as separate images, but not when batch processing (specifically, if you use the Image Processor script on a folder of images and PDFs, it will rasterize the PDFs automatically, but it will only do so with the first page of each PDF.)
Acrobat, on the other hand, automatically creates an image for each page when exporting, and can do this in a batch sequence, but the text is not anti-aliased, making the image look like a screenshot from 1997. No matter how high an image resolution you select, the text is still jagged when you zoom in.
So, is there a setting I'm missing that will allow the text to be anti-aliased when using Acrobat to export PDF to an image? I am using Acrobat 8, not 9, so something might have changed in the newest version.

Not sure about Acrobat Pro 8, but in Acrobat Pro 9 (not Extended) you can Export>Image>Multiple Choice: JPEG, JPEG2000, PNG, TIFF. I used JPEG and under the options in the export dialog box, leave the filename as is to coincide with the PDF filename and then choose Maximum Resolution under File Settings: Grayscale (JPEG, Quality:Maximum); Color (JPEG, Quality:Maximum) . . . skip down to Conversion Colorspace: Determine Automatically and Resolution choose 600pixels/inch for a letter size document. This will result in a file size of 1.3MB per JPEG image if there is not a lot of information on the page. I chose a simple header, footer with page numbering, and 5 lines of Lorem Ipsum text. 600dpi is overkill, you can go for 300dpi and still result in a decent image that will be able to be printed on a laser photocopier that is connected to a production computer. Obviously if you are printing to a laser printer or a high quality inkjet 300dpi will suffice as well for a letter sized document. But I have been told that 300dpi is not a standard rule of thumb and you must obtain specs from your printer since he/she can calculate by very strict rules the dpi you need for your content. It depends on whether you have background images such as watermarks and also if your text body contains line-art.

LineBreakMeasurer with anti-aliased text

Hello,
I am developing an application, which needs to render anti-aliased text. The application uses LineBreakMeasurer for text layout. Without anti-aliasing, LineBreakMeasurer works perfectly. However, when I turn anti-aliasing on, the text lines returned by LineBreakMeasurer.nextLayout() are too long (that is, longer than the specified wrapping width).
For example, if I call
TextLayout layout = measurer.nextLayout(92.0);
then
layout.getAdvance()
might return 101.0.
Has anybody been able to make LineBreakMeasurer to work with anti-aliased text?
Thanks,
-Tero

My english is not so good, I hope this help to you.
import javax.swing.*;
import java.awt.*;
import java.awt.font.*;
import java.awt.event.*;
import java.text.*;
public class ParagraphLayout extends JFrame{
public static void main(String[] args) {
    JFrame f = new ParagraphLayout("ParagraphLayout");
    f.getContentPane().add(new Test());
    f.setVisible(true);
public ParagraphLayout(String title) {
    super(title);
    createUI();
protected void createUI() {
    setSize(500, 400);
    center();
    addWindowListener(new WindowAdapter() {
      public void windowClosing(WindowEvent e) {
        dispose();
        System.exit(0);
public void center() {
    Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
    Dimension frameSize = getSize();
    int x = (screenSize.width - frameSize.width) / 2;
    int y = (screenSize.height - frameSize.height) / 2;
    setLocation(x, y);
class Test extends JPanel{
       public Test(){
            super();
      public void update(Graphics g){
           paintComponent(g);
      public void paintComponent(Graphics g) {
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
            RenderingHints.VALUE_ANTIALIAS_ON);
        // From _One Hundred Years of Solitude_ by Gabriel Garcia Marquez.
        String s = "Jos\u00e9 Arcadio Buend\u00eda spent the long months " +
           "of the rainy season shut up in a small room that he " +
           "had built in the rear of the house so that no one " +
           "would disturb his experiments. Having completely abandoned " +
           "his domestic obligations, he spent entire nights in the " +
           "courtyard watching the course of the stars and he almost " +
           "contracted sunstroke from trying to establish an exact method " +
           "to ascertain noon. When he became an expert in the use and " +
           "manipulation of his instruments, he conceived a notion of " +
           "space that allowed him to navigate across unknown seas, " +
           "to visit uninhabited territories, and to establish " +
           "relations with splendid beings without having to leave " +
           "his study. That was the period in which he acquired the habit " +
           "of talking to himself, of walking through the house without " +
           "paying attention to anyone...";
        Font font = new Font("Serif", Font.PLAIN, 24);
        AttributedString as = new AttributedString(s);
        as.addAttribute(TextAttribute.FONT, font);
        AttributedCharacterIterator aci = as.getIterator();
        FontRenderContext frc = g2.getFontRenderContext();
        LineBreakMeasurer lbm = new LineBreakMeasurer(aci, frc);
        Insets insets = getInsets();
        float wrappingWidth = getSize().width - insets.left - insets.right;
        float x = insets.left;
        float y = insets.top;
        while (lbm.getPosition() < aci.getEndIndex()) {
          TextLayout textLayout = lbm.nextLayout(wrappingWidth);
          y += textLayout.getAscent();
          textLayout.draw(g2, x, y);
          y += textLayout.getDescent() + textLayout.getLeading();
          x = insets.left;
}

CS5 save for web bug with slices 1 png, the rest gif

Do me good forum, this is my first post from 112 degree AZ.
I'm trying to "save for web" slices in illustrator cs5. I optimize the images to transparent .png in the sidebar in the save for web dialog box. Then I click save. And I do the "user slices" option in the NEXT dialog (hello complicated process, but it makes sense to me). 5 slices should be output. 5 are. But only one is a png. The rest are gif files. And not transparent.
That makes me to throw an anvil through the floor of the USS(R) Adobe.
But rather than going through such extreme measures, I'd figure I'd post first.
I guess in the time I researched and wrote this post, I could have saved each individual slice with the proper optimization settings, but what fun would that be? And maybe I'm just plain missing somthing and someone will say, hey "footheadleg" your a total moron. The checkbox to save ALL the slices for your desired setting is at blah blah blah.
Do it. Shame me. And then, my problem will be fixed at last. MUwhwhwhwahahahaa.
FREE GIFT: cmd+shift+d changes illustrators white artboard to transparent pixels. I learned that becasue I thought maybe I had a white layer showing on accident. I didn't. That's because I'm perfect. Perfectly human.

Footheadleg, you have so much to learn, and so little time. Let me teach you my ways. Though while on Illustrator's main canvas it may seem that you can change settings of each slice, you can't. I know, there are little icons top left of each image, one looks like an email symbol, and it would seem you could just email the slice to a friend.
Pretty soon you'll be able to "Like" the slice on Facebook. Or post it to your del.i.cious account. Or tweet it. Or 17,000 other VERY VALUABLE shares. But Footheadleg, these symbols mean nothing to you, except that they are slices.
HOWEVER, when in "save for web" mode, you can in fact change the settings of each slice. Here's what you do. Press k. (slice tool selector thingie) then hop over to the sidebar and click on the settings you want. Do this for EACH slice. I know, it would seem easier if there was a checkbox that said "apply to all slices," but why make things easy?
Plus, Illustrator is a rad program, so don't knock it, unless you can design something better. And you can't. So get over yourself and enjoy the pain
Yours truly,
Yourself.

Photoshop CS5.5 Save For Web UI extra border Bug

I have observed on two different Win7 32bit workstations with Photoshop 12.1 x32 from Adobe Design Premium CS 5.5 that save for web seems to add an extra pixel of workspace background grey to the inside black border of the image display on the right and bottom edge. It's very annoying to see this extra padding in the image since it makes me second guess whether my image crop was accurate. Please see the screenshot below which was taken of a completely red image in the save for web dialogue window. Notice the top and left border of the image don't have the same problem. I've also used a screen magnifier utility (pixie) to make the issue more obvious. Fortunately the issue seems only to affect the UI, the file that is saved doesn't have the extra pixels included. I hope this issue can be verified and reproduced here so that it can be fixed in future updates.
Thanks!
-tony

FYI, just to test I just did a crop of an image, then screen grabbed the result.
To ensure the edge is visible, I changed the workspace background from the dark gray I usually use to a lighter gray... Here's the pertinent part of the workspace...
A closeup of the upper-right corner:
Notably, I don't see any black line around it like you showed. This leads me to wonder whether I interpreted your screen grab properly...
-Noel

Rendering glitch in Save For Web?

Hello,
When I "save for web" with some particular files, I get a rendering glitch in the image that takes the form of small, colorless horizontal lines.
Example 1
Example 2
Where do these come from? What can I do about it?

I have this exact issue.
Happens in "Save for web" and in "export". I managed to keep CS4 still installed and took the exact same file and "exported" it and "saved for web", and no issue at all in CS4. This is def. an issue that has popped back up in CS5 then.
On my attached image there is no gradients or special effects, just clipping masks.
I've tried the new options they have in save for web, "Art Optimized" and "Type Optimized". The issue does not happen in "Type Optimized" but the quality in type optimized is lower and it renders the exact same as the vector file appears(so colors bleeding out a pixel behind some objects etc.) The issue does happen in "art optimized".
Issues happens when saving in png and jpg format, with or without transparency.
I've attached an example, notice the lines in her face. (same as initial attached image)
So is this a "wait for an update" sort of scenario? or is this a "use a different program to save for web" scenario?

CS5 Photoshop - Adobe Save for Web & Devices Error

Hi folks,
I know similar threads exists, but this one is different. For some reason, out of the blue, I can't use 'Save for Web' anymore. When I choose 'save for web', it opens the preview dialog nicely, up until I save & get this error:
"Adobe Save for Web & Devices Error
Could not complete this operation. An unknown operating system error has occurred."
Cleared all my settings, and the error remains.
I uninstalled PS CS5, installed it again... still get this error.
Hope someone knows how to fix it!
Tx!
MacBookPro3,1, running all the latest updates (OSX 10.6.4), CS5 Master Collection.
Luckily still have CS4 Master Collection installed (and Flash CS3).
(I've just got to get this off my chest, CS5 has so much issues that I stopped using it, I'm not getting paid for playing crashtestdummie. Please don't rush any future CS collections and try fixing bugs instead. )

Hi Wade,
Tx, but 99% of my time, I work on my local system (scratch disk also). Already had problems working with the company's network (files get locked or corrupted while trying to save), so we've learned the hard way not to use the network.
I guess that's somewhat expected if you work with a Mac, in a professional Windows environment.
Meanwhile, I'm a step closer in finding a solution myself. A colleague gave me a great tip, if you create an extra user account on the system, you start with a clean library. On my second account, PS CS5 is working just fine. So clearly, something went wrong in my library. Maybe permissions like you've said. At this point, I could try to fix it by copying files from the one user to the other. But I would like to wait for that connect session so they can see what's wrong.

PS CS5 Save for Web and Devices reports "The operation could not be completed" ?

I teach in a lab of 27 computers, 110 students and part of the curriculum is teaching students to "Save for Web and Devices" this year for some strange reason none of my students can access "Save for Web and Devices" they get the error message "The operation could not be completed-A write permissions error has occured."
It has stumped our district top network support guru.
We are running PS CS5 12.0.4
He tried this posted fix but it did not work
http://involution.com/2010/06/13/adobe-photoshop-cs5-write-perimissions-error-on-snow-leop ard/
It worked once last Friday but today it failed, I'm getting very nervous about being able to prepare my students for the ACA exam without this function.
In a discussion forum they suggested "zipping and deleting" the save for web preferences, I tried that. Shut down Photoshop reopened it and that did not work.
I am at a loss. Seems like a bug.
Any ideas.
We are using iMacs running Mac OS X 10.5.8

The error message may not simply address the location to where the students will save a single file. The error likely applies to the temporary location where the various optimized versions might be automatically saved as you preview the image as JPG/PNG/GIF. I would wager that you would not see this error when you are logged into one of the students' computers as an admin.

CS5 bug rendering anti-aliased text in 'Save for web'

Similar Messages

Maybe you are looking for