Understanding how Transparent Gif's work in PSP

An Introduction to how Transparency Works:

One of the most difficult things for beginners to understand is how to create a transparent image for the web. But never fear, if you're someone who's struggled with transparency you're not alone. Transparent images (i.e. where an image appears on a web page so that it blends in perfectly with its background) are, and always have been, the number one topic in help forums, newsgroups and anywhere else where artists discuss wielding pixels instead of paintbrushes. The main concept you need to grasp here is that when working in PSP, Photoshop, Painter or any other quality paint program, there are actually two different kinds of transparency at work.

In a nutshell they are: transparency for creating images within PSP, and another kind of transparency for when you're ready to place it on a web page. Most beginners don't realise this (and let's face it, how could they?) and confuse transparency within PSP itself (as in when you see the chequerboard image when you create a new image with a transparent background) with an actual transparent image. It's an easy mistake for beginners to make, and a very frustrating one (I know, been there, done that!).

Tip: Just in case you've never heard of the term 'transparent gif', here's the lowdown. An image cannot appear with a transparent background on a web page unless it is in .gif format. Any other type of image format, such as .jpg, .bmp, .png and so on CANNOT be made to have a transparent background. This is because the .gif format is the only format (to my knowledge anyhow) that can have it's color depth reduced efficiently enough to help make those unwanted pixels in the background of your image disappear. However that's enough technobabble for now...more on color depth below.

Here's a common scenario: you toil away for an hour or more creating that treasured image, save it and then place it on your web page only to discover that it has an ugly white background (which does not look good at all when set against that gorgeous dark blue patterned tile you created earlier!) So, what's going on here? You did everything right, huh? You wanted to make a button, so you opened up PSP, created a new image with a transparent background, created a shape and filled it with some eyecatching color, slapped some text on it, saved it, placed it carefully in the html code for your page, refreshed your browser to see what it looked like and then....agggggggggh!! It's got an ugly white border around it. Just exactly where did you go wrong?! Okay, let's go back to the beginning . . . .

Believe it or not, your problems began at the exact moment when you created your new image. All true transparent gif's must be created on a background of solid color. Yes, you heard me - forget about creating something on a transparent background in PSP! Anything that's created on the chequerboard background in PSP will always appear with a white background on a web page. Why? Because PSP automatically puts them there, that's why. It has to be told you don't want them there.

So that's where your uninvited pixels are coming from. Then what's the best way to get around this problem? Well, for starters it is highly preferable if you already know the color you plan on having for your webpage. For instance, if you want a black web page, simply create your button on a solid background of black, (and you can even save it as a .jpg if you do this) place it on your web page, and voila: black on black, and it will blend in perfectly. This a great "cheat", and you don't even have to create your image as a gif. But what if you already have a perfectly good image that you've already created that you want to make transparent to match any color background? No problem - you simply tell PSP to reduce those pixels and save it as a gif. Before we go any further though, you should remember that this method will work best with existing .psp images. Not .jpgs, not other .gif's - only images saved in PSP's native format.

Tip: Make sure you save everything you create in .psp format. That's not only going to make life a hell of a lot easier for creating transparent .gif's out of existing images, but it's also a really good habit to get into anyway.

Before we start the actual tutorial steps, here's a quick reminder: To create an image with a true transparent background, you must create it on a solid color background to begin with. How come? PSP needs to be told to make a background transparent....so you must have something there in the first place to work with. Still confused?? Read on, and hopefully it'll all make more sense in a minute. ;-)

Note: This tutorial may be downloaded or printed out for personal use only. It must not, under any circumstances, be taken from this site in its entirety or in parts and passed around Yahoo or MSN Groups, re-posted on other websites or passed on to other individuals. Placing a link on your Group's site or your own site is fine, and passing links around is also fine. But links ONLY please. There are logos available on my resources page if you wish to use one. Thank you for your co-operation.

As always, if you have any questions about this tut, or any comments or suggestions in general your feedback is always welcome. Just click on the link above to contact me.

Wrong! Never try creating a transparent image on PSP's own transparent background.		ALWAYS create a new image with a SOLID background color for transparent images for your web page.