Save for Web in Illustrator clipping incorrectly!

Question

I am tearing my hair out on this one, albeit I am fairly new to Illustrator I have researched the best way to export art of particular dimensions for the web, and this appears to be the best way. It's worked fantastic in the past, but I am now embarking on resizing this image at a range of different dimensions, and I've noticed the rounded corners are vastly different in size and roundness between all four corners (as per screenshot).

I have been exporting this picture in W+H >100px and it has been keeping symmetry, yet when I resize anywhere from around 65-79 pixels the rounded corners differentiate, how can this be?

It is using the standard Illustrator rounded edges effect of 32 pixels.

Please any Illustrator pro I'm hoping you can shed some light on this matter!

I actually had 'clip to artboard' unticked for the last few tests, and that still didn't help, I've since resized the artboard to the exact 250px the rounded box was created as, and still no luck. So it won't be my box is extending past the artboard, I zoom in and it fits perfectly to the pixel inside.

UPDATE: An export of 57x57 and 100x100 are perfectly symmetrical on all corners! It's the 70's range which skews. Incredibly odd!

Answer 1

I think you'll find that your vector on the right vertical is slightly outside the artboard. Look at the position and width of the object (coordinates are in the title bar when selected). You should snap the position to exactly match the edge of the document. You can turn on snapping to grid which will help.

Here is what you have (exaggerated):

Note the W value in the title bar. The artboard I used is 125px, but the object width is at 126.667 and the X position is at 63.333, where it should be centered at 62.5 and be 125px wide to align correctly (it is currently sitting to the right of center)

Instead, under the window menu select show grid and turn on snap to grid. (You can adjust grid spacing in the Edit>preferences menu) Now when you make your shape it will snap precisely and aligned to the artboard

The reason it is behaving this way with such a small misalignment is because it is rounding to the wrong pixel when you shrink it (1 pixel to the right of where you want it). Generally when you resize an image in any program, it has to calculate where to put the pixels at that new resolution. At an odd size (57px for example, or starting at a decimal value), this calculation is more difficult, resulting in a decimal value which can break the threshold between the pixels you want, and the ones displaying.

This also can cause anti-aliasing (slight blur) between two rows of pixels. It is always good practice to resize to easily dividable sizes (200x200px -> 100x100px -> 50x50px for example), that way the calculations are always result in solid numbers, not decimals (half pixels).

Answer 2

Just in addition to John's awesome answer (+1), you could try the following:

1. Is your artboard aligned with the pixel grid? Use the Artboard window to see the artboard properties and if the X,Y,W and H are not exact pixels, correct them. If it is not aligned, it can cause extra anti-aliasing.
2. Is your shape located at an exact pixel? Use the transform window and check if your shape X,Y,W and H are exact pixels. If not, round them up or down to an exact one.

If these did not help, then my obsessive compulsive pixel picking guidelines in this other answer might help: What software should I use to make crisp game graphics for iOS games?

Confession: I never make the final art the exact size of the artboard for that very reason. I spent too much time figuring out the reason for the extra pixel rows or columns that are caused by anti-aliasing. Now I always make my artboards 2px wider and higher than the actual shape (i.e I keep 1 extra pixel all around). Saves me time, frustration and allows me to meet deadlines.