Mobile app version of vmapp.org
Login or Join
Hamaas979

: Mysterious line next to shape after saving for web in Illustrator 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

@Hamaas979

Posted in: #AdobeIllustrator #Blur #Pixel #Png #Shapes

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.

10.07% popularity Vote Up Vote Down


Login to follow query

More posts by @Hamaas979

7 Comments

Sorted by latest first Latest Oldest Best

 

@Si6392903

I have been using CS5 for a number of years and don't recall ever running into this problem before. The part of my design that is "streaking" with the small random white lines is a simple silhouette I used live trace on. It was not occurring on any of the other objects in my design. A simple web search brought me here and I tried a few of the suggestions without any success. Then I thought to try layering the silhouette by simply copying it and aligning another identical layer behind it. This has proven successful for my project, thought I would share my experience.

10% popularity Vote Up Vote Down


 

@Jessie844

Click New document...Check "Align new objects to pixel grid"...it worked for me

10% popularity Vote Up Vote Down


 

@Carla748

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.

10% popularity Vote Up Vote Down


 

@Murray976

I have suffered with this issue many times using CS5, especially with 72dpi web graphics.

Usually, I nudge shapes up or down a pixel or two and try Ctrl + shift + alt + S to preview, then keep trying this until the lines are no more. Problem is I know web graphics are pixel sensitive, sometimes you can't afford to move a single part of the illustration while leaving the others, pixel alignment as you know is important, but i have to compromise sometimes because it gets so fking annoying.

I also found that outlining text solve this issue many times.

10% popularity Vote Up Vote Down


 

@Cooney243

I've heard lots of complaints about this but my team and I have had very few issues.

I occasionally run into stray anti-aliasing pixels. In those cases, simply dragging the object off the artboard then repositioning solves it.

This approach has worked for me since CS3. Though I haven't personally tried it in CS6 one designer I work with uses 6 primarily and has had no issues I've noticed.

10% popularity Vote Up Vote Down


 

@Phylliss782

To avoid this create a new Illustrator file, then copy your vector image to this new file and save.

10% popularity Vote Up Vote Down


 

@Hamaas979

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

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme