How to Make Images Transparent/Animated, To avoid several help topics...

[RetroXYZ]

Since there are way too many of these topics, I am going to explain how to make an image transparent as well as animated.

Firstly, you need a program other than MSPaint. I'll show you how to do it in GIMP.

Firstly, open up the image you want to make transparent. Click on the Layer Tab and select Transparency > Add Alpha Channel.
Please note that your image must be either GIF or PNG to do this, and not that crappy JPEG. I recommend PNG if you aren't animating it.
Now that you've added an alpha channel, pressing delete whenever you select an area of the image using the select tools will delete that area and make it transparent.

But what if you want partially transparent parts?

Well, to do this, we will have to add in a layer mask. Press Ctrl-L to open up the layers window. Right click the Background layer and then click Add Layer Mask. Click on Transfer layer's alpha channel. Now, you have added a layer mask. Depending on the shades of gray in the mask, it will make different parts of the layer transparent in different amounts. The closer a shade of gray is to white, the more visible it is, and closer to black means less visible. You can right click on the layer to show the layer mask instead of the layer, edit the layer mask instead of the layer, and disable the layer mask to show the layer normally while not deleting the mask. Experiment with this, and eventually you'll get it. Once you're done, click Apply Layer Mask to apply the mask.


How do I animate images? Well, that kind of depends. If you're using this as an animated image for a sig or something, you're best off creating something using APNG. Animated PNG is similar to PNG, and will retain backwards-compatibility with PNG (it will only show up as a normal PNG on non-APNG browsers). Note that it only works in extremely updated browsers such as Firefox 3 and Opera 9. No, it does not work in that crappy **** hole that we call IE.

However, if it is for sprites or something that isn't high-quality color, you can use GIMP. Simply create extra layers for the different frames, and the topmost frame is the last layer, the bottommost frame is the first layer. When you save it, click Save as Animation and specify the framerate (milliseconds between frames, usually set at 100 or 250). Be sure to set the frames to replace and not combine. Voilà! AniGIF.

FAQ

Q: Why does the transparency show up as gray in IE6 or lower?
A: This is one of the reasons why I hate that browser. It renders the background color of the image instead of the transparency. To fix this, set the background color on the GIMP toolbar to whatever you want, and then select Save Background Color when you save the image. However, if you don't have partial transparency, you can go to Image > Mode > Indexed to convert the image to indexed. This will make transparency rendered in an 8-bit index, rendering properly, at the sacrifice of partial transparency. However, you can save it as 8-bit indexed with partial transparency in Adobe Fireworks.

Q: Why does my GIF image end up with weird colors?
A: The GIF format only allows for 256 color, and thus makes it only look well with 16-bit or lower images. Try PNG or APNG instead.

Q: What do all of the "PNG saving options" do?
A: Well, here's what they all do:
- Interlacing (Adam7) = This interlaces the image, making it smoother.
- Save Background Color = Saves the Current Background Color so it looks Differently in IE6 or Lower (see above)
- Save Gamma = Saves the Image Gamma; You Don't Need This, Really
- Save Layer Offset = Saves the Layer Offset, So Layers Order Correctly When Merged
- Save Resolution = Saves PPI Resolution of the Image, Default is 72
- Save Creation Time = Saves Creation Date/Time
- Save Comment = Saves the User Comment Embedded in the Image

Any problems, etc. should be posted so I can fix this. Basically, I wanted to avoid tons of "Make This Image Animated for Me" or "Make This Image Transparent" topics. If you have a purchased image software, use that for transparency.

Have fun.

This post has been edited by RetroXYZ on Aug 11 2008, 08:39 AM

[Funky]

Read the faq. www.iaza.com

[RetroXYZ]

Web Image Editors are fail. Also, you didn't read any of that, did you? This is giving help, not asking for it.