Matte: GIF Transparency
Listed In Photoshop » General Techniques — Viewing Full TutorialI was just looking through all the tutorials on this site where I stumbled across some pretty rubbish ones about transparency and how to make it work. I've deleted a few and I'll be redoing them properly!
So, let's start off.
What is GIF transparency?
It's exactly what it says on the tin. Transparent pixels on an image will "copy" the colour of the background to attempt (note: attempt) to blend in.
Why are you writing a tutorial on something which seems so simple?
Because a lot of people get it wrong. There are a few things you need to take into account when you're using Photoshop's "Save for Web" feature.
Here's an example. Let's say you have an image with a drop shadow on it, and you want to save it for a webpage where you'd like to put it in:
The drop shadow will need something to blend in to. In the image above, we've got it open in Photoshop so it automatically blends. Assume we have a reddish background and we want it to blend in.
Now, what normally goes wrong? Some people make the matte colour white, which means that instead of red, the transparent pixels will blend into a white background therefore making it look rubbish and giving the image white edges which we don't want. This is how it's done by using Save for Web:
Full Image
You will now notice that the matte colour automatically changes the image's transparency so it will blend in properly.
If you don't know which colour to set the matte to, you need to open up your page's CSS file and take the hex code from the background property. You can then enter it by clicking the Matte Dropdown, then clicking Other, and then entering the 6-digit hex code into the box in the bottom right.
That's all there is to transparency, and in true Blue Peter style, here's one I made earlier:
You can test using this image by saving it and putting it onto a page with a different colour background. You can't miss the difference.
