: Pixelated image on edges when superimposed 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
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.
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)
More posts by @Connie430
3 Comments
Sorted by latest first Latest Oldest Best
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:
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?
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.
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:
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...
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.
(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).
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.