1

On Illustrator 15.0.0, to create multiple pins for google map, I create a layer of the pin and duplicate it to change icon.

When I display one by one the layer, the image is clean.

[![enter image description here][1]][1]

When many layers are superposed, I could see pixelization of rendering on the edges.

enter image description here

Could you advise me to have a clean image?

To resume :

I have one ai file which contains 20 layers, on each layer there's the same purple pin. The only difference of each layer is the icon inside.

I export each layer in png-24.

My goal is to display the pins on a google map (one pin = one event).

But sometimes events are in the same place, so, pins are superposed.

Image #2 (above) is a screenshoot in illustrator with x layers displayed.

The pins are duplicated from a layer to another.

Logically, even if they are stacked on top of each other, nothing should go beyond.

edited after some weeks : I add a screenshoot of my phone where you can see when there's one pin (left) and multiple (right)

enter image description here

  • 1
    I'm not sure what you mean by "display one by one" and "many layers superposed" ...I can see the same layers in both screenshots? – Cai Jun 22 '17 at 11:30
  • 1
    Can you please edit your question and add more info. Is this a raster graphic? Did you render the image as raster? if so have you tried viewing it at 100% zoom? Vector images in illustrator have no pixels, so this could be a display issue, have you updated your graphics card driver? Too many questions, not enough info to provide a proper answer. – Billy Kerr Jun 22 '17 at 11:40
  • I edited to explain – bklups Jun 22 '17 at 12:24
  • @bklups OK, I'll answer now. – Billy Kerr Jun 22 '17 at 18:35
2

The problem comes from the fact that the anti-aliasing (which gives you the smooth appearance, rather than the horrible jagged edges you'd otherwise get) is made using transparency. You can see this if you turn on the transparency grid:

enter image description here

Now, stacking semi-transparent objects is obviously going to lessen the transparency. The more you stack the less transparent those transparent pixels are going to be... ending up in a non-anti-aliased (or aliased) jagged edge...

enter image description here

Unfortunately there's not a whole lot you can do about it while keeping the full alpha transparency. You could save as a PNG-8 instead and sett a matte similar to the background color they're being placed on, but that may not be the best option with a map; you'll get a kind of "halo" around the pins instead.

enter image description here

(I've set the matte to black here just so it's easier to see).

Other than that, the best solution is to not exactly overlay the pins at all... How you'd do that I have no idea though (I assume the real issue is them overlapping in Google Maps, not in Illustrator).

  • Another post for conflation issues – joojaa Jun 22 '17 at 22:22
  • As mentionned below to @Billy, problem could be seen directly in Illustrator – bklups Jun 23 '17 at 6:33
  • @bklups sure, but in that case just delete the pin from all but one layer and you don't have a problem. – Cai Jun 23 '17 at 6:50
0

I read your explanation. Is it possible you might have zoomed in on the graphic after rasterizing it, or perhaps you enlarged it?

Also, PNG images should be displayed at the native screen resolution of your device. If you zoom in more than 100%, or enlarge the image, then you will see pixels.

If this is the problem, you should increase the resolution (the size in pixels) when exporting the PNG.

Another possibility is that you have switched off anti-aliasing somehow when outputting as PNG. Anti-aliasing smooths out edge pixels especially on diagonal lines or curves, without it the edges will look jagged.

In addition, the answer provided by @Cai is also a possible explanation.

  • I could see the aliasing before export (or save for the web). Screenshoots in my question come from illustrator directly. – bklups Jun 23 '17 at 6:30
  • @cai I add a screenshoot of my phone where you can see when there's one pin (left) and multiple (right) – bklups Jul 18 '17 at 10:02
0

Rather than have images stacked on top of one another – you could just use separate single icons...

So that for example if there were two on the same spot then display an icon with a "2", if there were three - display one with a "3" and so on.

Like so:

3 on location

Seems to me this also makes more practical sense than having an undetermined amount of pins stacked on top of one another... The end user will only see the top one anyhow so — how will they know whether there are two, three or ten?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.