After Effects is a fantastic tool to create motion studies of a website or an app. Inspired by Dear Ueno: How do I use After Effects to create motion studies?, I started experimenting with AE to create more complete experiences with my designs.
While I love how expressive it allows me to get with my designs, there were a few problems I experienced. It took me several days to figure out a simple solution that optimizes both quality and size, so I wanted to share with the world.
Take a look at these static screens of a flow one might design:
Here’s a side by side comparison between the Sketch document and exported video. The AE composition was sent from AE to Media Encoder and rendered using H.264 codec with the sRGB color space specified.
There were a few problems with this render:
- As shown above, colors in the video are a lot more washed out than the Sketch source. This is obviously bad because it showcases the design different from as intended, and the left meets AA/AA+ accessibility standards while the right does not.
- Rendering and exporting takes more than an hour on my toaster for this 30 second composition. While GIFs are great for showing micro-interactions, it would be too heavy with too much quality sacrifice for a colorful 30 second composition.
- File size was 24mb when rendered using CBR at 10mbps. That’s.. pretty big to put on the internet!
Better Way To Export
1. Render To DNxHD From After Effects
From File → Export → Add To Render Queue, click the blue link (“Lossless” for me by default) next to Output Module. It will open the Output Module Settings which looks like this:
Click on the Color Management tab and set your color space with the dropdown next to Output profile. This specific work was for the web, so mine is set to sRGB.
Then, go back to Main Options tab and click Format Options on the right of Video Output. Click the Video Codec dropdown and select DNxHR / DNxHD and keep the resolution tab at DNxHR HQ 8-bit.
Press OK twice, set the output name and destination through the blue link next to Output To, and click Render! This will create a giant “master” file. It didn’t take too long (15 ~ 30 minutes?) compared to the previous version (more than an hour).
2. Import And Re-Render From Media Encoder Using H.264 Codec
Open Adobe Media Encoder (CC 2019 at the time of writing), and navigate to File → Add Source (or CMD + I) and select the master file (the giant one). You’ll see that a task has been added to the queue.
Click Match Source-High bitrate and it will open the Export Settings popup.
Scroll down the Video tab to find the Bitrate Settings. Open the dropdown next to Bitrate Encoding to CBR, and set the Target Bitrate [Mbps] to anywhere from 4 ~ 10. Higher bitrate will render a higher quality video at the cost of a larger file size. Since rendering a video from this master file only takes seconds, you might want to render multiple versions and compare side-by-side. Often, you’ll be able to lower the bitrate and file size without noticeable quality sacrifices.
As you can see above, the file size decreases dramatically as the bitrate decreases. I was able to decrease the bitrate until 4~5 Mbps without major quality sacrifices.
3. Compress The Video (Optional)
If you need to further compress the video, HandBrake is a fantastic tool to lower the file size. For motion case studies of a user interface, I prefer not to compress much—it’s way easier in comparison to compress photos without noticing too much quality loss. Also, this motion case study was not showcased in a production level website where load time was a crucial factor.
You can find all the settings needed to use HandBrake in the Video tab once you load the source video.
There are two things to worry about here: Framerate (FPS) and Quality. 60 FPS is highly recommended for UI motion since monitors mostly run 60+ FPS nowadays. Figuring out the perfect RF value for quality is another one of those trial and error scenarios, similar to finding the best bitrate value in Media Encoder. HandBrake’s official documentation recommends RF 19~23 for 720p, 20~24 to 1080p, and 22~28 for 4K. For a 720p video (1280px by 720px), I personally found RF 10 to be the best. The default RF 22 made my boxes quite blurry. It cut the file size by 41.17% (15.3MB → 9MB) without noticeable quality sacrifices!
And..that’s pretty much it! Here’s the result:
If you have any questions or feedback, feel free to DM me on Twitter (@jayhxmo) or send me an email to jay[at]jaymo.io. Quick shout-out and thanks to Jenny Johannesson for helping me arrive to this workflow!
