During the last weeks I`ve been asked many times how to create animated avatars like these:
Believe me, there´s nothing to it:-)
The following tutorial exists out of 10 easy to follow steps and works not only for avatars,
but also for signatures, banners...
That´s up to you:-)
- Adobe Photoshop (preferably 7.0)
- ImageReady (comes with Photoshop)
- A picture as a "steady" avatar
- A piece of film you want to include into your avatar.
If you don’t have a piece of film yet, the easiest and best source for it is
Just search for the movie/music clip etc of your choice and
decide which (short) scene(s) out of the
video shall be shown in your avatar.
Press “pause” where you want your little film to begin, and take a screencap by pressing
the Print-key, which is located next to the F12 key.
Now open up ImageReady, click File>>> new… and “okay”.
Press Ctrl+v and you have your first screencap in Imageready.
Okay, now the annoying part;-)
Go back to your movie at youtube, and very quickly press “play” and then “pause”.
Take a screencap again, go back to Imagready. Do not make a new layer, but just press Ctrl+V.
ImageReady makes layers by itself.
I think you´ve already figured out where this leads to *g*.
You have to make screencaps of every little frame
that comes next (about 6,7.. screencaps/second of the movie, I haven’t counted yet).
So you will end up with a lot of layers, whereby every layer is a bit
different from the previous one.
Just go on and on with taking screencaps until you have every shot you need:-)
Ah, a little advice: Whatever you do, don’t move the youtube website around, or else
your frames will end up messy!
If everyting went well, you now have Layer 1 with the first screencap of the start of
your desired film, Layer 2 with the next one and so on. As you can see on your bottom
right in your Layer frame, you have all different layers now.
Now go to window>> Animation.
This is your Animation screen. On the top right you will see a little blue arrow.
Click it. Now click “Make frames from layers”
You will see all your screencaps in the Animation screen than.
Just to test, click the play button.
Of course you don’t want the whole youtube-thingy
on your animation, so click the Crop Tool
and drag it over the area you want to keep, which of course is the movie.
Now press the Enter key.
All your layers are effected by that, so you will only have to do this once!
Hit the play button again, just to be sure:-)
If the animation is going too fast, go to the
animation screen and adjust the seconds a bit.
You can do this frame by frame, so you
can speed or slow every frame the way you want.
Saving your animation is very important at this stage, incase you
mistake something later.
Choose File >> Save optimazed as… and save the animation.
Now you should resize your movie by clicking Image>>>Image Size.
Choose whatever width and heights settings you want, just think of keeping
Constrain Proportions on.
For 100x100 avatars I usually choose about 60x40.
Yeay! Your animation is done now.
Now you need a steady image to put the animation on, which you can
of course edit in any way you like
at photoshop ( e.g. working with brushes, adding a gradient, some text, ….. ) Save as psd!!
Close photoshop and return to ImageReady, open your
gif animation film and your psd.
In your psd now click Control+A to select the image, hit ctrl+c to copy it.
Close your psd and go to File>>new.
Press ctrl+v to paste the psd into a new file.
This makes it easier to edit with your animation.
Now go to your gif and again open the animation screen, if it isn’t opened yet.
Click on the little blue arrow
on the top right and click “Select All Frames”, click the
arrow again and now “Copy All Frames”.
Go back to your psd and it´s animation screen.
Make new frames by clicking the image I lined red:
Click it 30, 60, 73…. times, depending on how many frames your animation has.
Now click the blue arrow again and “Select All Frames”, click the arrow
a further time and click “Paste All Frames”.
A window pops up.
Make sure to check “Paste over Selection” and the
square box that says Link…. at the buttom!
Now your animation is over your psd.
Click the Move Tool (looks like a cursor) from your
toolbox to move it wherever you want it.
Now click the play button…. Great huh?
And now finally the last instruction!
Go to File>> Save optimazed as.. save it… and you are done!