How to make your own animated GIFs

[Uzumaki626]

I dont really know how to use other programs, I know some other GIf makers use a program called Ulead Gif Animator. Not sure if its free or not so you might wanna check that out too.

[multi]

Thanks Uzumaki626!

Your tutorial is awesome. I used it to make my new avatar, but I couldn't figure out how to make a border...

Your tutorial says "3) Go to Image ---> Stroke" I looked in Image but I couldn't find that option...

Nevermind. I guess it was under "Edit"

I probably have a different version or something.

Thanks again XD

[Uzumaki626]

Your welcome .... hmmm ill check up on that stroke thing when i get home, could be my mistake cuz I wrote most of the tutorial out of my head but anyways ill double check on that when i go home and change it if its correct, thanks for pointing that out .... Anyways, enjoy!

[Green²]

Animated GIF Avatar Guide (BSPlayer / GIMP for Windows)


1. Programs Required and Settings

●BSPlayer 0.86 Build 500 or similar (To capture images from fansubs. Not as accurate as VirtualDub, but it will / should capture frames under real time for those using only ffdshow.)

Create a new folder to a subdirectory.
Within BSPlayer Preferences, under General tab, configure [Directory for captured images] to the new folder that you have just created.
Under Key definitions & WinLIRC tab, assign [Capture frame - original image size] to an known key. The default key should be "p".

●GIMP for Windows (To convert the BSPlayer captured frames to a animated GIF format.)

Install GTK+ for Windows, The Gimp for Windows, and then LZW libraries for The Gimp.

From GIMP:
No GIFs?
Because of patent issues with the LZW compression algorithm the installer does not install the ability to save GIF files. (Yes, I know that the Unisys patent has expired in the US. Not so in other countries, though.) To be able to do this, make sure that either you are in a country where Unisys doesn't have a patent on the LZW algorithm, or that you have a license from Unisys. Then download the file gimp-gif-1.2.5.zip (from a server in Finland). Unzip and put the gif.exe in your GIMP plug-ins folder.

That means that if you can not install the LZW libraries, then the GIMP program will not be able to help you in creating animated GIF avatars and that you will need to choose another program, which this guide does not cover.


2. (My) Animated GIF Rules

Animated or also known as motion avatars, will of course require more than one frame / image. For an animated GIF sequence, each frame must have alike dimensions.
(Example: If working on an 100x100 pixel sized animated avatar, all frames / images must be 100x100 pixels each.)
It is likely that images captured from fansubs will be larger than 100x100 pixels, for 100x100 max pixels will be used in this guide. Thus images greater than 100x100 pixels must be reduced in size to no greater than 100x100 pixels.

(For avatar use here, it seems that the avatar size can be no greater than 100x100 pixels max and that the file size must be no greater than 51.2KB.)


3. BSPlayer Frame/s Capture

As this is done in real time, the idea is to seek to just before the desired frame/s, press and hold the capture frame key ("p" default) until the desired frame/s passes. Each frame is then captured as a JPG image. And those image/s are sent to the directory that was chosen within the player preferences.


4. Working Under GIMP for Windows Part 1

The first task is to do our image editing at this point. Here, you can crop (Make notes on Notepad.exe on pixel crop numbers!), add text & colors to the image, resize the image to 100x100 pixels max, etc. while it is still in JPG format.

Then the image needs to be indexed: On the image, right-click, Image / Mode / Indexed...
We'll use Generate Optimal Platelet @ 256 color with Normal Dithering, no dithering of transparency.

Once that is done, save the image as a GIF: On the image, right-click, File / Save As. Change .jpg in the line below to .gif (type it) then select OK. Another window will pop-up, select OK.

Repeat step 4 for every frame / image that you want to use.


5. Determine First Frame

Use image program of choice to view all of your edited, desired images to determine what will make a good first frame. As some web browsers and programs choose to not allow GIF motion, they usually only render the first frame of the animated GIF sequence. Get the idea?


6. Working Under GIMP for Windows Part 2

A) Close all images that may be running in GIMP to avoid errors. Open GIMP's layer tool: Main GIMP window / File / Dialogs / Layers, Channels & Paths... Then open what is to be your first frame in the GIMP program. Keep this first frame open for the rest of this process.

B) In the Layer window, create a new layer by selecting the New Layer icon (Bottom left icon). The new layer options window will pop-up,.. use layer fill type: transparent, then select OK.

Open what is to be your second frame in the GIMP program. Copy the entire second frame: Right click on image / Edit / Copy. Then paste to your first frame/image: Right click on image / Edit / Paste. On the Layers window, anchor the layer: Icon looks like an ship anchor, located near bottom right. Close second image opened so that you can free up some computer memory and to avoid confusion.

Repeat part B for every other frame you want to add.

C) Set individual frame delays:
In the layers window, you'll see something like:

New Layer 4
New Layer 3
New Layer 2
New Layer
Background

