wiiaboo.com

Colecção de tudo o que eu fiz e faço na Web, desde programação em HTML, XHTML, CSS, JS e PHP até a projectos standalone.

AVI to Animated GIF Tutorial

by RiCON

 

Tools Required:

You will need Virtual Dub to extract the frames from the video you want to make the AniGIF from, and ImageReady (IR) or Bannershop (BS) to take the frames and build the AniGIF, frame by frame. I put Photoshop (PS) as optional, because of the need to resize the frames. I have yet to find a speedy way for Bannershop to do the resize. For that matter, I prefer IR, because its more automatized. Every image will be reduced in order to facilitate browsing. Click the images to view full size.

Step 1: Video Preparation

Open Virtual Dub. Press Ctrl+O to open the video file.

With the file opened, move the slider in the gray bar to the beginning of the excerpt you want to use for your AniGIF.

Then, press Home to select that frame as the starting one. Then go to the final frame and press End to set that frame as the final one. You can now see a darker area, representating the excerpt you selected.

 

Step 2: Creating an Image Sequence

Next, go to menu 'Video' and make sure 'Full Processing Mode' is set. Finally, go to 'File' -> 'Save image sequence...'. In the window that pops up, set it up to your preferences. Any output is viable, as far as know, IR reads all of them. Dunno about Bannershop, though...

Don't forget to save the image sequence to a new or empty folder. It will save a lot of trouble later.

When you're finished with the setup, click 'OK' to process the video excerpt into an image sequence.

 

Step 3.1: Creating AniGIF with ImageReady

Open Adobe ImageReady. Go to 'File' -> 'Import' -> 'Folder as Frames...'. This is a very handy tool available in IR, thanks to which you don't have to manually open each and every one of the frames you created (that's why I said IR was a lot more automatized). For the people who don't have IR, they can use a similar feature in BS, but, the difference being that BS only accepts GIF's. IR accepts every kind of image format it supports.

Having imported the entire folder containing the frames (if you saved the frames in a newly created folder, that is), you now have a prototype of the AniGIF ready to preview. You can even try previewing it now, by opening the Animation window ('Window' -> 'Animation'), and clicking the small Play ( |> ) button.

Ah... You will notice that the animation is a bit slower than in the video, right? That is because the FPS (Frames per Second) rate of the AniGIF is inferior to the FPS a normal .avi video uses. Therefore, in order to have a more smooth and faster playback we will simply delete some frames. Select (click and [Ctrl]) frame 3, then 6, then 9, then 12, etc. in multiples of 3 and then delete them using the Delete Button (duh). Try previewing the AniGIF now.

You will notice it's faster and smoother, too. That's the magic of delete button ;P

If you need the AniGIF to be faster even, try deleting frames in multiples of 2. If you need the AniGIF to be slower, then delete in multiples of 4.

Now, in order for the AniGIF to be lighter, we will need to resize it. If you will be using the AniGIF as an avatar, you will definitely need to resize, because I've never seen a forum allowing 640x480 avatars. We will do this by simply going to 'Image' -> 'Image Size...', input the size we want (it resizes proportionally, meaning it will keep the original aspect ratio), and then clicking 'OK'.

You now have a decent AniGIF, take this chance to save the .PSD (Adobe format).

Now, finally, you must optimize the AniGIF, perhaps make it even lighter, which is always a good thing in the internet. To do this, you search for the palette 'Optimize' in the upper right corner of ImageReady and then make it visible. Select the preset you think looks better and smaller (the final size of the gif can be seen in the lower part of the window with the AniGIF). Make sure you select GIF, as no other format allows Animated images except GIF. You can also change the settings yourself by opening the other hidden options (Color Table; Dither; Transparency; Options), but it's not recommended for beginners. To see a preview of the final Optimized AniGIF, go to the window with it and click the tab 'Optimized'. You can then see which Preset looks better. When you're finished optimizing, press Ctrl+Alt+S to save the optimized AniGIF.

Et voilà your AniGIF is made.

Se querem falar comigo, vão para os imageboards.

Creative Commons License Hacker emblem Made for every browser Valid XHTML 1.0 Made on Notepad Spam Poison StumbleUpon Button del.icio.us