Welcome, Guest

Please login or register

TUTORIALS SUBMENU

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING    [SUBMIT]

Related Links

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

Automatic Translations: Translate Into French Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Last 5 User Comments

User:  Man1c M0g (#63309)
Date: Wed Aug 25, 2010. 21:38:34

Post #32 of 32

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


User:  Ice Dragon 77 (#63299)
Date: Tue Aug 24, 2010. 11:00:57

Post #30 of 32

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


User:  Man1c M0g (#63296)
Date: Thu Aug 19, 2010. 20:50:09

Post #29 of 32

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


User:  Ice Dragon 77 (#63268)
Date: Tue Aug 10, 2010. 19:03:02

Post #28 of 32

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 ---
Amazing Font Pack!

Featured Tutorialsmore

Signature Techniques
Signature Techniques
- Adobe Photoshop -
Abstract Grunge In...
Abstract Grunge In...
- Adobe Photoshop -
Anti-Aliasing Inte...
Anti-Aliasing Inte...
- Adobe Photoshop -
The Glamour Effect
The Glamour Effect
- Adobe Photoshop -
Membership

Username:
Password:  
Remember Me

Lost Password? || Register

Related Links



Special Options
Printer Friendly Version
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
Back again and with free webhosting :)
Author: ngz
Posted: Aug 14th, 3:50pm
Activity: 0 replies, 1054 views
Cartoon Crab 6 Legs Walk Run created in Blender
Author: patricia3d
Posted: Jun 19th, 12:58pm
Activity: 0 replies, 1935 views
HTML Form Post Array to PHP
Author: Space Cowboy
Posted: May 25th, 2:18pm
Activity: 0 replies, 1832 views
My blog where i create Digi Scrapbook
Author: claudya07
Posted: May 11th, 2:33pm
Activity: 0 replies, 14441 views
Blood Dripping from Letters
Author: patricia3d
Posted: Apr 05th, 3:37am
Activity: 0 replies, 2751 views
A New Designer has joined the ranks
Author: skates1
Posted: Mar 28th, 2:19pm
Activity: 2 replies, 2772 views
The hole in Photoshop
Author: Mars
Posted: Feb 13th, 9:28pm
Activity: 2 replies, 3439 views
Colour Swatch
Author: ebz7350
Posted: Jan 15th, 11:18am
Activity: 0 replies, 2356 views
 BioRUST Forums - Reply to Topic
Author: inonShozy
Posted: Jan 11th, 11:32am
Activity: 8 replies, 2499 views
 Version 2 of my portfolio site.
Author: andrewnleon
Posted: Jan 08th, 6:18am
Activity: 6 replies, 2798 views
Forum Threads

--- Site Resources ---
Total Tutorials:212
Total Downloads:    441
Total Fonts:    4673