Exported file dimensions are off by a pixel or two

New Here ,
Jun 27, 2022 Jun 27, 2022

Copy link to clipboard

Copied

Need help! I have a lot of solid rectangle/square logos 2-12 for each client, and about as many clients also. I've built the color to the edges on all artboards (eg: 71x71), and those are all centered with the align tool both H & V and I also made sure there are no decimals in either the sizes nor X/Y locations. WHY am I still getting exports a pixel or two off the artboard dimensions, (72x72, etc.,) or If I take those same exports - Export for Screens, Export for Web, Export As, with Use Artboards option - Illustrator still randomly changes some of my dimensions on the output PNG file. What can I do other than taking them all into PS and altering? (I don't know how to write scrips, so that's not an option). SO FRUSTRATED.

TOPICS
Bug , How to , Import and export

Views

89

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 27, 2022 Jun 27, 2022

Copy link to clipboard

Copied

Are you working in points or pixels?

Did you check the Upper Left of the X/Y locations?

Do you export at 72 ppi or a multiple thereoff?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 27, 2022 Jun 27, 2022

Copy link to clipboard

Copied

Brian,

 

In addition to what Ton said, if you have an Artboard size with odd numbers, such as 71 x 71, the centre coordinates must end with .5 and not be whole numbers. You can only use whole numbers for the centre with even number Artboard sizes.

 

That is why it is safer to ensure whole numbers at the (upper left) corner.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 28, 2022 Jun 28, 2022

Copy link to clipboard

Copied

@Ton Frederiks Pixels, 72ppi, but I had not aligned the XY to the upper left (but see that I can align all the art to the board using the Align tool.

@Jacob Bugge This was a calculus I didn't realize. We have a lot of odd-sized dimensions for various clients. 

 

On an initial run from "Export As', things seem to be working correctly, thank you! Now that I know more of the minutiae to look for, troubleshooting should be a lot easier going forward.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 28, 2022 Jun 28, 2022

Copy link to clipboard

Copied

Brian,

 

Your initial decription has made me think of a few things that may be worth considering if not already, such as choice of file format. These are included in the following which undoubtedly contains unneeded things.


If you wish to have PNGs (PNG24 (also (little) known as PNG32, it holds 24 bit colour and 8 bit Alpha channel (transparency)), of course) look crisp and clean, at least when it is (also) to be used at moderate screen resolutions, it is important to have the images in the exact desired final pixel x pixel size, or at sizes that are powers of 2 times as large (2x, 4x, 8x, and so on, the larger values can improve the appearance on high resolution screens and still ensure best possible appearance at low resolution screens); forget about resolution which may actually lead to wrong sizes and hence blurriness, or work at 72PPI or powers of 2 times as large (144PPI, 266PPI, 576PPI, and so on).


It is easiest and safest to work at the desired size when creating the artwork.


It is important to remember that a raster image represents the whole appearance, including strokes, so to make sure you get it right you can click Show Preview Bounds in the General Preferences (and untick it afterwards).


A very common unsuitable way is to Export to PNG (remember to use PNG24 and use Transparency for artwork to be in front of different backgrounds) with a medium or high resolution, such as 300PPI.


And a common misunderstanding: (almost) 11 out of 10 times, a statement like "I created the document at 300 PPI" means that the value is chosen in Effect>Document Raster Effects Settings; however that only means that the (current) resolution of any raster effects applied to the vector artwork, such as (any kind of) Blur, is set to that value (and only unless/until the value is changed to something else); when zooming in, this resolution can be seen in contrast to and on the background of the vector artwork. So this setting has nothing whatsoever to do with the actual resolution of a raster image created from the (vector) artwork (but it ought to (at least) match it).


For clean and crisp artwork avoid JPEG.


It is also important to have the artwork and also the Artboard placed fully within integer/whole pixel X and Y values in the Workspace, which means that the X and Y values at the corners must be integer; this can be ensured by using one of the corner Reference Points in the Transform palette, and then checking that all the values X, Y, W, and H, are integer (the centre Reference Point can only be used if both W and H are even numbers).


Otherwise the resulting image will become a bit wider/taller and the extension(s) will be empty and therefore be (partially) transparent/white.


Therefore, the safest way is to create the artwork at the final pixel x pixel size and use a corresponding Artboard, then use the Legacity Save for Web (where you can look in the Image Size window for size confirmation and possibly multiply by 2, 4, 8, whatever), or use Export at 72PPI (or 144/288/576/whatever PPI), or use Export for Screens (in either way). In either case, use the relevant optimization (available with both ways); it is also convenient to have 72PPI (or 144/288/576/whatever PPI) in the Effect>Document Raster Effect Settings.


If you have pure vector artwork, you can relax a bit and have the artwork/Artboard at any size (the Artboard must have the same proportions as the final image), then use the Legacity Save for Web and set either Width or Height in the Image Size and Apply (make sure the other value is also correct).


The Legacy Save for Web may be an old carthorse, but it knows its way home, even if the driver is drunk and sleeping it off in the hay in the back.

 

Or you can switch to SVG, if applicable.

 

https://helpx.adobe.com/search-results.html?q=svg&scope=%5B%22helpx%22%5D&subscope=%5B%5D&limit=10&s...

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 28, 2022 Jun 28, 2022

Copy link to clipboard

Copied

Yes the upper right corner X/Y is the way to check for whole numbers. Rearrange Artboards can rectify that for all your artboards.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 28, 2022 Jun 28, 2022

Copy link to clipboard

Copied

If I understand you well, you have the stroke at the edges of artboards. How is it aligned? If it's "centered", its width is partly out of the artboard and changes the whole size.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 29, 2022 Jun 29, 2022

Copy link to clipboard

Copied

LATEST

I had the same issue, i was working on ATM screens, we needed them to be exactly, but some screens have 1 px more..

 

the problem that we sometimes move the artboard by mistake some part of pixels.

 

for example below position on canvus, when you export the size will be the same.

Screen Shot 2022-06-29 at 12.46.07 PM.png

 

below example have part of pixels, the resulet when export will be 971px X 545px

Screen Shot 2022-06-29 at 12.46.41 PM.png

 

 

to fix this problem is make sure that nothing are locked, go to artboard panel, rearrange the artnoards.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines