Transparent gifs in Photoshop Tutorial

1

Make sure you have your image on its own layer with no background.

This is the #1 mistake people make, in older versions of Photoshop you would have saved it on a colored background

2

Now go File>Save for web

You should see this box open.

3

Make your setting gif and use the smallest amount of colors you can without affecting the appearance of the image.

The 2 things to remember here are:

1. Make sure Transparency is selected.

2. Set the Matte color to the closest match of the background color you will be placing the image on. If you are unsure then set the Matte to “None” (more about Matte in step 4)

Click ok and save your image.

4

Some more information on Mattes.

Mattes puts a thin outline around the image to get rid of what we call halos.

On the right you can see an example of a halo. Look familiar? This is the sign of an amateurish webpage. Believe me there are already enough bad webpages out there without us adding to them. 🙂

5

Here is the same image with Matte set to none. Notice the halo is gone, but it is still a bit jaggy around the edges.

6

Here is the same image, this time saved with a black Matte. Notice how nice and sharp it is?

Always choose a matt color if you can. This way all your transparent gifs will look nice and clean.

This Matte trick will also work with transparent PNGs.

Stay tuned for more 🙂

Get in-the-know!

Photoshop VAULT

Access valuable Photoshop extras and goodies for free and much more a

Follow along for more tips

Keep growing with Premium Courses

Photoshop 2026 for Digital Photographers

Learn Photoshop properly, from the basics to pro retouching, step by step.

$129.00 · one-time purchase · instant download

View the course See all courses

Free for you

The Photoshop Vault

Get my free Layer Blending Modes ebook along with dozens of exclusive Photoshop goodies: actions, brushes, presets and cheat sheets.

You're on the list, so your free goodies are waiting for you in the Vault.

Get Free Photoshop Goodies Open the Vault

Make a Cinemagraph from a video in Photoshop, & animated gif tutorial

In this easy Photoshop tutorial, you learn how to make a cinemagraph from a video. You learn how to export it as... Read tutorial →

Hollywood style searchlight in Photoshop Tutorial

Create a hollywood style, spotlight effect. This tutorial came about as a result of a request from the forums. This effect will... Read tutorial →

Kiosk Orbs

This Tutorial has come about due to a few requests. This starts with a fairly simple object, and finally ends up with... Read tutorial →

Cast Shadow in Photoshop Tutorial

What do you do when a drop shadow isn't realistic enough? Create a cast shadow. When you see an object in a... Read tutorial →

Photoshop basics. complex selections with the marquee tools. Adding and subtracting selections

s it possible to make a selection of this semi-complex shape in only 3 selections? Of course the answer is yes. Ok... Read tutorial →

Collaging in Photoshop Photoshop Tutorial

More collaging techniques for Photoshop, using channels and layers.This is a bit more in depth than some of the other tutorials, you... Read tutorial →