Part Two: SHAPE LAYERS, RASTER IMAGES, AND YOU
The narrative around After Effects shape layers has been changing. Once thought of as an afterthought by many, the rise of flat, friendly, human-readable design has lead to an explosion of great, interesting works built on the back of these beautiful vector assets. This is a boon for us because Bodymovin works best with Shape Layers. We’ll cover raster images in a little bit, thinking of and designing these ads as vector project guarantees success.
Vector art imported as shape layers are beneficial due to the fact that it’s saved out directly in JSON file, without the need for additional external files for reference. This keeps your final file very compact, some coming in at just a few dozen kilobytes. In an industry notorious for large file sizes, seeing a full animation in a file that small felt unreal at first, and in many ways still does.
Shape layer features like path trims, animated fill colors, and path animation are fully supported, which open up a wide range of animation opportunities. For importing art, tools like Battle Axe’s Overlord or Zack Lovett’s Explode Shape Layers are a wonderful option. Overlord specifically allows seamless import directly from Illustrator in a single click, and has reduced much of the pain that used to be associated with cleaning up and importing vector files.
Vector art isn’t always viable. Sometimes, a brand or piece of art direction demands the use of photography. When these needs arise, Bodymovin supports use of PNG and JPG images. Always keep file size in mind when using raster images. Our ad networks require the final animation to be compressed, with images, into only 150 KB. This demands that you always be strategic about the kind of images you use. Before importing an image, be sure to process it in the most efficient way possible. Save out compressed JPGs, and for simple transparency, you can use a mask instead of relying on a larger PNG. When PNGs are a necessity, export them as 8-bit files at only the size you’ll need. Compression software, like ImageOptim is a great, streamlined, open source tool that can shave every possible byte off of a file.
You may be wondering: Wait, what about effects? Drop shadows, animated textures, video files and the like? Currently, those aren’t supported, and we’ll cover some of that in part three. But with some clever thinking and careful asset management, you’ll be impressed with how far you can get with this limited toolset Bodymovin supports.
In summary:
- Vector art is ideal
- Simplify your workflow with tools like Overlord or Explode Shape Layers
- Use raster images in cases where vector art won’t do, but know each one can add a lot of relative size to the final deliverable
- Tools like ImageOptim work great at taking JPGs and PNGs down to size a little bit