I've been noticing this in AI... you have an object... 60 pixels in width... save as a .gif/.jpg/whatever. It'll always add on a pixel or two to the size. IOW, 60 pixels is now 62 pixels. Plays hell when you're trying to create a precise site...
Jacob Bugge, Mar 9, 2009 12:20 AM
As Jacob said, make sure to have pixels as working units set in your rulers/ document setup and that all elements and the artboard size are full integer values. If you use print measurements, they may wreak havok as naturally the program will try to accomodate the subsampling. also never work at zooms beyond 200% of the doc size. Since things like snapping and alignment are related to the screen res in relation to the zoom level, it is much easier to avoid microscopic misalignments that way.
1/ Set measurements to Pixels
2/ Size object to desired size - xxx pixels
3/ Turn off (view) of other objects on artboard
4/ Select desired object - which is exactly xxx pixels in the Transform palette
5/ Save selection using Save for Web...
Logically, it should be the xxx pixels. But i'm getting xxx +y pixels. ('y' being anywhere from 1-3 pixels but, generally 2.)
While i understand the points and suggestions about setting artboards and crops, what i can't understand is why, when the selection shows xxx pixels, ai doesn't save to that very same xxx...
Mylenium, your point about >200% magnification is interesting... must keep that in mind... (in PS, am sure one can go to greater magnifications to set precise alignments? With no adverse effects?)
In 4/, do you place the artwork within whole pixels, including possible half stroke widths?
Unless something is really weird in CS3, to reach an addition of 3px, you would have to both misalign the artwork and overlook stroke widths.
You may have a look at the size, and positioning, of the artwork after Object>Expand; you can use two opposite Reference Points.
Imagine a cutting grid of crossing hairline wires 1px apart aligned to and pressed down through the workspace, cutting any artwork into 1px sqaures, the collection of squares constituting the SFW raster image. If the artwork is placed so that the outermost parts extend past the outermost border of the intended image, the size will grow to include the whole pixels holding the outlying parts.
I apologizise if the last paragraph is superfluous.
No, wait, it is the second last, no, now it is the third last paragraph.
Jay, all Adobe tools use sub-pixel placement, so you are not "safe" in PS, either, e.g if you pushed around vector art as a smart object. a common problem people also have when creating their guides. I was only advising to not extend a given zoom, as the bigger the zoom level gets, functions like nudging stuff with the arrow keys as well as moving will happen within this sub-pixel grid, not the full pixel increments.
Strokes may be the cause. Object dimensions don't include stroke widths. A 20 pixel wide rectangle with a 10 point stroke (using "Align Stroke to Center" option) will add 5 points to either side, hence it becomes a 30 pixel wide graphic in Save For Web even though it shows as 20 pixels wide in the Transform palette. I don't know if there's a way to include stroke thickness in the dimensions.
Another possibility is that the x & y values are not round numbers. If a 20 pixel wide object's left side starts at X = 100.5 pixels, it will become 21 pixels wide when Saving For Web (i.e. 20 pixels plus the anti-aliased "half" pixels on the left and right sides). Zoom in on that test rectangle in Save For Web and you'll see the left and right sides are grey (if the rectangle is black), so that's another thing to keep in mind. If you want exact and crisp graphics, you need to make sure X, Y, W & H fields are all round numbers (no decimals). This is especially true for square or rectangular graphics. That anti-aliasing is less important or noticeable if the graphic edges are all curves or diagonal lines. [edit: I believe this is what Jacob what talking about...the pixel grid.)
An alternative might be to copy and paste your graphic(s) into Photoshop then Save For Web from there. That will sidestep the "round number X + Y" issue a 20 pixel wide box pastes into a 20 pixel wide Photoshop canvas. Just ensure your colour settings are the same in Photoshop and Illustrator (eg. sRGB).
Thanks for the explanations... that clears things up quite a bit and i see the problem i was facing / what i was doing wrong...
Basically, didn't realise that the position of the graphic on the artboard also mattered... Thought the graphic was an absolute in itself...
Will check in future that the position (XY) is also xx.0 /yy.0. The object anyway was being rounded to absolute pixels with no fractions...
PS: Raven, actually my workflow has always been PS to web. Hence, have never faced this problem before. Other day just needed to modify some logos and so thought i'd save time by going AI to web directly... that's when i really noticed the problem.;-> -jj