Guide to Transparent Animation

[Vulture]

What's this tutorial all about?: Making the background to either an image or an animation transparent when you have white in the image.
What Program is this for: Uses MSPaint.exe and Gimp, as well as a website.
Difficulty level?; Beginner/Amateur (Amateur's can use this to recolour every sprite to have an animated recolour)
Video Recording?: No
How many pages to this tutorial?: 1 or 2? I dunno, it's a post.
Have any tips? Follow my tutorial word for word, do NOT try to skip a step.

(If this thread/post is in the wrong place, feel free to move it :X)

First off take your base image (For this guide I'll assume you are doing animations with a pokemon that has white in it)
I'll use this.. and I'll pull these animations from http://pokestadium.com

(Had to put it in a quote to show it's not transparent)

Now you take this image, save it (to check frame rate and other stuff) and then go to a website that allows you to edit gifs (this makes it easier then using gimp, even though you will need gimp later)

For this guide I'll use - http://www.online-image-editor.com/

Now you take your image and either use the url or upload it yourself.. Now I'll refer to screenshots to shows you what to do.
- Click Wizards
- Gif Only
- Click this
Right Click - Save As
Right done here for now, close this page out or just delete the thing so you can re-upload a new image to it later.

Now, go to where you saved it, there should be a folder named Free Online Image Editor_Files, open this.


I use Shift and arrow keys to get the effect of this, copy these files into a new folder and delete the file named frame2.


Right, now you are going to do a select-all (Ctrl+A on Windows), de-select frame015 and any higher if there are more frames) and right click edit.. This opens a max of 15 files at a time on me, not sure how to change that, and then select the left-over files (if there are more then 30 files this next step will take a while).

Right now that you have every single frame opened in an instance of mspaint, minimize every running program but the mspaint instances.

Now, you are going to select a colour that does not match ANY of the colours of the pokemon.. for abra I'm going to use a bright pink.


Now on every single one of the images, fill the background (and anything not part of the pokémon with your chosen colour.


Now this is REALLY IMPORTANT, and I cannot stress this enough.. you do not save this normally, you have to save each one of this as a different file as a .png


I'm going to use the same folder the others are in simply because of ease of access, however if you want to make it simpler on yourself you can put all these .png's in a different folder from the one all your .gif are in.

Right after you've finished all that (the time it takes depends on how fast you are or if the image requires you to fill in multiple parts. Anyways, you should have something equivalent to this in a folder now. (Note: If you used a different folder obviously you won't have the .gif in the same folder as the .png


Right, now we go back to http://www.online-image-editor.com/ and upload frame000.png. Also, make sure to click And make sure it is set as GIF, however do NOT click resize this photo.


Now, click as we need to add the rest of the frames to the image, now upload these frames IN order from 001-0XX where XX is the max image (as animations don't all have the same amount of frames)..
You should come out to an equivalent of this.

Click Apply.

Now, click Wizards again. Then click Transparency.



Now you should have this on the side of your screen, make sure Fuzz factor is set at 0%.

and now click the background of your image.

This should be your result, save this image by right clicking it.


You'd think we are done right? Nope. Now you are going to open the original animation in gimp.

In your layers panel, you should have this. Note down the delay of every single frame.. in this image I have


Now, delete all but the top frame, you need this for your animation.


Now here is where it gets slightly tricky.. Zoom into this image so you don't mess up.. then click the select by colour tool and select your background.
Now select your eraser tool, and hard edge it.


Now erase the entire selection, don't worry, we will fix it. Press Select-all (Ctrl+a) to select everything so we can fix the image.


Now select your paintbucket tool, and then reverse your Foreground(FG) and Background (BG) colours to where it looks like this.


Fill in the spots that are missing where you erased the white of the image, Add a blank white background layer if you have to as a reference of where all the white was, but delete it afterward.
Now, select all and copy this layer, export this image if you need to (most likely won't).

Now open the image that you saved from the website and make a new layer, add Transparency.


Paste Into this Layer. (You may have to do this twice for my desired effect)


Trash the floating section if it pops up.


Now comes the part where you need all that info I told you to note down earlier, double click each layer and modify the delay (where it says 1000ms on everything) do not remove the (replace)


Now export your animation as a gif, and then make SURE to click as animation.. otherwise you have to do a whole lot of work all over again.


Now upload your image on your favourite Image uploader (I myself prefer photobucket).

Enjoy your finished product.

[Starbom]

First thought as i clicked on thread: Omg Runescape head in your avatar!
After looking at this: What the hell? So complex!

[Vulture]

I didn't think it was all that complex. I can do this in ~4-5 minutes depending on the amount of frames in the animation.. I was just trying to be thorough in it. =P. What's so complex about it?
-----------
P.S. I haven't played much in past week, but my signature is supposed to be my runetrack. Unfortunately runetrack is down, so you can manually looks me up on High-scores. Dorian_Gray.

[lisa lynn]

It's complex because you're doing it in a really roundabout way. xD I've never used GIMP but surely it has a contiguous option?? Then you don't have to go back and fill the white back in, you just click click click then reupload.

[Pokemon Trainer Sarah]

This is a very thorough guide and good for people who may be new to image editing. I tend to use http://www.iaza.com basically using the same method as you have here to make transparent images and it can also do very basic animations. It's good when you don't want to/can't download programs. =) Thanks for sharing!

[Vulture]

You are quite welcome. I spent an hour making this guide because a friend asked me how I was doing it :D, so felt I would share it on a few other forums.

[Speed-X]

I really don't recommend iaza, the images expire after thirty days. Definitely not a reliable host at all.

Microsoft GIF animator lets you make your animations transparent. Its free and distorts the colors very, VERY slightly, but good for anyone that wants to make a quick and/or transparent animation. I still recommend GraphicsGale overall, though. Easy animating...a lot easier. You can work with a canvas that won't stretch out if the pasted image is larger than the existing canvas (i.e.: what Paint does, how it enlarges the canvas like that). Also you can look at each frame on a pixel-level so you can better see any inconsistencies.

But I digress.

[Pokemon Trainer Sarah]

Yeah, iaza's not good for image hosting. You just save the image and upload it somewhere else when you're done. It's just really useful if you only make the rare animation and don't want to download anything!