I do not own any of the shows, films or music used in these music videos, which are made for fun not profit. All rights remain with the respective owners of the show/film/song.
Please do not copy or alter any content, videos, graphics, or information on this site.
To contact me, please email me here
Graphics Tutorial: Animations
Note:
→ For this tutorial I'm using Windows Movie Maker, Adobe Photoshop, and Adobe ImageReady
→ All images have been scaled down and can be clicked to be made larger
Credit:
→ Video manipulations made by me
→ Photo manipulation made by dismal_healer
Step 1: WMM - Eeek! I know, but don’t run away just yet.
So, yes, the first steps are done in Windows Movie Maker. And I’m pretty sure that all of you have used WMM and don’t really need me to tell you what to do here, but just in case, I want to include all the steps so there’s no confusion
The first thing you’re going to do is go to: File > Import into Collections.
Then just click and choose to import your video.
Step 2: Choose your clip
So now that you have your video in front of you, you’re going to choose which section of the video you want to include in your graphic. Whichever section you DO choose, make sure it doesn’t exceed 4-5 seconds. In fact I’d probably recommend a 2-3 second clip. I know that seems really short, but in the long run, it’ll make the graphic better. It’ll generate less frames and by extension, less layers, which is good. Too many layers will slow the graphic down and it’ll be really hard to work with.
When you’ve chosen the section you want, you’re going to cut the clip using the ‘Split’ tool. (Just to the left of the ‘Picture’ tool on the video toolbar).
After that drag the clip you’ve cut onto the timeline.
Step 3: Saving the file
After you’ve put your clip on the timeline, you’re going to need to save it as a specific file type so that you’re able to import it into ImageReady.
So go to: File > Save Movie File
From there you choose to save to ‘My Computer’
Choose a filename for it - one that you’ll remember. And a location to save it to.
When it prompts you to choose the Movie Settings. You’re going to go to ‘Other Settings’ and in the drop-down menu choose the ‘DV’ option. Then simply save the file.
Step 4 : ImageReady!
So open ImageReady. And when you get there you should be met with a screen that looks like this:
On the bottom of the screen there should be a box/toolbar that says ‘Animation’. If you do not see that toolbar go to Window > Animation (make sure it’s checked)
Step 5: Open the clip
Now that you have the Animation toolbar ready you’re going to import the video clip.
Go to: File > Open and then choose the clip you just saved in WMM.
When you open it, a box is going to pop up asking you to select a ‘Range to Import’. Since we already cut the clip to the length we want it in WMM, just select ‘From Beginning to End’ and press OK.
Once you’ve opened it the Animation toolbar at the bottom should now be filled with all the Layers and Frames of the clip. Like so:
Step 6: No Delay
For my ImageReady personally, when I open the clip, the Animation will automatically set each individual frame to run for 0.03 seconds. Doesn’t seem like a lot, but with graphics like this, it is. So, in the Animation toolbar, you’re going to select frame 1. From there hold down the ‘Shift’ key and select the last frame - this should highlight all the frames. When all are highlighted click on the little arrow next to the ‘0.03' (you can do this on any frame, doesn’t matter since they’re all selected) and then just choose the ‘No Delay’ option.
Once that’s done you can preview the animation by pressing the ‘Play’ button ( a little sideways triangle) towards the bottom of the toolbar.
After you’ve watched it a couple times - I know, it’s mesmerizing, but you gotta press stop because we’re gonna go do some stuff in Photoshop.
So go to: File > Edit in Photoshop
It’ll bring the same file up into Photoshop for you to edit.
Step 7: Size
This step is definitely a ‘depending on your situation’ kinda step. It all depends on the size of your video - the video I was working with was higher quality, so the picture size was larger. But I’d say that about 250x150 (give or take a few) is the range I would try for. Again, this step is completely up to you.
After you’ve resized the clip, if you want to add other pictures/text/textures/any other goodies you can think of to it, you’re going to change the canvas size.
So go to: Image > Canvas Size
Make sure you’re working in ‘Pixels’ and then change it to the size you want the final graphic to be. For mine I chose 400x250.
Another option in Canvas, is where you want the video clip to be in relation to the big graphic. You can put it in the center, right-center, left-center, up down - wherever your heart desires.
Step 8 : Makin it Pretty aka The Fun Part!
Now you should have the video clip image surrounded by a transparent background. From here you can add stuff to it (like I said, pictures/textures/text/anything) to decorate it and make it a complete graphic! Knock your socks off.
But - DO NOT change anything on the actual frame layers! Changing or moving those layers around will mess up the animation.
Step 9: Back to ImageReady
Once you’re done adding all the nifty things you want to add to the graphic, you’re going to go back to ImageReady to actually save it. So go to: File > Edit in ImageReady.
Also, I would suggest playing it back again a few times just to make sure none of the animation layers got screwed up in Photoshop.
Once it looks the way you want and you’re ready to save, you need to make sure that the Optimize Format is set to ‘GIF’. This should be the default, but just in case - on the right hand side of the screen, the very top toolbar - choose ‘Optimize’ and in the ‘Format’ drop-down menu choose ‘GIF’.
Then, finally, go to: File > Save Optimized As (make sure you check save OPTIMIZED as, not just save as). Save the filename as whatever you want - just make sure that the extension still says ‘.gif’.
And you’re done!
Go upload it and watch it!
You’re finished product will look somethin like this:
