Like regular GIF images, animated GIFs only support 256 colors so creating GIFs with transparent backgrounds can result in edges that aren’t as crisp as you’d like or have strange strokes added to the elements of your image. This is because with only 256 colors, GIFs don’t support semi-transparency that are required for smooth-looking edges.
So, if you’ve got an animated GIF that you want to use, like the walking animated GIF icon I recently posted, and you want to put that in a presentation or web page that has a non-white background, having a transparent background in the GIF file will usually result in an image with poor quality. The work-around is to add your desired background color in the Photoshop file before you export the animated GIF. This is the reason I’ve included the .psd file in the download – to allow you to change the background color to match the background color of where you’ll be placing the animated GIF icon. It’s pretty simple to do as long as you have even a beginner level understanding of Photoshop. Just follow the steps below to set your own background and output your own new animated GIF.
Note: This tutorial assumes that you’ve already got a .psd file to make an animated GIF like in the download file I provided. Getting that .psd file in the first place, if you don’t already have it, will be the topic of a later article.
1. Open your .psd file
Open your .psd file with Photoshop. Here I’m opening the .psd file that I provided in the download .zip file of the icon guy walking.
2. Create a new layer
You’ll need a new layer to put your background color on. Make sure you have your Layers palette open (if you don’t select Windows > Layers ) and then either select the new layer icon at the bottom of the Layers palatte (the one just to the left of the trash can icon), or select Layers > New from the menu.
You should end up with a new layer just above whatever layer was active.
3. Move the new layer to the bottom of the layer stack
Next, move that new layer to the very bottom of all the other layers (just drag and drop it).
4. Select your background color
Next you want to fill that new layer with your desired background color. Click on the foreground color icon in the tool bar to get the color picker window.
Enter your color in the color picker. Here I’ve just pasted in the hex code for my new blue background.
Select OK, then fill the layer with that color (make sure your new layer is the active layer) by typing Option + Delete on a Mac or Alt + Backspace on a PC. (More about filling on the Adobe website).
5. Save your animated GIF
Now that you’ve got your background color, you’re ready to export your animated GIF. Go to File > Save for Web & Devices
In the window that pops up, select GIF from the pulldown menu and check that the other settings match what’s in the picture below. Depending on your computer and the size of the file it may take a minute to generate the 4 options. Once it has, select Save and save it to your computer.