: Save for Web in Illustrator clipping incorrectly! 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

@Gloria351

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


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.
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.

Vote Up Vote Down

@Smith574

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).

Vote Up Vote Down