nocturnerequiem (nocturnerequiem) wrote,

  • Mood:
  • Music:

Tutorial for everyone who loves to create animated stuff:-)

 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.

Step 1

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.

Step 2

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!

Step 3

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. 

Step 4

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. 

Step 5

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.

Step 6

Saving your animation is very important at this stage, incase you 
mistake something later.
Choose File >> Save optimazed as… and save the animation. 

Step 7

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. 

Step 8

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!! 

Step 9

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! 
Click ok.

Step 10

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! 
Happy animating!:-)

  • Post a new comment


    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.