Quick Tip: One GIF export setting to avoid notorious pixels in the background

 

Gifs everywhere!

 Today's quick tip is about exporting gifs.

Video Link: https://youtu.be/JpTcIc4ctcU

I was working with a gif to put in my website and when I tried to...

As the image is floating with some css magic, it has more than one background color every time it moves. When you have just one, you can use perfectly the Matte option in Photoshop. But this was not the case. It is a transparent image with several backgrounds colors (and positions).

First, export to Web using the Save for Web(Legacy) option.

Secong, choose the GIF options of your choice.

The Adobe website have an interesting article about the options to save gifs here: Optimization options for Images and Animated GIFs https://helpx.adobe.com/animate/using/optimization-options-for-images-and-animated-gifs.html

Third, choose Matte: None, because we do not want any color on the pixels of the background of the GIF.

When I should recommend it? When the background has just one color, then you can use the Matte option to colorize the pixels to merge them with the background.

Behind the Scenes

1.- Font in use:  Playfair Display by Claus Eggers Sørensen.
2.- Video made with Adobe Spark:   https://spark.adobe.com
3.- Free MacBook Pro Clay Mockup by Sovon Halder