Only for AI to AE people, pixel art gap issue

Question

I created pixel art via AI, using a rectangular grid tool + live paint bucket tool, with anti-aliasing off and snap to pixel grid on, when importing the .ai file into AE there is literal gaps in between the pixels, you can see the transparent grid behind through the gaps. The only solution i found after hours of digging is to duplicate the layers in AE, which works but at the expense of file size and system resources.

Please help i can't find a decent solution i dont know what to do!

P.s I need it as .ai for vector purposes, as their going to be used as lottie (.json) animations (super small file sizes and javascript integration is seamless). I am not working with rasters.

Rick Gerard · Answer

Vector art is rasterized to the nearest pixel with you put it in an app like After Effects or Premiere Pro because video is only pixels.

The fix is to open the artwork in Illustrator, turn on View/Snap To Pixel and Pixel Preview, then set the magnification to 400 or 800% and make sure that all of the critical horizontal and vertical edges are perfectly lined up with the pixel grid. A stroke width of 1 pixel can be problematic.

When you have the artwork fixed, the position problems in After Effects should disappear unless you have moved or scaled the artwork more or less than an even number of pixels.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded