As I mentioned on the first page of this tutorial, a transparent gif really isn't transparent.
The GIF transparency is achieved by selecting a single colour that you instruct the web
browser to ignore. That is important and if you missed it I would recommend you go back to
the first page of this tutorial to learn why.
One of the most asked about tutorial on any PSP website is the
"How do I Make a Transparent Gif?". Once you have made your first one you will wonder why it seemed
so threatening in the first place. We will be using the example of the m_help.gif file we coloured
green on our last tutorial which can be found here. This is the only
hard part because you will have to colour each and every one of Matts images (or someone elses)
because he just has a
white backgound and if you try to make a transparent GIF with his images without colouring the
background green (or
some other different colour) it will look like the image on the right instead of the left.
Yuck!!!
|
|
Notice how the drop shadow becomes shadowed by a "white shadow". The image itself is also all rough
looking and that is because you told the browser to make everything that is colour coded 255/255/255
in the image a transparency. Unfortunately, the drop shadow will have to be removed so you will
lose that 3-D effect (another drawback to transparent gifs). If there is a way to keep the drop
shadow, and you know how it is done, please contact me because I have been unable to learn how.
That is why it is so much easier just to paint the background of the image the same as the background
on your webpage. The ONLY reason to make a
transparent GIF is because you will be putting your graphics on a textured background. But that
has been said already right?
open PSP
open up the image you are going to be turning into a transparent GIF (in this case m_help.gif, already painted green)
click on File/Export/Gif Optimizer to bring up a two windowed screen
select Areas That Match This Colour
See the colour box right beside the "Areas That match This Colour"? Click on it to bring up a seperate window. Notice how that bright green pixel stands right out? Click on that nice bright green pixel and then click ok.
notice the image in the right window now has a checkered background? That means it is now a transparency
but lets make sure some other settings are set
Inside the "GIF optimizer" box you are working in is 4 other folders (to the right of the one you are working on) The next one is labled 'Partial Transparency', click on it and make sure that 'Use a 50% Dither Pattern is checked. Also check Yes, Blend with background colour and check the colour box so you can check the same green pixel (then click OK to go back to the same spot)
Now go to the next folder labled Colors and make sure Existing Palette is ticked. That is the last of the tinkering.
Click OK. This now brings up a Save As window. Save over the original button if you want, or put all your new transparent GIFS in a new folder. That is up to you.
Done. Close it. Simply right? Upload it to your board and see for yourself.
Transparent Gif
1.9 kb |
