Screen Capping and Mini-Movie Tutorial
Okay, the first time I wrote this tutorial, LJ ate it, and I didn't want to re-do it again right that moment (since it had taken me 2.5 hours to get that far @_@) so I'm now going to try to reconstruct its former brilliance. >.>
This tutorial is in two parts. The first is to pimp a program I use to make all of the mini-movie and most of the animated icons I make, and teach you how to do the same thing. I've used it to make all of these icons below:
The second part will be about how to take what the first section created, and create an icon out of it. In the end, I will have shown you how to make this icon:
The tutorial is not constructed so that you will be able to reproduce the same icon (you would need a copy of the same avi file I used to do that, for one thing), so please don't try. Make your own, from a movie you have on your own computer. ^_^
A couple of notes: This tutorial is VERY image-heavy. Also, if you are looking to use this tutorial to learn how to use Imageready or another animation program, look elsewhere. For the sake of brevity, I have been forced to assume that you have a decent grasp of your graphics design program, as well as your animation program. For that section, I will be using Adobe Photoshop 7 and Adobe Imageready, but the same techniques I DO use are translatable to any other program I'm aware of. The main focus of this tutorial is screencapping, and preparing the files for animation.
If, at the end, you have any questions about what I have written, please let me know and I will edit my tutorial. This is the first tutorial of this type I've done, so I'm sure I will miss a few things.
Before we begin, you will need to go to this website and download Virtual Dubber. This is the program I use to do all of my screencapping, and is also an excellent program for creating MP3s, or editing movie files for AMVs and burning onto DVDs. Nice little versatile program that everyone should have ^_^
Download the program and install it, then fire it up. Go to File >> Open and open the movie that you want to screencap. Once it opens, resize the window to make sure that you can see all of the screen.
Before I go any further, I'm going to go through the buttons at the bottom of the screen, so you can see what they do. I'll work from left to right.
The
buttons are like the normal stop and play buttons. Clicking these allows you to play through the file at normal speed, complete with sound.
The
and 
buttons are just what you would expect - they advance you immediately to the beginning or end of the file.
The
buttons allow you to advance or go back exactly one frame. This is the slowest, but most accurate, way to find the frames you want to screencap.
The
take you from key frame to key frame. I'm not sure exactly what constitutes a key frame, because I'm not an animator, but it tends to take you to the more important moments, advancing about 50-100 frames at a time.
The
buttons advance you quickly from key frame to key frame. So instead of skipping all the frames in between, it fast-forwards through them quickly. This is good if you're trying to find something and you're pretty sure you passed it when you skipped through.
Finally, the
buttons set the beginning and end of a selection. These are important buttons we'll use in the tutorial.
And now, on with the icon-making!
By dragging the slider, and using the various buttons, I started by pinpointing the exact frame I wanted to begin screencapping. For most moving icons of this type, you want a sequence of frames, so you start by finding the exact beginning of that sequence. Then I hit the
button. Next, I ran through the sequence to the exact end and hit the 
button.
If these two points are far enough apart, you will see a blue line in the area of the slider you selected. That's probably too big for an icon, though. In this case, I started fairly early, to get the first shot I needed, and then went through to the end of the sequence I wanted.
When you're selecting your sequence, try to get a general idea of how many frames you've selected. Next to all of the buttons, you can see a place where it tells you what frame you're looking at. You want to have 100 or less, as a good rule of thumb. For my icon, I had 137, but that's a lot. It's important to have a general idea of how many you have, though, for the next step. It doesn't have to be exact, but know if you have more than 10, more than 100, more than 1000, etc.
Now go to File >> Save Image Sequence As... and a dialogue box will appear.
Enter a file name prefix (in my case, it was "goal", and a suffix if you want one. Select the Output format as "Windows BMP" (if anyone wants to enlighten me as to what a TARGA is, I'd be grateful).
Enter a minimum number of digits in name. Generally you'll need 3. What this does is keep your files organized in the order they came in, and is the reason why you wanted to figure out how many frames you had before. For example, if you didn't do this, it would number your files thusly: 1, 10, 100, 101, 102, etc. and they're all out of order. However, if you specify 3 as the minimum, it'll be like this: 001, 002, 003, 004, etc. Nice and neat.
Browse and select a directory to hold the images. You may want to create a new folder to hold them all.
If you want to save several sequences (say, running them while you're not at the computer), check the checkbox at the bottom, but we won't do that for now.
Once I'd entered all of my parameters, my dialogue box looked like this:
Now you're all ready, so click OK. Another dialogue box will open showing you the status of your job, like this:
And you're done screencapping!
As a side-note: If you just want to screencap one particular frame from the file, rather than a sequence, you can go to Video >> Copy Source Frame to Clipboard or hit Ctrl-1.
Alternatively, you can select that frame using the buttons and run the image sequence of 1 frame, with exactly the same procedure as running an image sequence of over 100.
Now you have all these files, and you don't know what to do with them, right? Or maybe you have some idea, but you want some tips, to see how you can deal with them more quickly and efficiently. So, here we go.
Open Photoshop and go to your File Browser. The tab is in the top right-hand corner, and allows you to browse directly from photoshop. Select all of the files by clicking the first one, holding down shift, and clicking the last one, and then open them ALL at once.
Trust me, it's worth the insanity, though it might give your computer a heart attack if it's low on memory. If this doesn't work for you, read over what I'm doing and get the gist, and you can open the files one at a time.
You're going to build your movie starting with the last frame, so take the file that's on top of all of the files and move it over to one side like this, so you can see the files underneath it.
Now you want to combine all of the files into one document. Start with the second last frame and drag it into the one off to the side (which I will call the Master from now on), holding down SHIFT as you drop it, so that it snaps into the center. Then, to keep yourself organized, close the file you just added to the Master, so you don't accidentally add it twice.
You don't want any duplicating frames (and there will be a few that are exactly identical) so after you've added it to the Master, hide it and then reveal it again, by clicking the little eye next to the layer's name. If anything changes when you hide it, keep it. If they are exactly the same, delete that layer.
Keep adding each frame one on top of the other (and testing with each one to make sure there are no duplicates), until you have added every one of the files. Your layer list will look something like this:
(Though, hopefully you don't have 74 frames... Mine was a bit excessive, as I've said.)
If you want to put any effects, sharpen, or change colours or anything like that before you resize it, now is the time to do it. Make sure you remember to do the same things to all of the layers, though.
Once you're done that part (No cropping or resizing yet, though!), save the file as a .psd and set it aside. I'm making a mini-movie icon, so I want a still picture that the movie will be inside. If you are making a moving icon, not a mini-movie, you can skip these steps.
While I was capturing the moving sequence, I also captured a few frames from right before, including this one:
I treated this like a normal, if simple, icon. I cropped it (making sure to leave room in the lower right for the movie), resized, sharpened a few times, and added a texture and border by Insomniac, and added the text. I ended up with this:
Now I want to add the mini-movie part. I flattened the icon, then added a transparent layer underneath it. Using the pen tool, I drew a shape with rounded edges, like a TV screen.
Now I went to the "paths" tab, and clicked the button that turns the path into a selection.
(I hope I didn't go too fast for anyone in that section. I know paths are kindof weird. If you're utterly confused, ask me and I'll flesh it out more.)
So finally, I went back to my icon and hit "delete" to cut out the selected part.
To make it more interesting, I added a stroke and a drop shadow to the icon, which will only show in the little hole where the mini-movie is.
Now I went back to my Master mini-movie file. Because I've already made my cut-out in the main icon, I have a general idea of how big the movie should be. So I cropped and resized it, to be a little bigger then the hole. In this case, I didn't bother to crop it, but I resized it to 70 x 53 px.
Now, you want to move ALL of the layers at the same time, so you want to link them together. In the layer toolbar, click in the little box just right of the eye, to add a picture of a chain to the box. This is what it looks like:
Once you've linked all of the layers together, drag them from the Master to the icon, sticking them UNDER the icon layer. If any transparent edges show, or if it's too big, go to Edit >> Transform >> Scale and resize the mini-movie layers so they fit. Because they're still linked together, they will all resize at the same time.
You may want to run through all of the frames, by hiding each one in sequence, to make sure that it's centred properly. Once you're satisfied with it, go to Imageready and make the icon.
Once you've done the icon, it may be rather slow, and also huge. The first thing I do after creating it, if it's too big and slow, is to delete every other frame. It's the quickest way to reduce the icon's file size, and will make the animation faster. (I don't do it at the beginning because it's a lot easier to take frames out at the end than to go back and find layers you deleted and add them back in if it's too fast and jerky at the end.)
Optimize the icon, play with the settings (reducing colours is also a good way to drop the size), and voila!
I hope this tutorial was useful for a few people!
This tutorial is in two parts. The first is to pimp a program I use to make all of the mini-movie and most of the animated icons I make, and teach you how to do the same thing. I've used it to make all of these icons below:
The second part will be about how to take what the first section created, and create an icon out of it. In the end, I will have shown you how to make this icon:
The tutorial is not constructed so that you will be able to reproduce the same icon (you would need a copy of the same avi file I used to do that, for one thing), so please don't try. Make your own, from a movie you have on your own computer. ^_^
A couple of notes: This tutorial is VERY image-heavy. Also, if you are looking to use this tutorial to learn how to use Imageready or another animation program, look elsewhere. For the sake of brevity, I have been forced to assume that you have a decent grasp of your graphics design program, as well as your animation program. For that section, I will be using Adobe Photoshop 7 and Adobe Imageready, but the same techniques I DO use are translatable to any other program I'm aware of. The main focus of this tutorial is screencapping, and preparing the files for animation.
If, at the end, you have any questions about what I have written, please let me know and I will edit my tutorial. This is the first tutorial of this type I've done, so I'm sure I will miss a few things.
Before we begin, you will need to go to this website and download Virtual Dubber. This is the program I use to do all of my screencapping, and is also an excellent program for creating MP3s, or editing movie files for AMVs and burning onto DVDs. Nice little versatile program that everyone should have ^_^
Download the program and install it, then fire it up. Go to File >> Open and open the movie that you want to screencap. Once it opens, resize the window to make sure that you can see all of the screen.
Before I go any further, I'm going to go through the buttons at the bottom of the screen, so you can see what they do. I'll work from left to right.
The
buttons are like the normal stop and play buttons. Clicking these allows you to play through the file at normal speed, complete with sound. The
and buttons are just what you would expect - they advance you immediately to the beginning or end of the file.The
buttons allow you to advance or go back exactly one frame. This is the slowest, but most accurate, way to find the frames you want to screencap.The
take you from key frame to key frame. I'm not sure exactly what constitutes a key frame, because I'm not an animator, but it tends to take you to the more important moments, advancing about 50-100 frames at a time.The
buttons advance you quickly from key frame to key frame. So instead of skipping all the frames in between, it fast-forwards through them quickly. This is good if you're trying to find something and you're pretty sure you passed it when you skipped through.Finally, the
buttons set the beginning and end of a selection. These are important buttons we'll use in the tutorial.And now, on with the icon-making!
By dragging the slider, and using the various buttons, I started by pinpointing the exact frame I wanted to begin screencapping. For most moving icons of this type, you want a sequence of frames, so you start by finding the exact beginning of that sequence. Then I hit the
button. Next, I ran through the sequence to the exact end and hit the button.If these two points are far enough apart, you will see a blue line in the area of the slider you selected. That's probably too big for an icon, though. In this case, I started fairly early, to get the first shot I needed, and then went through to the end of the sequence I wanted.
When you're selecting your sequence, try to get a general idea of how many frames you've selected. Next to all of the buttons, you can see a place where it tells you what frame you're looking at. You want to have 100 or less, as a good rule of thumb. For my icon, I had 137, but that's a lot. It's important to have a general idea of how many you have, though, for the next step. It doesn't have to be exact, but know if you have more than 10, more than 100, more than 1000, etc.
Now go to File >> Save Image Sequence As... and a dialogue box will appear.
Enter a file name prefix (in my case, it was "goal", and a suffix if you want one. Select the Output format as "Windows BMP" (if anyone wants to enlighten me as to what a TARGA is, I'd be grateful).
Enter a minimum number of digits in name. Generally you'll need 3. What this does is keep your files organized in the order they came in, and is the reason why you wanted to figure out how many frames you had before. For example, if you didn't do this, it would number your files thusly: 1, 10, 100, 101, 102, etc. and they're all out of order. However, if you specify 3 as the minimum, it'll be like this: 001, 002, 003, 004, etc. Nice and neat.
Browse and select a directory to hold the images. You may want to create a new folder to hold them all.
If you want to save several sequences (say, running them while you're not at the computer), check the checkbox at the bottom, but we won't do that for now.
Once I'd entered all of my parameters, my dialogue box looked like this:
Now you're all ready, so click OK. Another dialogue box will open showing you the status of your job, like this:
And you're done screencapping!
As a side-note: If you just want to screencap one particular frame from the file, rather than a sequence, you can go to Video >> Copy Source Frame to Clipboard or hit Ctrl-1.
Alternatively, you can select that frame using the
buttons and run the image sequence of 1 frame, with exactly the same procedure as running an image sequence of over 100.Now you have all these files, and you don't know what to do with them, right? Or maybe you have some idea, but you want some tips, to see how you can deal with them more quickly and efficiently. So, here we go.
Open Photoshop and go to your File Browser. The tab is in the top right-hand corner, and allows you to browse directly from photoshop. Select all of the files by clicking the first one, holding down shift, and clicking the last one, and then open them ALL at once.
Trust me, it's worth the insanity, though it might give your computer a heart attack if it's low on memory. If this doesn't work for you, read over what I'm doing and get the gist, and you can open the files one at a time.
You're going to build your movie starting with the last frame, so take the file that's on top of all of the files and move it over to one side like this, so you can see the files underneath it.
Now you want to combine all of the files into one document. Start with the second last frame and drag it into the one off to the side (which I will call the Master from now on), holding down SHIFT as you drop it, so that it snaps into the center. Then, to keep yourself organized, close the file you just added to the Master, so you don't accidentally add it twice.
You don't want any duplicating frames (and there will be a few that are exactly identical) so after you've added it to the Master, hide it and then reveal it again, by clicking the little eye next to the layer's name. If anything changes when you hide it, keep it. If they are exactly the same, delete that layer.
Keep adding each frame one on top of the other (and testing with each one to make sure there are no duplicates), until you have added every one of the files. Your layer list will look something like this:
(Though, hopefully you don't have 74 frames... Mine was a bit excessive, as I've said.)
If you want to put any effects, sharpen, or change colours or anything like that before you resize it, now is the time to do it. Make sure you remember to do the same things to all of the layers, though.
Once you're done that part (No cropping or resizing yet, though!), save the file as a .psd and set it aside. I'm making a mini-movie icon, so I want a still picture that the movie will be inside. If you are making a moving icon, not a mini-movie, you can skip these steps.
While I was capturing the moving sequence, I also captured a few frames from right before, including this one:
I treated this like a normal, if simple, icon. I cropped it (making sure to leave room in the lower right for the movie), resized, sharpened a few times, and added a texture and border by Insomniac, and added the text. I ended up with this:
Now I want to add the mini-movie part. I flattened the icon, then added a transparent layer underneath it. Using the pen tool, I drew a shape with rounded edges, like a TV screen.
Now I went to the "paths" tab, and clicked the button that turns the path into a selection.
(I hope I didn't go too fast for anyone in that section. I know paths are kindof weird. If you're utterly confused, ask me and I'll flesh it out more.)
So finally, I went back to my icon and hit "delete" to cut out the selected part.
To make it more interesting, I added a stroke and a drop shadow to the icon, which will only show in the little hole where the mini-movie is.
Now I went back to my Master mini-movie file. Because I've already made my cut-out in the main icon, I have a general idea of how big the movie should be. So I cropped and resized it, to be a little bigger then the hole. In this case, I didn't bother to crop it, but I resized it to 70 x 53 px.
Now, you want to move ALL of the layers at the same time, so you want to link them together. In the layer toolbar, click in the little box just right of the eye, to add a picture of a chain to the box. This is what it looks like:
Once you've linked all of the layers together, drag them from the Master to the icon, sticking them UNDER the icon layer. If any transparent edges show, or if it's too big, go to Edit >> Transform >> Scale and resize the mini-movie layers so they fit. Because they're still linked together, they will all resize at the same time.
You may want to run through all of the frames, by hiding each one in sequence, to make sure that it's centred properly. Once you're satisfied with it, go to Imageready and make the icon.
Once you've done the icon, it may be rather slow, and also huge. The first thing I do after creating it, if it's too big and slow, is to delete every other frame. It's the quickest way to reduce the icon's file size, and will make the animation faster. (I don't do it at the beginning because it's a lot easier to take frames out at the end than to go back and find layers you deleted and add them back in if it's too fast and jerky at the end.)
Optimize the icon, play with the settings (reducing colours is also a good way to drop the size), and voila!
I hope this tutorial was useful for a few people!