Making .gif backgrounds transparent

[Ashley Weed]

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!

[Raven_Writer]

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.

[Madison]

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.

[Brandon Martus]

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).

[jonathan lall]

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.

[Josh Hambright]

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.

[Brandon Martus]

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: http://www.zeldman.com/daily/0503c.shtml#pngofregret

And then go sign this petition to include true PNG support for IE in Windows: http://www.petitiononline.com/msiepng/petition.html

[jonathan lall]

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.

[tatsak42]

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

[jon]

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...

[Timothy D. Ginn]

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)

[jonathan lall]

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...

[Jnadke]

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.

[Kaelia]

There's also a set transparency function in most graphic-editors...

[...............]

Or Extract in Photoshop....