The solution to the extra pixel problem

Enthusiast ,
Aug 03, 2017 Aug 03, 2017

Copy link to clipboard

Copied

Illustrator allows for sub-pixel accuracy in artwork and artboard positioning and sizes. To get a clean, precise export for screens, your artboard needs to be aligned to the pixel grid. This means all its edges need to perfectly line up with the pixel grid.

Sometimes Illustrator, using Export for Screens, exports an image with an extra pixel row or column, and many consider this to be a bug. However, while it is certainly not desirable behaviour, and could benefit from more intelligent handling, there is sound logic behind it.

The root of the problem is when the Artboard Reference Point is set to center. This means the X & Y coordinates are based on the center point of the artboard.

Consequently, when the width or height of your artboard is an odd number, the edges of the artboard are pushed off the pixel grid, and end up in between pixels. Illustrator then tries to compensate for this during export and ends up adding an extra pixel.

Example:

Artboard width: 99 px, X postion: 0

The left edge ends up at -49.5 px because the X position is actually based on the middle point of the artboard, not the left edge, so 99÷2 = 49.5.

The solution:

First, make sure that your artboard X, Y and width and height are all clean, whole numbers.

Then,

A) If your reference point is set to center, compensate by offsetting your X or Y position by 0.5, which will align the left/top edges to the pixel grid.

Alternatively, and preferably,

B) set your artboard reference point to the top left corner and you can then deal with whole numbers instead of messing around with decimals.

Important note about Save for Web (Legacy):

Some people suggest using this to force Illustrator to export at a particular size. Be aware though that if your artboard and/or artwork is not aligned to the pixel grid then Illustrator will export your artwork with blurry edges, because it will try to blend (anti-alias) 2 pixels together. The cleaner and more precise approach is to make sure everything is aligned to the pixel grid and to use the newer Export for Screens dialog.

Views

14.5K

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 ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

Please share an example using dropbox , wetransfer ot other sharing method.

And explain what does not work, what and how do you export as what and at what resolution?

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
Community Beginner ,
Oct 31, 2019 Oct 31, 2019

Copy link to clipboard

Copied

I've made sure all of my artboards are set at whole coordinates...now I'm getting proper pixel sizes on 6/8 of my images. Using export for screens, 1x png. 😕 

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 ,
Oct 31, 2019 Oct 31, 2019

Copy link to clipboard

Copied

Please share an example using dropbox , wetransfer or other sharing method like CC filesharing.

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 ,
Apr 07, 2020 Apr 07, 2020

Copy link to clipboard

Copied

hi,
is this the only way to sort this out? I am seeing sometimes more than one pixel added. I check the size with the info tool and when I export I see one pixel or more...thanks!

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 ,
Apr 17, 2020 Apr 17, 2020

Copy link to clipboard

Copied

Guys,

I am getting a bit frustrated: I have 100 Icons to export, how is it possible? 
Illustrator is one of the top softwares, why does it add a pixel when I didn't draw it? 

I would need a solution that wouldn't take a ton of time, considering the work I have to do....

Also I would suggest Adobe to make things a bit more intuitive.... If I don't draw the pixel, I get a pixel added and I need to find a solution, which doesn't seem fast and smooth...

I would suggest the approach: "if we don't draw an extra pixel, I shouldn't need to use time to understand why I am getting outcomes that I haven't produced..." that would simplify things a lot...

Thanks

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 ,
Apr 17, 2020 Apr 17, 2020

Copy link to clipboard

Copied

"Illustrator is one of the top softwares, why does it add a pixel when I didn't draw it?"

Illustrator is, unlike Photoshop that is pixel based, a vector editing program that does not draw pixels.

It can generate pixels when you export to an image format.

If you don't want extra pixels to be generated, you need to:

Work with pixels or points as the unit.

Make sure you don't use fractional pixel values in your artboards and their XY position.

Export artboards at 72 ppi or multiples of 72 ppi.

If you have 100 Icons, make sure that each icon has its own artboard and choose Rearrange all Artboards to align them to whole pixel coordinates.

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
Explorer ,
Nov 26, 2020 Nov 26, 2020

Copy link to clipboard

Copied

Alas, the problem persists for me even after following the steps outlined in this conversation.  

 

  I create 3 rectangles (2 px height, 100 px length) with only fill and no stroke.  When I zoom to max to view them using pixel preview they appear as they should with no bleeding (see the LEFT side of the attached image) but when I export for screens  & bring the png back in there is overlap/ bleeding (see the RIGHT side of the attached image).  

 

    I've set the reference points for all artwork & artboards (I have a few) to the top left and taken every step to ensure that everything in the project is pixel perfect including ensuring that all positions are in whole pixels (no fractions).  

  I'm using global rulers (not artboard rulers).


  As I'm programing LED props (each pixel is 1 LED) even 1 px difference becomes a very visible problem.  Thanks for any further ideas/ solutions to this unresolved issue.  

Regards, 
JenScreenshot 2020-11-26 at 12.09.39.png

 




  
  
    

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 ,
Nov 26, 2020 Nov 26, 2020

Copy link to clipboard

Copied

Hi Jen, can you share an example Illustrator file? 

CCfolder file sharing, Dropbox, WeTransfer, Google....

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
Explorer ,
Nov 26, 2020 Nov 26, 2020

Copy link to clipboard

Copied

Hi Ton,  

 

  Sure.  Here is the ai file:  https://drive.google.com/file/d/1ajReDTOvGS8uOW6EAMooaMUJDuD1e6vm/view?usp=sharing

 

thanks,

Jen

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 ,
Nov 26, 2020 Nov 26, 2020

Copy link to clipboard

Copied

Thank you Jen,

I cannot reproduce the extra pixel, but there is something weird with the anti aliasing in your file. When I copy an object to a new file it works as expected.

I have to look into it a little more to hopefully find what is causing the problem.

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
Explorer ,
Nov 27, 2020 Nov 27, 2020

Copy link to clipboard

Copied

After a few more hours of testing I'm convinced that this is a bug to do with the new Larger Canvas Format launched in version 24.2 of June this year.  I can't reproduce the problem on a regular sized canvas whereas it works (fails) every time when using the larger canvas format. 

After 3 days of trying to find a solution, this has been a dead end for my project.  If I want to avoid the overlap/ bleeding between pixels I must use a regular sized canvas and yet a regular sized canvas isn't wide enough for my project. 

: (
Looks like I may switch over to photoshop to avoid this.  Hopefully something like artboards exist there...

thanks anyway Ton!  ; ) 
Jen

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
Explorer ,
Nov 27, 2020 Nov 27, 2020

Copy link to clipboard

Copied

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 ,
Nov 27, 2020 Nov 27, 2020

Copy link to clipboard

Copied

Hi Jen,

I had not noticed the large canvas, but I think you are right, that can cause the problem.

Large canvas seems to use some kind of scaling trick and that could result in the anti aliasing you noticed.

So that's another thing to be aware of to avoid the additional pixel problem (aka white line fever).

(Yes, Photoshop has artboards too).

regards, 

Ton

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
Explorer ,
Nov 27, 2020 Nov 27, 2020

Copy link to clipboard

Copied

thanks again Ton! 

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