By Joe Sisk and Tommy Welling
You’ve donated to SDN, it’s time to add some style to your sidebar. I’m going to walk you through the basics so you’ll feel comfortable creating your very own animated avatar.
What is an animated avatar?
Animated avatars are image files, typically .gif format, that have multiple frames set to play in a sequence over time. This gives the appearance of motion.
For your avatar to fit on the SDN forums you’ll need to keep a few principles in mind:
-the maximum file size is 195.5 kb
-the larger the dimensions (xxx by xxx) the larger your file size will be
-the more frames your animation has, the larger your file size will be
There are ways to manipulate both the dimensions and animation length without appreciable loss of quality. These will be discussed later.
The following are some terms I will use repeatedly, they’re listed here so you can refer to them as needed:
.gif - this is an animated image file used for avatars
.flv - this is the type of movie file that YouTube uses
.avi - this is another type of movie file, it is more widely recognized by programs you may use
http://www.zamzar.com/url/ -this site will let you rip YouTube movies into .avi or .gif format. It will also let you upload .avi movies and convert them to .gif files.
Mac users: www.gifworks.com -this site will let you edit and resize .gif files that are under 400 kb, though the site will often not allow any file above 200-250 kb. This site is not compatible with Safari. Firefox is recommended.
Adobe Photoshop (new versions)/Image Ready (packaged with older versions of photoshop)- Image Ready is the old program; most of its new features are now integrated into Photoshop. The advantage of this program is that it may frequently be found on school computers meaning you could avoid purchasing either of these programs if you did your image editing at a library or computer lab. The key is to already have a .gif created by ripping it using Zamzar. (Windows or Mac)
Ulead GIF Animator- This is a commercial .gif animator program. It will do a lot of the work for you. If you tell it to make a video into a .gif, it will do the conversion and all you need to do is trim it down to the size you want. My only complaints are that it tends to strain my poor old laptop’s processor if I try to convert large files and it’s not as good of an image editor as ImageReady if you want to customize your avatar. (Windows only)
Windows Movie Maker- This is a program packaged with Windows. It will allow you to trim your movie into shorter clips so you don’t have to attempt to process a very lengthy clip.
GIFfun- a free .gif creator program for Macs. One of our staffers uses this program. It only lets you import individual image files or whole folders containing multiple image files, and turn them into a .gif. It allows re-ordering and timing adjustment, but only to active projects, NOT pre-existing .gif files. The native Mac program Preview can open an existing .gif as separate image files, which can be dragged and dropped into GIFfun with ease. However, with that technique, it’s better to use a clip that is as short as possible. Otherwise, significant slowdown and lag will occur if you open a recently converted 2-minute long YouTube video as a .gif in Preview. http://mac-free.com/download/GIFfun.html
iMovie- included on every Mac, this program allows simple editing of long video clips, so they can be converted to more manageably-sized .gif files.
iPhoto- also included on Mac, it can quickly resize many images at once, before creating a .gif. This will allow you to create a file that fits within the dimension constraints of SDN.
MPEG Streamclip- free software that allows for easy downloading of YouTube videos, as well as quick converting between video and image files. It also allows Mac users to bypass Zamzar.com, which can take some time to convert files. http://www.squared5.com/
Making an Avatar From an Existing Video
Mac users: The overall steps to create an animated avatar are the same as for PC users, but with many technical differences. Thus, the Mac-specific steps have been added to the appropriate sections. A Mac user who is unfamiliar with creating avatars will greatly benefit by reading the entire article, rather than reading only the Mac-specific sections.
So, for our demo, let’s take the official trailer for The Watchmen movie posted here on YouTube:
The first step is to download this video. This may be accomplished using a variety of Firefox extensions or by going to http://www.zamzar.com/url/ and having them convert the file for you (free) and e-mail it to you. The advantage of this is that, while slow, it converts the file to .gif format and e-mails it to you. Note, the larger the file, the longer the conversion takes. If you have a large file, you may wish to rip it in an .avi format (either using zamzar or a firefox extension) and use Windows Movie Maker to split the .avi into clips. Once you have the clip containing the segment you wish to work on, upload that to Zamzar and convert it to a .gif. You will have a significantly more manageable number of frames to work with in any of the image editing programs.
Once you have the file, you may proceed in a variety of ways. If you downloaded it directly, it will be in .flv format (the type of video that plays on YouTube), if you had it converted above, it will be in .gif format and you do not need to worry about the following step.
The .gif animator programs listed above do not recognize the .flv movie format. You will need to convert it to .avi or directly to .gif. You may either convert it using a freeware .flv to .avi convertor or by uploading it to Zamzar and converting it to .gif.
Mac users: In MPEG Streamclip, you’ll need to go to Open URL, paste the YouTube URL into the box, select Convert, then Progressive Download and MP4, and press Convert. When asked to choose a task, select Export to AVI. In the next box that appears, leave all settings as default and press Make AVI.
Open a new Standard (4:3) project in iMovie, and import the newly created .avi movie. Now select the short clip within the movie that you want to use for your avatar. A yellow box should appear around the clip. Copy and paste this clip into the top section of iMovie, where it says “Drag media here to create a new project.” Now go to Share, then Export Movie, and choose the Mobile option, when prompted.
Drag and drop this new mobile video into MPEG Streamclip, then create a new folder on the desktop. In MPEG Streamclip, you’ll need to Export to Other Formats, then select Image Sequence as the format. Designate that these images get saved into the newly created folder, so they’ll be easily accessed for the next part.
Open iPhoto, and create a new album. When prompted, uncheck the box that says, “Use selected items in new album.” Drag and drop the folder of newly created images into this new album. Select all of the images and Export. Choose JPEG as “Type,” and for “Size,” choose Custom. For the max pixels, choose the larger dimension of the video, and input the size limit for your donation level (i.e. 125 max width for a Bronze donor using a video clip that’s wider than it is tall). Export them to a new folder.
The following description comes from working in Ulead, however the process is very similar for ImageReady and the concepts are similar for most .gif animation. It assumes you have already converted the file to .gif and opened it.
Opening the initial document may take a few moments; a raw .gif file tends to be very large (Imagine how your computer would handle trying to open thousands of documents in Paint all at once). Once the program has assembled all the frames you will have access to the raw video in .gif format. I don’t recommend saving yet as this is a large file.
Mac users: Open GIFfun. Choose GIFs and Load Folder. Select the newest folder that holds the exported, resized iPhoto JPEGs. GIFfun should now show all of your images in sequence.
Depending on the program you’re using, your display will look something like this. You’ll have a display that lets you navigate through the different animation frames and a main display that lets you view the frame you’re editing at the moment. If you can’t see the animation display in Photoshop/Imageready go to the view tab and enable the “animation” menu.
Now you’ll want to start trimming down to a sequence that you thought you might want in your avatar.
For this sample avatar, I’ll be taking the sequence of Rorschach (the guy with the mask and trench coat) using a spray can as a flame thrower. This occurs about 50 seconds into the trailer. I will now delete all the content before and after. If your computer is straining under the pressure of rendering this many frames at once, try deleting a hundred at a time, this makes the program less likely to crash. This is a time consuming process. As mentioned above, cutting the movie into bite size chunks before you start using Windows Movie Maker or a similar program is a good way to make this process easier.
Once you’ve trimmed away all but the sequence you’re interested in, I would suggest saving. You want to save in .gif format. I would also close the current file then open the file you just saved. The original file may still have the frames you just deleted accessible as background frames which can slow things down, the new saved file will let you work with only the frames you need.
So now you’ve got a little chunk of video. Mine is about 20 frames long. It’s still too large for SDN and it jumps when it goes back to the beginning. How do we fix this?
The first step is to resize it. Depending on the level of your donation, you may have an avatar ranging from 125×125 (bronze) to 175×175 pixels (platinum/lifetime). Under the edit menu you will find the option to resize your image:
Keeping the aspect ratio means that the proportions of your animation will be maintained.
Take the largest dimension of the animation and set it to the largest dimension of you allowed avatar size. In this case I am setting the 320 to 175 to make a Lifetime member avatar. The height was automatically scaled to 74.
How do we make it loop?
The best way to make an avatar loop is to set it to run forwards and then set it to run backwards before it repeats itself. Caution: this means double the number of frames.
Select all your frames by highlighting them at the bottom, then right click and select duplicate frame. The location for the controls for this varies by program but the commands are the same.
After the frames have been duplicated, select the new frames by highlighting them (they may remain selected from before. Right click again and select “reverse frame order”. Click ok to reverse the order of the selected frames.
Mac users: You’ll need to manually duplicate each frame and reverse the order for the duplicated frames. To do this, if you have frames #1 through #20, you would start by highlighting frame #19, copying it, highlighting #20, and pasting #19. Repeat for all slides, in reverse numerical order, except for #20 and #1. The first and last slides do not get duplicated. This way you have smooth playback.
You’ll want to preview your new .gif periodically, in order to test the timing, view the file size, and determine where frames should be removed, if needed. First, select Forever for # Loops in GIFfun. Now click Make Gif. This will take your images and timing and create a .gif that will automatically open in your web browser. If desired, it can be dragged and dropped from the web browser to save.
We now have a looping animation:
Now we can play with the timing.
There are two ways to adjust the timing of an animation. You can delete frames or you can speed it up.
Deleting frames not only speeds up the animation, it also decreases the file size. If you’re going to do this, do this first. Video files typically have a high frame rate which means you can delete a number of intermediate frames before the change is noticeable. If I have a large file I will delete every second or third frame in order to cut its size. You may need to increase the frame timing to compensate if you’re really cutting a lot.
Mac users: To delete frames, select them individually and press Command (apple key) + X (or Edit, then Delete). Unfortunately, multiple images cannot be selected at once.
You’ll notice that each frame is set to play for 0.05 seconds. You can adjust this by selecting one or more frames, right clicking and selecting the frame properties:
Adjusting the delay in hundredths of a second will allow you to determine how long it takes for the animation to progress. This varies significantly between animations so my best advice is to play around with different speeds and see what looks best.
Mac users: You will need to change the frame rate for each frame, individually. The default is set to 0.2 seconds, which is usually too slow. To use a new rate, double-click the Delay box of a frame, type a new value (smaller = faster), copy this value, double-click the Delay box of the next frame, and paste the value. Repeat for all slides. Now click Make Gif to see how your new .gif looks, in action.
Here, I cut every third frame. I left the delay at 0.05 seconds. The avatar is now under SDN’s 195.5kb size limit.
Now, all we need to do is trim a few frames to make it pretty.
You can see how there’s a slight pause when the animation resets at the start and finish. This is because the animation winds up exactly where it started with the same frame. We have duplicated both the first and last frames of the animation and they are right next to each other, this doubles the time they are showing and creates a pause effect. If you remove the very last frame in the animation as well as the first frame in the middle where you duplicated and reversed the sequence, you will have a totally fluid animation. I also wound up setting the delay to 0.06 because I thought it looks better. You’ll make a lot of these adjustments as you go along.
Mac users: You already got rid of this slight pause during frame duplication. That’s why the first and last frames were not duplicated.
The last thing you need to do is show off your new avatar on The SDN Forums!