Double left click on Background layer. The Rename Window will then pop-up. Rename it to Background (200ms) Every layer can be renamed to include the (###ms) which will mark individual frame delays. It will look something like this:

New Layer 4
New Layer 3 (80ms)
New Layer 2 (1000ms)
New Layer
Background (200ms)

For the layers seen above that have no (ms), they will be configured to the master frame delay time as described in the next part.

D) Once that is done, save the image we started as your first frame which has now become many images: On the image, right-click, File / Save As. Change file name to something new (xxxx.gif) then select OK. The Export Window will pop-up,.. select Save as Animation then select Export. Another window will pop-up, add comment if desired, then set master frame delay as desired, I don't Care, select OK.

Repeat part D if you don't get the master delay timing correct.
Repeat part C to tweak the individual frame delays if needed.


7. The Final Step

Upload image somewhere for use online.

- Green²

[Yakumae]

This is an awesome thread! I had no idea I could make animated gifs this way... I was doing it the hard way by layering each frame on top of the old ones ... whew.

Here are the first two I have done:
(they are simple, but I am starting small)

[p3psi]

This happens a lot to me in imageready and im not sure how to stop it.

Sometimes when i make a change to a frame, it applies the changes to all other frames. This usally happens when i changed the first frame, and sometimes other frames too.

How do i turn off this function/option?

[Drakes]

Good guide, useful info from that, I pulled off my avatar over 'ere!

[Green²]

Originally Posted by p3psi

This happens a lot to me in imageready and im not sure how to stop it.

Sometimes when i make a change to a frame, it applies the changes to all other frames. This usally happens when i changed the first frame, and sometimes other frames too.

How do i turn off this function/option?

I'm not sure on how to work around the issue for Imageready as I've never used the program before. But on GIMP, I think for replacing the first frame, one would create a new layer of the frame that you want to change with,.. and that frame would likely need to be of an new image file. Then delete the layer in error and lowering the needed layer to where desired. Only, GIMP claims that it can't reduce colors and that it will save it as opaque, or if unlucky, GIMP will crash when trying to save as animation.

Thus, I feel that all image editing should be done before layering them. If I need to see the images in motion while editing, I would use a image viewing program that supports a slideshow. Irfanview is good at doing this.

[Uzumaki626]

Thanks for the guide Green² !!! I really appreciate it

And p3psi changing something on the first layer of your animation affects all other frames in the animation. No other frame has the same effect, only the first.

A workaround is moving the first frame over as the second frame, doing your changes, and then moving that frame back to its origional spot as the first frame. Just think of it as swapping.
--------------------
A bonus for this first frame affect is that if you add text to your animation, you can just move that text in the first frame and the text is moved on all the other frames as well, its sometimes easier than selecting all the frames and then moving the text. There are other uses i cant think of off the top of my head also. But Hope that helps...

[primitiveone]

weeee, your tutorial owns!!! Very easy!

[Uzumaki626]

Thanks =) And chibi-ginji owns all! I love him!

[Caliban]

Damn it, I'm having a hard time doing borders! I don't know why but everytime I try to modify all frames to have the same border only one gets modified, which is the last frame of any of the animations. Then when I try a modification frame by frame, it still only does the modification to that last frame. I don't know what the heck is working wrong, me or imageready?! I really need some help as this is stressing me, it's as if the program is fighting me.

[Uzumaki626]

Originally Posted by Caliban

Damn it, I'm having a hard time doing borders! I don't know why but everytime I try to modify all frames to have the same border only one gets modified, which is the last frame of any of the animations. Then when I try a modification frame by frame, it still only does the modification to that last frame. I don't know what the heck is working wrong, me or imageready?! I really need some help as this is stressing me, it's as if the program is fighting me.

Make a new layer, put the border on the new layer, then move the layer to the very top of the layer stack

[DieGottheit]

wow, your tutorial is great. and very fast.

i started small...

[DieGottheit]

several hours later.

well virtualdub wont open most my stuff now, so i went to BSPlayer+imageready.

[KageSennin]

Can someone plz me to better understand how to use GIMP, or me find where I can get ImageReady. I've tried KaZaA and I can't get it, but I have GIMP and don't quite understand how to work it. Once again, thx much in advance.

[Uzumaki626]

theres a gimp tutorial here lol , look a little upwards

[DieGottheit]

I can open SOME of my stuff through VirtualDub, but alot of my older episodes. need a VFW codec.
i got hold of one, but apparantly it wasnt what i needed.

can anyone tell me, what exactly i need? or where to get it?

[Uzumaki626]

I have no clue about that, I only have DivX and Xvid installed, and ive been able to open up just about any avi file

[Drakes]

Ah, I'm just having an odd problem.

My "optimized" quality sometimes goes to hell , when my lossy is at 0, colour 256, dither 100%.

I mean, the detail/colour looks as if you were converting bmps to gif/jpgs in MSpaint.