Skip to main content
All CollectionsAll CollectionsAll Collections / Animatron Studio: Tools and Terminology
How do I download my GIF animation with a transparent background?
How do I download my GIF animation with a transparent background?
Veronika Shakhova avatar
Written by Veronika Shakhova
Updated over a week ago

If you are trying to download your animated project with a transparent background, you may notice that the moving objects in your downloaded GIF animation have a slightly pixelated (aliased) appearance around the edges, where the object meets the site background.

This may break the appearance of the seamless, smooth vector edges you wish to maintain, from your Animatron project.

This is basically due to the difference in bitmap degradation from vector (millions of colors+) to GIF’s maximum color palette (256 colors). The best example of why a GIF animation’s file size stays so small.

However, there is a quick workaround to help alleviate these issues. You should start by setting up your Animatron Project’s background transparency.

Setting up your Project Transparency:

First thing you’ll need to do is change your project’s background opacity to 0%

This will make your GIF animation transparent.

Then, find out the background color of the website you want to apply your transparent GIF to. Ideally you will want to stick with a solid color.

In the Google Chrome Browser:

Right-click on an unobstructed area of the website background and select “Inspect Element” from the list.

You will see the Element Inspector open in your browser window.

Next, locate the hexadecimal code (generally found under "Content" line) that relates to the section of the site you want your GIF's matte transparency to match. This code will look something like #f0f0f0;. Copy only the number and letter portion of this code and paste it into your Animatron Project’s background color HEX field. If you cannot copy/paste, simply write it down and manually type the 6-digit code into your Project's HEX field.

Note: Make sure your background opacity is set to 0% before Publishing.

Now, you can Download your Project and test the Matte Background on your site.

The nature of website backgrounds (gradient colors and/or repeated patterns or images) can be a bit tricky for matching a GIF animation's Matte Background Color. If it is truly necessary, try to match a color that appears most prominent in the area the GIF animation is meant to appear.

Note: Websites that contain gradients or patterns as their backgrounds, will be difficult to maintain anti-aliased edges.

Did this answer your question?