GrafX-Design.com
Home Tutorials Reviews Email Us
GrafX-Design.com
 tutorials | resources | inspiration 

Paint Shop Pro Tutorials -- Transparent GIFs

Creating Transparent GIFs with Paint Shop Pro


We've all seen those pages with graphics that don't quite match the background they are set against, and we've also seen the sites where they do. We all know that it's done using GIF's that have a transparent background; that is, they allow the background they're placed against to show through. It certainly looks a lot more professional than a mismatched graphic/background combination. What we don't all know is how it's done. Well, here's the secret!

This tutorial will show you how to make your GIF's have a transparent background. I used Paint Shop Pro, which is available from Jasc Software Inc. Check out their site for a full working shareware demo.

Okay, let's get started. We'll work through an example first and then I'll explain what to do to convert your existing images. Open a new file and give it 200 as the width and 100 as the height. Also make sure you use 16.7 million as the color depth. This is so that we can use any effects we might need later.

I'm using gray as the background color for clarity but you should choose something that's close to the color you'll be setting this graphic against. If the graphic does not have the same color background as you want, change the foreground color to the color you want and use the fill tool to set the graphic to that color. For example I now have a graphic that's totally gray:

figure 5.1
figure 5.1



If later we "SOFTEN" or, in PSP 4.1, "FEATHER" the graphic, the computer will mix the colors so that they blend well against the current background color. If this is close to what we'll display the graphic against, we'll get the effect we want. Now, on the select window double click on the forground color square or, in PSP 4.1, select a color from the color swatch at the right of the screen; I chose blue. Draw a"SOLID" oval.

TIP: If you're using PSP 4.1, rather than drawing the oval, use the selection tool to outline an oval and make sure that the "FEATHER" option is set to about 5. Then use the fill tool to fill the selected oval area. This will smooth out the jaggies on the oval automatically.


If you're using PSP 3.xx select "IMAGE">>"NORMAL FILTERS">>"SOFTEN MORE" to help kill those jaggies.

Choose another color and set some text on top of the oval. Our graphic is now ready to be saved.

To achieve that transparent graphic look we must now do a couple of things:
  1. Make sure that the current background color is the same as the background of our graphic.
  2. Save the graphics as a GIF89a--this is very important!
  3. Under "OPTIONS" in the "SAVE AS" dialog box find the line that says "Set the transparency value to the background color."


Then, instead of your graphic looking like this:

figure 5.2
figure 5.2



it'll look like this:

figure 5.3
figure 5.3



The program will tell you that it needs to decrease the color depth to 256 colors in order to save the graphic as a GIF. That's okay. It's just one of the limitations you have to put up with if you want a transparent background.

Well, this is how it's done if you're starting a new graphic but what if you have a previously-created graphic that you want to display with a transparent background? Simple... sort of :) Try this.

  1. Load your file into PSP.
  2. Set the current background color to the color of the graphic's background by using the eyedropper tool and clicking the right mouse button on the background area of your graphic.
  3. Save the graphic as a GIF89a--this is very important!
  4. Under "OPTIONS" in the "SAVE AS" dialog box find the line that says "Set the transparency value to the background color."


This should make the background of your graphic transparent. If you end up with artifacts (dots on your graphic) or a partially transparent background you will have to fix the graphic. What has happened is that, although it looks as though it's all one color to the naked eye, there are actually several similar colors in the background. This can result from, for example, dithering. If the file was once a JPG and was then changed to a GIF you'll have this problem. You may get the same unwanted effect when starting with 16.7 million colors and later reducing the color resolution to 256 colors. The only thing to do at this point is roll up your sleeves, use the "ZOOM IN" option and spend some time pixel editing the graphic until the background is one solid color. Other than that you should now have a web-ready GIF with a transparent background.

Good luck... Just make sure that you don't end up with the

figure 5.4
figure 5.4



syndrome :)


That's it.... Be sure to check out some of our other Paint Shop Pro tutorials.


High Quality video-based tutorials

...with over 300 different titles, all taught by professionals. Learn any application in a fraction of the time right from your own desktop. This unique method offers accelerated learning and a high retention rate. Here are a couple of topics that you might find interesting. View free demos of the courses using one of the links listed below.
Corel Paint Shop Pro X Essentials Paint Shop Pro 7 Tutorials


Previous Paint Shop Pro Tutorial Paint Shop Pro Tutorials Next Paint Shop Pro Tutorial
[Previous Tutorial]  [Paint Shop Pro Tutorials]  [Next Tutorial]



We'd like to hear from you... If there are any Paint Shop Pro techniques you'd like to see covered, send us an e-mail.

 

Current Favorites

Here's of list of our most popular graphics tutorials:

Adobe Photoshop Tutorials

Quick Mask Have you ever wanted to do a little cutting and pasting and make it look as if your head was on someone else's body? Read more....

Corel (JASC)
Paint Shop Pro Tutorials

Transparent GIFs This technique demonstrates how to create transparent GIFs in Paint Shop Pro Read more....


Xara Xtreme Pro Tutorials

Illustrating a Guitar - Part 1 It may seem to be quite an undertaking to create a realistic illustration of something like an electric guitar, but I wanted to challenge the ease-of-use of this software. Read more....


Corel DRAW! Tutorials

Creating Complex Shapes Drawing circles, squares, triangles , etc. is easy with a vector program. How do you combine these shapes to create something more complex, though? Follow this tutorial and you'll see how easy it can be to create just about any shape you need. Read more....

Software Deals

Download and try out the free demos and then save 10%, 20% and more when you decide to buy!

GrafX-Design.com
has partnered with some of the best graphics software companies in the World to offer you terrific savings on your favorite programs.

AlienSkin


Photoshop Plugins
AlienSkin Software - They will never wear suits! We've been using AlienSkin's Photoshop Plug-ins for over a decade and they are still our favorites.

AutoFX


Photoshop Plugins

Xara 3D


Create amazing, high-quality 3D graphics easily!

Read our review of Xara 3D 6 or click the graphic below to download a free trial version.


GrafX-Design.com



Comments/Questions   ||   Copyright © 1996-2009 GrafX-Design.com -- All rights reserved   ||   Privacy