|
evilC shows us how to make a cool animated avatar IntroductionIf you like a good chinwag on a message forum, chances are you have noticed that often people have a small picture or "Avatar" next to their name. Many mountain boarders have video of themselves shredding, but typically videos cannot be used as avatars - you can, however use a picture format called "Animated GIF" which will let you embed a small animation into a picture file for use as an Avatar.However, creation of an animated GIF is not exactly straight forwards (especially if you use video as a source) and most art packages (eg GIMP, Photoshop) either do not support editing of animated GIFs, or do not compress the file down small enough. Many forums set a maximum file size limit on avatars - This is a good idea, since too many large avatars on a forum page would make it take a long time to load. ATBSports, for instance, uses the default settings of 50k maximum file size and 100x100 pixels max dimensions. The art of making a good animated avatar is keeping within that size limit but still producing a decent quality of image. This tutorial shows you how to acheive that. Source VideoThe first thing you will need is some video to use as an avatar. Bear these points in mind when choosing a clip to use:
Required SoftwareFor step 1, VirtualDub or another way of outputting your clip as GIF.For step 2, Adobe Fireworks to compress the GIF. (There is a trial on the page). In this tutorial, I will use Virtualdub for step 1. All it is used for is to crop / resize the video and convert to GIF. There are many other ways of acheiving this - for example editing software such as Adobe Premiere or Sony Vegas will also be able to do it, however virtualdub is free and easy to use, so I will use it for this tutorial. However, please bear in mind that Virtualdub only works on movies with the .avi extension (.divx files also work, rename them to .avi). If your clip is not AVI and you want to use virtualdub, first convert your clip to AVI. Do not alter the clip in any other way at that point, just convert it to AVI. A good program for this is AVIDemux. If you want to use YouTube clips, you can use a tool such as KeepVid to save a copy of the file as MP4, then use AVIDemux to convert that MP4 to DIVX uising the MPEG-4 ASP (Xvid) option in AVIDemux's Video dropdown.
Download and install software as required. Virtualdub does not need to be "Installed", you just unzip it and run Virtualdub.exe Step 1 - Preparing the GIF.Start virtualdub and open the source clip (avatar.avi if using my demo file) - you can drag the file in or use File->Open.Virtualdub LayoutThe layout of the screen is pretty simple. The source video is on the left (1), and the output on the right (2). At the bottom, you will need the "Mark In / Out" buttons (3) and the position slider (4). You can use ENTER to preview the video, but only if the slider (4) is at the start, it will not play if it is at the end. Adding the Resize FilterFrom the menu at the top, select Video->Filters.The filter dialog will pop up: Click the Add button and select Resize from the list. The Resize filter dialog will pop up: Do not touch anything! Click OK. This will return you to the filters dialog, which should now look something like this: Make sure you select the resize filter that you added (The blue higlighted line in the pic) and click Cropping... Note that in order to edit the resize filter in future, you can double click it from within this menu (We will be coming back here later). Cropping the VideoThe idea here is to "crop" (Chop off unwanted bits) the movie to our desired shape (not size!). This is why we added the Resize filter but did nothing with it initially, we need to get the shape right before we size. At this stage, it is unimportant how big the image is, but ideally the size of your desired avatar (In this case 100x100 for ATBSports) should divide neatly into the size you crop the video to. The X1, X2, Y1 and Y2 offset boxes are used to trim the relevant edges of the video. Use the arrows in these boxes to trim the video until it is the desired shape. Below the X1/Y1 offset is a Size readout. This starts off at the size of your source video. In this case, this is 720x576 which is what is used by british TVs and SD camcorders. As you alter the values in the offset boxes, this changes to reflect the new size. Our source is 720x576, so The biggest size to crop to should be 500x500 as the 100x100 avatar would divide neatly into that. If you can do it with powers of 2 (ie 200x200, 400x400, 800x800 etc) this may work even better due to the way scaling images works. Use the position slider at the bottom to scroll through the movie to help you decide which edges to crop - you cannot animate the crop box in virtualdub, so you need one crop box that works for the whole length of the clip. Here, I have cropped my sample clip by removing 220 pixels on the right and 76 on the top to leave a 500x500 box: Editing the Resize FilterHit OK to return to the filters dialog and edit the resize filter we made (Double click on it or select it and click Configure).Click Absolute at the top and enter the size of the desired avatar (100x100 in this example): Click OK, and you should return to the filters screen, click OK again to return to the main screen, with the output window on the right now a lot smaller: Trimming the VideoGrab the slider at the bottom and slide it to where you would like the avatar to begin, then click the Mark in button at the bottom (Just below the 50 seconds point on the timeline in this screenshot). Drag the slider to the end of the video and click the Mark out button (Below 55 seconds). Your screen should look something like this (Note the blue band on the timeline before the slider):One thing to bear in mind here is to use the output window as the guide when trimming the clip, not the input window. You want to trim based on the cropped version, not the original! Notice how in the above screenshot, the slider is at the end of the marked clip. In the left (Source) window I am still in frame, but in the output (right) window I am not. If you are having trouble seeing the small output preview, you can edit the resize filter and set it to 100% size, but leave the crop. Once you have marked the in and out points, you can edit the resize again. I did it this way else the screenshots would be very wide. It's worth knowing this anyway, as sometimes you may want different size avatars (Some sites for example limit to 80x80) so knowing that you can alter the resize at any point is handy. Do not try and skip adding a resize first though, as you cannot add a crop without a resize. Also, do not try and do the resize without doing the crop first, as it will not work properly. This is why I had you add a resize first and just leave it at 100%. Exporting the GIFOnce you are happy, select File->Export->Animated GIF. Leave it on Loop, name it and click OK. I often name it for the size of the image, so you may want to save it as something like "avatar-100.gif", then change the resize to 80x80 and re-save it as "avatar-80.gif" so you have two versions for different size.NB: If you have some kind of swanky HD camera or the like, the image may be much bigger, but that does not matter as long as it ends up sized to 100x100. You may have an initial crop much bigger than 500x500, but that doesn't matter. However, if your video is more than 25 or 30FPS (Say 50, 60 or even 100+) you probably want to reduce this down to no more than 30FPS. Virtualdub can do this for you - select Video->Framerate and alter the right column appropriately. Try and pick a number that divides neatly into the source rate (So if you have a 60FPS source, drop it to 30 or 15, but not 25 as that does not divide equally into 60). If you do not, you will probably get ghosted frames. That's generation of the source GIF done. If you plan on doing more avatars, you can save the resize filter by selecting File->Save Processing Settings so that in future you could open a clip, then load the settings file and it will automatically set up the same crop and size for you. Note that you can use any software to get to this point, not just Virtualdub. The general idea is that by this point, the movie should be cropped and sized, and converted to GIF. Here is what you should roughly have at this stage. Mine is ~450k for a ~3 second clip @ 100x100 (25FPS). Step 2 - Compressing the GIFStart Adobe Fireworks and open the GIF. Click File->Export Wizard. A Dialog will pop up - you can set the target filesize here and Fireworks will attempt to do it itself, but I have better results by doing it manually, so I recommend just clicking Continue, make sure GIF is selected in the next window, then click continue again.You should see the optimization window: The all-important file size is just above (1) - 243.01K in this example. We want to get that down to <50K for ATBSports. This is acheived with the settings around (2). As you change settings, keep an eye on the file size, it will change. Now I cannot tell you what settings will work with your video, you will likely have to fiddle. I can, however, explain what settings do and how to fiddle with them ;)
So, for example, both these settings get the sample clip to < 50k with acceptable image quality: 17% Loss, 256 Colours and no dither. 25% Loss, 16 colours and 100% dither. Use the first method if you can, but if not resort to the second. If you are having trouble getting the size down, try converting the video to mono (ie black and white). In Virtualdub, select Video->Color Depth and select Luminance only (Y8) from the right column. Then re-export the gif and try compressing that. Losing the colour can save a lot of space whilst maintaining acceptable image quality. If you do this, you can typically take the number of colours down to as low as 8 in fireworks and it will still look OK. If your clip has camera movement, you will quite possibly need to use this. Once you have the size under your limit, hit the Export... button and save. Job done! ResultsYou should end up with something like this:  100x100 @ 25FPS, 256 colours. Size ~46k. Once you have your GIF, most forum software will let you upload the avatar via your Control Panel or Profile. However, you may need to upload it to a web site somewhere and link to it. You can now look cool on the planet Pandora, or on your favourite forums! Words by evilC |
| Latest Waffle | Most Read Babble | Random Piffle |