Advertisement


Mysterious line next to shape after saving for web in Illustrator


Question

So I have got the .ai file from our designer and I have to save it to a specific size to then be used on a website.

I have aligned all shapes to pixel raster (not sure if this is required) and I have changed the reference point to left-top (in order to avoid blur).
When saving for web I choose Optimize Art and I save it as a transparent PNG-24.

Now, why is there a mysterious, vague line next to one shape? When I look at it in Illustrator, that same line is visible, but when I zoom in you can see that the shape is perfect without the mysterious line.
In case it might help, the line is there from bottom to 50% of the shape (vertically), everything else is perfectly sharp.

What am I doing wrong?
I hope I used the correct terms, as my Illustrator is in a different language.

2012/06/16
1
4
6/16/2012 5:15:00 PM

Accepted Answer

Unfortunately, this is standard for Illustrator. There's quite a few situations where the pixel accuracy of Illustrator's shape rendering, antialiasing and gradient rendering aren't on par with Photoshop, Fireworks and other apps.

I'd recommend using Photoshop or Fireworks. If possible, move the objects over and export from there.

I've written more about the topic here: Illustrator and app design

2012/06/16
1
6/16/2012 1:37:00 AM

If you set the "X & Y" coordinates on your artboards to be an integer (a whole number like 10 instead of 10.234) I've noticed this fixes the problem. Also if you turn off the optimizing and anti-aliasing that can fix it too (though usually not recommended since it will give a more pixelated output).

Some of the other suggestions on this thread can work very well, but I've found the X Y solution to work the best for time and the least amount of fixing...just setup your artboards with whole numbers to begin with and you should have no problems, otherwise use one of the other solutions mentioned.

2014/11/11