Web Design and Graphics Room

Click to return to Archives

Transparent Giff's from Skyrunner

The transparency is put on a GIF at the time you export it from your graphics program, and save it as a GIF image. Along with all the boxes for you to set dithering etc, there will be an option to set a colour which will appear transparent in the final result.
Course, all programs look slightly different, this is how it appears in mine......


You see the option for transparency on the left, and then the eyedropper tool is used to select the colour to be transparent from the left hand window. (In this case, the pale yellow.)
Make sure your 'preview' is on, and you'll see the chequered areas that indicate transparency appear in the other window.
That chequered stuff means you've got it.
However, you may well have a problem with a drop shadow Peter, because a lot of its pixels will be semi-transparent, and will therefore not be the true colour that is taking the transparency.
So drop shadows look blobby, and don't take out all the background colour.
I have a feeling that there might ....in Photoshop... be an option to make several colours transparent to deal with this. I'll have a play with it later if you have this problem.
Or you can have a hard drop shadow, or none at all.
This is also why there is often a problem with 'fringing' .....soft areas of background colour round your cut-out, usually because of anti-aliasing where some of the edge pixels are semi-transparent.
I'm off out now, but I'll have a look at Fireworks later, see what the GIF export boxes look like in that.
The picture I posted above comes from Corel, but the general idea is the same for all programs, you set the transparency options as part of the optimisation process while exporting for the web.
When you export something as a GIF or JPEG, all the layers are flattened anyway.
So if you have a complicated graphic, it's always wise practice to save it somewhere safe as a Photoshop/fireworks/whatever file, as well as exporting it as a GIF or JPEG for the web, then you can always go back to your original file with all its layers if you want to do further work on it.
Being a web program, Fireworks has lots of options... this is Fireworks 4, and on the File menu, there's Export Preview. It's like this...

You set a transparency on the drop down menu, bottom left.
But now we come to the problem with drop shadows.
This here is simply text on a white background with a drop shadow added, then exported as a GIF with the white background made transparent.
But this is what you get when it's subsequently placed on a colour....

Oh dear! The overspill from the drop shadow has made the surrounding area not quite white, (not exactly #FFFFFF) so it hasn't picked up the transparency.
Now if you go back to the Fireworks Export Preview, you have the facility to make a few more colours transparent.
See that colour swatch on the left? Right-click on a colour that is almost white, and the drop down menu gives you the option to make that colour transparent as well.
Do that with several light colours as has been done here.....

This makes it like this....

Well... it's an improvement, but still not very good is it? I took out 8 shades, and if I carried on, I'd end up with a very hard edged shadow.
This might be helpful if you had a plain colour background, then you could use that plain colour behind your GIF, make that transparent, and the shades remaining in the shadow would blend in with your background.
It may even work if you do your GIF on a background of the predominant colour from your pattern, then make the predominant colour transparent and the shades that are left in the shadow may blend in with your pattern.
It all depends on what your patterned background is like... case of experimenting.
So what are your other options? You could do your text as a transparent GIF with no drop shadow.
Or give it a hard edged shadow. The other way to go depends on your patterned background.
If it's made up with a seamless tile, you could do your text with a drop shadow, give it a background using the same seamless tile, and save it as a little JPEG.
This is quite a useful option to bear in mind, the jpeg background blends in and disappears into the one behind.
On my web site, home page, left hand side, the little thing "Meet the Dogs" and the Nosticks Logo are jpegs done like that.
But the navigation buttons are transparent gifs, as the text was much clearer and sharper as a gif.
The "Clubhouse" at the top of this page, complete with its drop shadow, is a jpeg with a background the same as the rest of the page so it blends in.
Text is usually sharper as a gif, but it doesn't have to be one.
And a photo doesn't have to be a jpeg.... my avatar is a gif with transparency round it, so it sits on the page without a white box round it.
Web graphics are all swings and roundabouts, experimentation and seeing what works.


Click to return to Archives