Making .gif backgrounds transparent

I feel way out of the loop of things… I have spent two years fully swamped in Robotics and work to do with it. Now, I have finally got back to an old passion of webpage designing… I used to have a place online I went to for graphics… you could design your own graphic in any program… upload the graphic, and there was a feature to make the .gif an image with a transparent background… I thought someone out there might have a hint on how to change a .gif with a solid background to a transparent background. Thanks!

*Originally posted by weedie *
**I feel way out of the loop of things… I have spent two years fully swamped in Robotics and work to do with it. Now, I have finally got back to an old passion of webpage designing… I used to have a place online I went to for graphics… you could design your own graphic in any program… upload the graphic, and there was a feature to make the .gif an image with a transparent background… I thought someone out there might have a hint on how to change a .gif with a solid background to a transparent background. Thanks! **

I think only *.png images can be transparent (the site probably made the *.gif into a *.png, and then returned the *.png back into a *.gif. I’m probably wrong on this…but it’s just what I think/know.

GIF files can also be transparent.

I don’t know of anywhere online that does that. It’s not something I’ve had to do in ages.

Macromedia Fireworks does it, however. I’m sure Photoshop has similar functionality.

Both PNG and GIF can have transparent areas.

PNG can actually be transparent, though, and have different levels of transparency. As in, your page has an image background, with a transparent PNG image over the top of it. However, IE does not support this well (read: at all), so keep that in mind.

So, you can overlay a PNG over an image, and see thru the PNG, but you cannot do that with GIF. Both PNG and GIF can have transparent areas (similar to how the rounded edges of the blue buttons on these forums are).

I’d recommend using PNG instead of GIF in all situations; the compression algorithm is better, plus it isn’t copyrighted (the GIF format’s compression is copyrighted by Unisys, and thus by using it without permission you are technically infringing). IE does support straight-up transparency (not alpha-channel) like in GIFs, so its PNG support is up to par with that. Furthermore, PNGs are usually smaller and load better, depending on your browser’s image library (Mozilla’s is called Libpr0n).

As for making them transparent, this can be done in any respectable image editor, such as Photoshop or PSP. Look up '“transparency” and you’ll surely find it.

To further help explain this. In almost every image editor i have used in order to put a transparency on a gif, when saving the file there is usualy a option in one of the save dialogs that is something to the effect of a check box for transparent back ground and then a way of choosing the background color to make transparent. In photoshop there is a colored box that you can click and then that pops up a color picker window that allows you to choose the transparency color. This option is only available when using a format that supports transparent bg’s.

*Originally posted by jonathan lall *
the GIF format’s compression is copyrighted by Unisys, and thus by using it without permission you are technically infringing

I think I remember reading that you can use GIF’s without worrying. The problem lies in any software that has the ability to export to GIF. They are the ones that have to deal with the whole Unisys mess. [if i understood correctly]

And while we’re on the subject of PNG’s… check this article to learn more about PNGs: Jeffrey Zeldman Presents: The Daily Report

And then go sign this petition to include true PNG support for IE in Windows: Petition Online - Petition Online has been retired

:slight_smile:

Regarding the copyright, this is more or less true, but I seem to recall Unisys sueing large commerical websites for not making their GIFs with a licensed product. Either way, it doesn’t matter at all to most people for the most part. I think of it this way: is there any reason to use GIFs instead of the W3C-standard PNG format? Note: PNG isn’t a replacement for JPEG, and while it can handle high colour unlike GIF, it doesn’t do it as well as JPEG.

You’ve got a long time to wait for IE’s full PNG support, especially since Brian Countryman, Program Manager in Internet Explorer, recently said that they may or may not support alpha-transparency in the next release. This was right after he declared that IE6 SP1 is the final version of IE as a seperate program as we know it (it will be integrated into Longhorn’s install to evade legalities, but will likely remain seperate like it is now). This is fairly unfortunate, because it means that webdesigners have to wait untill 2005 when Microsoft will presumably put out a browser that can do all of CSS1. By that time though, Opera 8 and Mozilla’s Browser will be far ahead.

Even MS Photoeditor can do transparency. Actually even paint can do transparency. But those are both only for .gif files.

*Originally posted by tatsak42 *
**Even MS Photoeditor can do transparency. Actually even paint can do transparency. But those are both only for .gif files. **

Actually, newer version of MS Paint can have support for PNG. Though I don’t think the version I have supports transparency. Come to think of it, it doesn’t even support GIF transparency. Older version do though…

*Originally posted by weedie *
I used to have a place online I went to for graphics… you could design your own graphic in any program… upload the graphic, and there was a feature to make the .gif an image with a transparent background.

If this is the same one that I used to use, it was made by Ulead. Since that time it has been discontinued as a free service (as far as I know). They now have a commercial server-based program called iMira, with a demo located at:

http://imiraediting.ulead.com.tw/imiraediting/

If you were to browse the ulead website for a bit longer http://www.ulead.com then you may find more information about getting iMira, or whether or not Ulead has other products that are similar but not pay-based (like an iMira LE, if one exists)

I should probably note now that in the USA (not other countries), the Unisys rights to the LZW algorithm in GIF just got lifted (i.e. expired). No reason not to use PG though… :slight_smile:

With Photoshop, Illustrator, and Paint Shop Pro (Illustrator is easier to create transparent and/or animated images with), all you have to do is take the image in question (hopefully with a solid-color background), and use the Magic Wand Tool. Click on the background, and hit the delete key, so that you can see the checkerboard beneath. That area will then be transparent.

Then just save it as a gif. If it wasn’t already a gif image, it’ll probabaly whine that you have to set your colour pallette first. Otherwise, you can save it as a png image file.

If you just want to do transparency, it’s easiest with Microsoft Photo Editor. Just load the image, and click the “Set Transparent Color” button. Click the area you want to be transparent, and follow the prompts. Then save it.

There’s also a set transparency function in most graphic-editors…

Or Extract in Photoshop…

i am willing to bet that the reason you are not seeing this free utility for exporting transparent gifs anymore is exactly because of unisys, as someone said they didnt like people exporting their gif format without them cashing in on it, so you see it would be silly for someone to offer a free service to do this if they legally have to pay unisys for doing it

for the same reason such things as the perl GD graphics library (which i was about to use to make you this utility) no longer supports exporting to gif (it did before)

as far as using png vs gif, i would NOT say to always use png, i bet at many circumstances they can get bigger than gifs and of course the whole ms ie problem

one way to go around the internet explorer png problem is to make flash render your png instead, flash mx and maybe some older versions support publishing background-less swf’s. one can put a png in a flash file and save a background-less swf and put that on your page instead. this is of course a lot more cpu intensive as it should be and would probably be silly to add many png to your web page this way, but 1 or 2 may be ok (a lot of advertising people do it like this; when you see those silly things popping up over your webpage and are really slow and weird: thats flash)

to see what i mean check out http://users.wpi.edu/~piotrm/first/flash_png/index.html

PNGs can actually be made to render transparency correctly in IE5.5+ - see the link below for details:

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

(note: it is somewhat of a workaround, but if it works, it works - I would still like to see fully support by IE in the first place)

Gifs are totally capable of being transparent. If you have PS7 You can easily accomplish this. I recommend this program stongly, if you are currently using it i will be glad to tell you how to do it.