 |
| Animated Movie-Clip Avatars |
|
|
 |
 |

In forums and blogs all over the world there are people who use movie clips and
animations as avatars. Done correctly, they are pleasing to the eye, and
draw attention towards your posts. But done incorrectly they are
distracting, annoying to people viewing webpages, and can really suck bandwidth.
This tutorial details the simplest way to create animated avatars from movie
clips. We can't help you pick the best subject for your creations,
unfortunately, but we can definitely give a few handy hints to keep the file
sizes down.
|
Step 1:
Find a movie trailer featuring a short animated scene that takes your fancy.
In this tutorial I have decided to use Quicktime as my player, and
get the Doom movie trailer from the
Apple Trailer website.
Virtually any movie player will suffice, as long as you can pause clips and
advance them again keyframe-by-keyframe.
With your movie player paused at the start of the clip you want to capture,
hit the 'Print Screen' key on your keyboard to save a screenshot. |
|
Step
2: Open up Imageready, Select File > New, and press OK
- the dimensions should automatically state your current screen resolution.
Now Edit > Paste. Your screenshot frame will appear as a
layer in your new document.
Go back to your movie player and move the film clip on by one keyframe.
In Quicktime you can do this by pressing the right cursor key when
the Quicktime window is selected. Whatever you do, do *NOT*
move the physical position of the window. Now press Print
Screen again, go into Imageready, paste again, and repeat these steps as
many times as you need. |
|
Step
3: Once you have screen-captured all the frames that you need,
bring out the Crop Tool and crop the area of the video that you want to
appear in your final animation. You can hold down SHIFT on your
keyboard whilst you make the crop if you need it to be rectangular.
You should now have a list of layers in your layers palette, with a solitary
white layer in the background. Delete this white layer.
Now all you need to do is open up the animation palette (Window >
Animation), click on the little arrow on the far right of the palette,
and select 'Make Frames From Layers' from the drop-down menu that
opens. |
|
Step 4: Open the Optimize Palette (Window > Optimize) and set
your Format to GIF. Now all you have to do is
select File > Save Optimized As, and save your file.

Optimization Rules: Animated .GIFs are essentially just a collection
of images which play in succession, as is the case with most video files.
This roughly means that as the number of frames doubles, so does the file
size. To keep a reasonable limit on the final animation bloat, you can
either reduce the number of frames, or reduce the quality of each frame that
you use. The technique for the former suggestion is obvious - just be
more selective in the animation frames that you choose. To alter the
latter, you can drop the number of colors in your GIF, or just keep the
physical size of the animation down to a minimum. Remember when creating
your animated .GIF that most forums have distinct file and dimension size
limits on avatars, so don't go too overboard, and always aim for the best
possible compromise between glorious detail and file density. Have
fun, and I look forward to seeing your creations gracing the
BioRUST Forums real soon! :) |
- Tutorial written by Man1c M0g
|  |  |  |  |  | Last 5 User Comments |  |  | 
|
|
Quote from Tamlin;63300: Fireworks does not come bundled with any version of Photoshop as far as I know - you have to buy it separately. |
Erf, my bad - Fireworks actually comes with several packages of Adobe creative suite products, but not with Photoshop alone. Which kinda sucks. :( |
Reply to this post |
User: Tamlin (#63300)
Date: Tue Aug 24, 2010. 13:18:53 | Post #31 of 32 |
|
Fireworks does not come bundled with any version of Photoshop as far as I know - you have to buy it separately.
The Extended versions of CS3 and above can handle animated GIFs (Via File >Import > Video to layers) but you have to have Quicktime installed for this to work.
And it only works in the Windows 32-bit version.
Pretty crap, really. They should never have killed off ImageReady. |
Reply to this post |
|
|
Quote from Man1c M0g;63296: Hi there! Photoshop is only really designed for single frame images. Since you have CS3 you should have a program called 'Fireworks' (this replaced the Imageready program from CS3 onwards) - use this to create the animation and save it as an animated gif - then all you need to do is open the result in a browser and it'll work fine! |
I dont have a program called fireworks. The animation does play through fine, but only when I have it in photoshop. It appears as an image anywhere else because it wont save it as gif. I tell it to save it as gif on the save as, but it makes no difference. |
Reply to this post |
|
|
Quote from Ice Dragon 77;63268: This is a great tutorial, but I am stuck. I followed the instructions and I have all the screen shots running in a line and it plays really well. Its exactly as I want it. The only thing is when I click on the Optimize thing, nothing much happens. A box comes up saying Optimize by, and the two tick options are Bounding Box and Redundant pixel removal. I saved as a GIF animation and when I look at it where I saved it, all it has done is turn it into a picture. Its only saving one keyframe, and it doesnt play. It only works in photoshop when I open it and click on animation. I dont know what to do from here. I am using CS3, so I dont know if that helps or not...? |
Hi there! Photoshop is only really designed for single frame images. Since you have CS3 you should have a program called 'Fireworks' (this replaced the Imageready program from CS3 onwards) - use this to create the animation and save it as an animated gif - then all you need to do is open the result in a browser and it'll work fine! |
Reply to this post |
|
|
This is a great tutorial, but I am stuck. I followed the instructions and I have all the screen shots running in a line and it plays really well. Its exactly as I want it. The only thing is when I click on the Optimize thing, nothing much happens. A box comes up saying Optimize by, and the two tick options are Bounding Box and Redundant pixel removal. I saved as a GIF animation and when I look at it where I saved it, all it has done is turn it into a picture. Its only saving one keyframe, and it doesnt play. It only works in photoshop when I open it and click on animation. I dont know what to do from here. I am using CS3, so I dont know if that helps or not...? |
Reply to this post |
--- View Entire Thread --- |
 |
 |
 |
 |
|
 |
Forum Threads
|
 |
 |

Deactivate Account Author: jerinian Posted: Oct 02nd, 11:16am Activity: 1 replies, 887 views
|  | changes.... Author: supertackyman Posted: Sep 12th, 2:56am Activity: 2 replies, 1052 views
|  |
| | |