Welcome to Photoshop Tutorials. We hope you find the tutorials on our website useful. We update the site weekly so make sure you come check us out at least once a week.  If you have tutorials you would like us to feature, feel free to contact us. Enjoy.
 

Sponsors

How to create clean, sharp transparent gifs PDF  | Print |

I have had many people ask how to save transparent gifs in Photoshop
This tutorial will also show you how to get rid of the nasty colored outlines called "halos"

Step1:
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
 


 

Step2:
Now go File>Save for web

You should see this box open.

Step3:
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.

 

 

 

 

 

 

 


 

Step4:
Some more information on Matte.

Matte 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. :)



 

Step5:
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.


Step6:
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 Matt trick will also work with transparent PNGs.

Stay tuned for more :)

 

Tutorial Source

 
< Prev   Next >