Computer Tips / Web Design / make transparent gif in photoshop


How to Make a Transparent .GIF in Photoshop

How do I make a transparent Gif in Photoshop without ugly white edges showing on a dark colored background?

Transparent .gif images are used to enable the background of a web page to show-through the image in certain parts of the transparency. This can make the image appear seamless with surrounding HTML background colors or background pictures when it's saved correctly. Transparent gifs can be useful in web banners, buttons or for other web page graphics. However, the use of transparent gifs can get tricky depending on certain factors and may produce an undesirable pixelation effect around the edges due to anti-aliasing. Remember that not all images or backgrounds are created equal; therefore, you may need to use different techniques in order to get the best results, and depending on the characteristics of the image's background.

The following examples show different techniques (Photoshop settings) used to alter the appearance of a transparent gif:

I saved the "ABC" image as a transparent .gif on a white background and it looks fine. This is because white pixelation is hidden when it's on a white background. No additional steps were needed.
I saved the "ABC" image as a transparent .gif on a white background and it looks fine. This is because white pixelation is hidden when it's on a white background. No additional steps were needed.
The same transparent .gif on a colored background has white pixelated edges that look bad. The pixelation is due to having anti-aliased in Photoshop checked (turned on) and with no Matte.
The same transparent .gif on a colored background has white pixelated edges that look bad. The pixelation is due to having anti-aliased in Photoshop checked (turned on) and with no Matte.
Using Photoshop's Matte, I was able to easily remove the ugly white edges.
Using Photoshop's Matte, I was able to easily remove the ugly white edges.

Instructions to Make a Transparent GIF Using Photoshop's "Save For Web" with Matte

Making a transparent gif is easy using Photoshop with Matte.

STEP 1 - Open Photoshop to create your transparent GIF image. It's not always necessary, but you may want to turn-off or uncheck Anti-aliased if drawing an image (figure 1). For text you can set the anti-aliasing to "none". Make sure there is no background layer behind your image. You should only see Photoshop's transparency grid as the background as shown in figure 2, #1. If you look at your layers #2, you should only see the one layer of the image you are working with. Hide or delete any unused layers if they exist. Then choose File > Save For Web #3.

Figure 1 shows Anti-aliased unchecked but this isn't always necessary. Figure 1 shows Anti-aliased unchecked but this isn't always necessary.

Figure 2 steps for creating your image.
Figure 2 steps for creating your image - You should only see Photoshop's transparency grid as the background as shown in figure 2, #1. If you look at your layers #2, you should only see the one layer of the image you are working with. Hide or delete any unused layers if they exist. Then choose File > Save For Web #3.

STEP 2 - In Photoshop's Save for Web window [Figure 3], #4 select GIF from the drop-down menu, #5 Check Transparency and #6 choose a Matte color. #7 Click on OK to then save your file.

Figure 3 - Photoshop's Save For Web

Figure 3 - Photoshop's Save For Web


comments powered by Disqus