How To Export Transparent Videos Using After Effects

How to export transparent no text - Featured Image

Transparent videos are a versatile and powerful tool for video creators. They can be used to create overlays, transition effects, and other creative effects that would not be possible with traditional video. After Effects is a powerful video editing software that allows users to make and export transparent videos.

To be able to use a transparent video on your website, there are 2 phases that you need to go through. First is rendering of the MOV, a massive lossless file format, and second is converting this file to a more web–friendly file format called “WebM”. WebM works very well on PC and Android devices but not on Apple devices, so we are also going to show another step you must take to make it.

Step 1: Export the file

After doing the necessary editing, you should export the file. Click “File > Export”.

Ensure you are hiding any solids, as we want to ensure you are exporting it as a transparent video.

Step 2: Click your composition name

On your After Effects Render queue click your composition name. Then a dialog box called Output Module Settings should appear.

Step 3: Select QuickTime format

Under output module settings, select “QuickTime” as the format.

Step 4: Select RGB+Alpha

After changing the format to QuickTime. Under Channels select “RGB+Alpha” (important). Only change that, the rest (depth, color etc.) remains the same.

Step 5: Change Format Options

The last setting to change is Format Options: Make sure it is in “Apple ProRes 4444”.

(Note: Quicktime RGB+Alpha default codec will work for Windows devices; you must change this to Apple Pro Res 4444 if you want to use this transparent file on a MAC device).

Then press “Okay”.

Step 6: Press "Output to"

Press “Output to”, then it’s up to you to specify in which directory you want your video to be exported.

The result:
The resulting file should look like this.

“It’s transparent, but it’s a massive file (500 MB for a 26-second transparent video)!

Now it’s time for Phase 2. MAC and Windows have different Phase 2. The goal of Phase 2 is to compress this massive file and make it web-friendly, which works on all Operating Systems.

See Phase 2: For Windows Devices here. ->
See Phase 2: For MAC Devices here ->

Phase 2: (For Windows devices) - Compression to WebM

To make it friendly for website users you convert this MOV file to WeBM.

What is webm?

WebM is an open, royalty-free media file format designed for the web. It is primarily intended to offer a royalty-free alternative to use in the HTML5 video and the HTML5 audio elements. It has a sister project, WebP, for images.

It will be a little bit more technical at this stage but follow step by step, and you will get the same result.

Step 1:

Download FFMPEG

Step 2:

In the FFMPEG folder, there’s a folder called bin put your output video in this folder.

Step 3:

Next, Open CMD. Click the Windows button, then search for “CMD”, then open it.

Step 4:
Ensure you are doing this on the drive where your file is. My file is in Drive D and CMD opens Drive C as default, so I have to type “D:” first in the command line to tell CMD to look in Drive D:

Go to where your ffmpeg folder bin directory. Copy file path then in CMD type “cv <<paste your copied file path>>”

Step 5:

Then, paste this code to CMD. “.\ffmpeg -i “inputvideo.mov” -c:v libvpx-vp9 outputvideo.webm“.

Note: Make sure to change the text after –i to the name of the video exported in MOV.

Step 6:

Note: The text after –i refers to the input video name, which we named “transparent walk animation.mov”. The text after -c refers to the output video name in webm format.

However, the input video name must not contain spaces. So, I will rename our video file from transparent walk animation.mov to transparentmov.

In our case, I will change the code to: “.\ffmpeg -i “transparentmov.mov” -c:v libvpx-vp9 transparentwebm.webm“

Then press enter:
Step 7:
Wait a couple of minutes then Voila! WebM video done! Transparent and small. It will compress MOV size to small bits of mb that is super great for website use.

Read more about WebM. Click here!

This format works best on Windows and Android devices only. Scroll down to see how to do it on a MAC device.

Phase 2: To encode a media file to HEVC/H.265 with preserved transparency on a Mac/Apple device, you can use the following steps:

What is HEVC/H.265?

HEVC, or H.265, is a widely accepted and supported video format now. It is a new video codec capable of high compression while quality is preserved. Compared to other formats, such as H.264, it could store a 1-minute 4K video with less file size.

Before proceeding with the encoding, it is important to check the media file codec and format to see if it is compatible with encoding. To start:

Step 1:
Locate the media file (video file). Select and right-click to view the options.
Step 2:

Click “Get Info”.

Step 3:
On the Get Info window, check the Codecs if it is compatible with the following listed supported codecs:
Step 4:
After confirming the compatible codec, close the Get Info window to proceed with the compression.

Once done with checking the media file’s compatibility for encoding, encoding can be started.

Step 1:
Select the media and right-click to view the options.
Step 2:

Select “Services” and click Encode Selected Video Files.

Step 3:
On the Encode Media window, select Setting and choose HEVC 1080P (2160p and 4320p can also be selected).
Step 4:

Once selected, tick the box “Preserve Transparency”. This will allow the media file to be converted with a transparent background.

Step 5:

Click Continue, and the Encode Media window closes.

Wait for the file to be encoded, as it will appear beside the original file. The media file has completed its encoding once it is renamed name_of_file-1.mov, and it is ready for web development usage.

Conclusion

To summarize, to use a transparent video on your website, you need first to render it as a MOV file and then convert it to a WebM file. WebM is a web-friendly format that works well on PC and Android devices but not on Apple devices. To make your video compatible with Apple devices, you can export it as an HEVC file.

Special Tip

This workflow was inspired by developers who wish to use transparent videos in developing their websites. WebM transparent videos are not yet compatible with Apple devices.

So, if you view them on your website using Apple devices, you might see them with a black background. That’s where the other format comes in. Apple’s WebM equivalent is the lightweight and website-friendly HEVC format.

The dev could then add a script to show one or the other depending on the device used to visit the website. And users from any device should be able to view your output as it should be.

Hope this helps!

Need regular help with marketing tasks?

If you need continuous help with the website, design, and content, you should consider subscribing to a marketing department.

With that, you have access to an entire marketing department consisting of a web developer, designer, content producer and digital marketer for a minimum of 32 hours per month.

Don’t forget to share this post!

Explore More Marketing Tips!

No posts found
Scroll to Top