How to make your own anaimated GIF's

[L4E_WakaMol-King]

How to Make You Own Animated GIF's

Ok, if anyone is interested, this is how I made the L4E smily ( ) and the GOD smily ().

Step 1: What You Need

Ok, there are a couple pieces of software you will need. They are totally free and very useful... two of the best free things I've ever found on the internet.

Irfanview - This is a program for converting picture files from one format to another.
If that link dosn't work, thy this site: www.irfanview.com

Microsoft GIF Animator - Allows you to make animated GIF files for free!
If that link dosn't work, try this site: www.jhepple.com/gif_animator.htm


Step 2: Making The Frames of the Image

Before you can create an animated GIF, you will have to create the individual frames of the GIF. I recommend using Microsoft Paint. Paint is the most basic graphics program ever, and it comes free with any version of Windows.

For this tutorial, I'll show you how I made the L4E smily. Here are the two images that I drew in Paint.

Frame 1: Frame 2:
It may be hard to tell, but in frame 2, the heart is a little bit bigger.

There is one important thing to note about this step: Makes sure that all of your frames are the same size. The two frames I'm using as an example are 23 pixils by 21 pixils. If you're using Paint, you can check the size of an image by clicking "Image" on the top toolbar and selecting "Attributes."


Step 3: Selecting a Transparent Color

The neat thing about GIF images is that you can give them a transparent background color. This means that only the actual drawing will show up. For example, you'll notice that with the L4E smily () you only see the heart, not the extra white pixils that you see on the images above.

So, once you have drawn your frames, pick a color to be your transparent color. It can be any color you like, but make sure that it's a color you haven't used anywhere in the drawing, otherwise that part of the drawing will be transparent too. Color all the parts of the images that you don't want to show up this color. I picked green. Your images should now look like this:

Frame 1: Frame 2:

Step 4: Converting the Frames to GIF Format

Ok, once you have created your frames and filled in anything that needs to be invisible with the transparent color, you need to convert the frames to still GIF images. First, if you haven't done this already, save your frames. If you're using Paint, the pictures will save as Bitmap (.bmp) files. I saved the two images above as "L4E smily 1.bmp" and "L4E smily 2.bmp". Save them somewhere that you can remember, because you're going to need them in just a moment.

Now, open Irfanview. When you first open it, you will have just a black box. Now, go to the toolbar at the top and click "File" and then "Open." Go to wherever you saved your frames and open the first frame. Your window should now look something like this:



(Don't worry about the fact that the top bar says "L4E smily 1.PNG" in the picture above. PNG is just another type of graphic image similar to .bmp. Either one will work.)

Ok, once you have your frame open in Irfanview, click "File" at the top and then "Save as..." Now, select a folder to save the new frames in (I picked the folder "L4E smily").

Make sure that the "Save as type" box pictured below says "GIF - Compuserve GIF." Once you set the box to say this, a little window will pop up on the right side (pictured below). Go to the area that says GIF and make sure that "Save transparent color" is checked and that "Choose transparent color during save" is selected (like they are in the red circled area below).



When you click "Save," Irfanview will give you a pop-up window asking you to select the transparent color. Click anywhere on the picture that is that color. For me, I just have to click anywhere that is green. This will make anything that color invisible.



Congradulations! You've converted the first frame to a GIF file. Repeat this step for the second frame too (or however many frames you have).

Step 5: Putting the Frames Together into an Animated GIF

Now, at this point, you should have all of your frames converted to GIF files, and the transparent color should be invisible. My frames look like this:

Frame 1: Frame 2:

Now it's time to open up Microsoft GIF Animator. When you start the program, you will see just a blank frame. To add the first frame (actually the last... see below), simply click on the little icon that looks like an open folder with an arrow on it (second one from the left). Click that icon and find your last frame (I put mine in the folder "L4E Smily"). Then just click the "Open" button to add the frame.

Note: When you add additional frames, they will be placed BEFORE the first frame. This means that you will actually need to add your last frame first, and then add the others in reverse order. For example, if I had 5 frames, I would have to add Frame 5 first, then Frame 4, then 3, then 2, and then Frame 1 last. If you don't do this, your frames will be in reverse order.

To add additional frames, click on the icon that looks like a page with a plus sign on top of it (fourth from the left). Same procedure as above: find the frame on your computer and then click "open." Don't forget to do them in reverse order like I said above.

So, I open GIF Animator, click the open icon, add Frame 2, click the add frame icon, add Frame 1, and now my screen looks like this:



The next thing to do is to click on the "Animation" tab, which is the middle of the three tabs to the right. Check the box that says "Looping" and then check the box that says "Repeat forever." This means that your smily will keep animating, instead of just animating once and then stopping.

Now, go to the "Image" tab, which is the third of the three tabs. Click on the first frame and set how long you want it to display for (in 1/100 secdons). I want the first frame of my smily to display for 1 second, so I entered 100 into the box that says "Duration." If you enter 0 into that box, the image will just flash on the screen.

Now, just click on the other frames and do the same for them. I only want the second frame to flash very quickly, so I left it's duration at 0. This way, Frame 2 will appear and then very quickly go back to Frame 1, giving the appearance of a beating heart.



It is also very important that you set the "Undraw Method" to "Restore Background." If you don't do this, the frames will just be displayed on top of each other and the whole picture will be a mess. Make sure to click on every frame and set its Undraw Method to "Restore Background."

That's it! Now, all you have to do it click the "Save As" icon (three brown disks, the 5th icon from the left) and name your file. I named the file "L4E Smily."

Finished Product:

Congradulations, you just made your own animated GIF. Now, all that's left to do is post it in the forums. To do that, go to an image hosting site like imageshack.us/. Click on "Browse" and find your file (in my case, L4E Smily.gif). Then, just click "Host it!" Imageshack will then take you to a page and show you several lines of text. They keep changing the format of their site, so I can't say what it will look like tomorow, but you want the code that is in between IMG brackets. The code for the L4E Smily looks like this:

[URL=http://www.imageshack.us][IMG]http://img69.exs.cx/img69/3830/l4esmily3yu.gif[/IMG]Thanks to ImageShack for Free Image Hosting[/URL]
(Note the and [/IMG ] tags)

Just place that code into your posts or signatures, and you're good to go.

Hope this tutorial was helpful. You can PM me if you have any questions.