• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
11

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

34.5K

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

Copy link to clipboard

Copied

I am running CS6 on a Mac as part of the Adobe Master Collection.

I have made sure the artboard is set to 0.

I have also changed to global rulers.

I've also quit Illustrator and reset its preferences.

Nothing works!

I expect better from purchasing the CS3 & CS6 Master Collection!

Votes

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 Expert ,
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?

Votes

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

Votes

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

Votes

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!

Votes

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

Votes

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

Votes

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

 




  
  
    

Votes

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

Votes

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

Votes

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

Votes

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

Votes

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

Votes

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 Expert ,
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

Votes

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! 

Votes

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 ,
Jul 06, 2022 Jul 06, 2022

Copy link to clipboard

Copied

Try "Rearrange All Artboards".

 

After trying all the solutions regarding decimal removal, positioning artboard on 0x and 0y and changing to global rulers, I still encountered with the same problem. What fixed it for me was using "Rearrange All Artboards" button on Artboards window. Eventhough Illustrator placed the artboards on positions with decimals, I no longer have extra 1 pixel.

Votes

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 ,
Aug 26, 2022 Aug 26, 2022

Copy link to clipboard

Copied

This IS the fix that worked for me too as the others used to work, but no longer. Thanks for posting! So much time wasted on this stupid "bug". Some will say it's not a bug, but if the only thing that fixes it is the above, then something else has gone awry.

Votes

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

Copy link to clipboard

Copied

Yes
This will work on single artboard, but multi artboard it will not work this formula

Answer:
Step 1: Creat New Artboard
Step 2: In top left there have option (Recent, Web, print, etc..)

dont make in Recent. you have to choose correct one Web or Print
after you can do multi Artboard in that then export the file. It will work 100%

Votes

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 Expert ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

quote

Yes
This will work on single artboard, but multi artboard it will not work this formula


By @Edison5FD5

 

And why will that not work? Setting the top left corner to non-decimal values will of course work. The document unit has to be pixels, naturally.

Votes

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

Copy link to clipboard

Copied

Actually that is glitch. @Monika Gause 

Votes

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 Expert ,
Nov 01, 2022 Nov 01, 2022

Copy link to clipboard

Copied

Says who?

Votes

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

Copy link to clipboard

Copied

Yes
This will work on single artboard, but multi artboard it will not work this formula

Answer:
Step 1: Creat New Artboard
Step 2: In top left there have option (Recent, Web, print, etc..)

dont make in Recent. you have to choose correct one Web or Print
after you can do multi Artboard in that then export the file. It will work 100%

Votes

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 ,
Sep 21, 2023 Sep 21, 2023

Copy link to clipboard

Copied

what worked for me, independently from setting the rulers to global or relative to the artboard, was just aligning the artboards to a round number, so in the x and y position of the artboard, if you see something like "X: 1000.375px. Y: 3712.571px" delete the decimals and that's it. Or use "export selection" which somehow always avoids the pixel problem, but won't let you export a batch of artboards...

Votes

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 Expert ,
Sep 21, 2023 Sep 21, 2023

Copy link to clipboard

Copied

Export selection can also give additional pixels if the dimension of the selection contain fractional numbers.

Artboard rulers can also give additional pixels. Even if the Artboard looks aligned with Artboard Rulers, it can be misaligned when viewed with Global Rulers.

Votes

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 ,
Sep 21, 2023 Sep 21, 2023

Copy link to clipboard

Copied

This is something I didn't know. I wonder if Indesign has the same issue as Illustrator. Once you send the Indesign file to printers, they will export it to PDF in order to make printing plates. Then the images get blurry because they are not aligned to pixel grid and the exporting process resamples images to a new document. I personally think the same thing happens at 300dpi level although it is much subtler to notice than exporting to web in Illustrator. But I wonder what your thoughts on this or if you have noticed anything similar in Indesign.

Votes

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