GIF TUTORIAL FOR BEGINNERS
Program(s): VLC Player (not required), PhotoShop CS4
Involves: Screen-capping and making and editing animated gifs
Translatable: Only from PS CS3 - PS CS5 i'm pretty sure.
Steps: 5-6. All steps are lengthy and discussed in detail. I have a more detailed list of what the tutorial will cover underneath.
Difficulty: (Hopefully) Easy to Medium. As long as you have the patience to read. I wrote this for beginners so I don't skimp on the detail.
This tutorial is more of a beginners how-to to making animated gifs in photoshop. These steps are by no means the ultimate correct way of doing anything. I literally taught myself how to do this through experimenting so...it's the best I could do. I hope it helps.
What this tutorial will cover:
• How *I* screencap and import caps into photoshop (briefly)
• Creating the actual gif/animation
• Tips and Tricks to reduce the file size of the gif
• Adding colorizations/text to the gif
• Saving the gif for the web
Before you do anything, you are going to need caps. I don't know how to import .mov or .flv files into my photoshop. I've tried before but always get errors. You can use whatever method you like for getting caps. Personally, I use VLC player and manually cap the scenes I want to gif.
I find the scene (usually a few seconds long), and hold down the Command+Otion+A keys (Alt+Control+A on PC) as it plays. This creates the screencaps (everytime I click A) and puts them on my desktop. You can customize these shortcuts/settings in your vlc preferences.
Under Preferences } Video there will be a Video snapshots section. This is what mine looks like:
I set the file extension to .png and select the sequential numbering box. You NEED to turn sequential numbering on. You will see why later on.
Okay. So for the gif in this tutorial i'm collecting caps from a scene in the movie Clueless. When making a gif for tumblr, the smaller number of caps you can work with the better. Remember it's a trade-off. If you want to gif a longer scene, you'll have to compromise your image size, color and/or quality on the final product since tumblr has a 500kb limit. So try to make it work with a small number of screencaps if you can. Or you can do multiple gifs of one scene and post them all in one text post. Whatever works. (This doesn't apply on livejournal obviously).
So I let the scene play on my vlc player and I hold down the Command+Option keys and pressed the 'A' key over and over again. You'll probably manage to get a cap every half second this way. (As far as I know, there's no automatic capping tool in vlc. I hear KMPlayer is a good program for capping? Don't know if it's compatible with mac though). All the caps are now appearing on my desktop in the order I capped them. Once i'm done, I create a new sub-folder, highlight the caps and drag them into the folder. Because we turned sequential numbering on, this keeps our caps in order for us. So if your desktop gets crazy with screencaps like mine does sometimes, the sequential numbering will save you a lot of time.
Adding the caps to their own folder will allow me to preview the gif and weed out the caps I don't want or see if I need to go back and cap something I missed.
*Please note that i'm on a MAC computer. I'm not sure if there's a similar method to do this on a PC. But this part isn't necessary to making the actual gif so don't worry if you can't. Like I said before, it's just a way for me to preview the gif and my caps before going into photoshop. Any way you can manage to do this on a PC will work fine.*
Once inside the new folder, I put the view on column view and highlight the first file.
MAKE SURE you click the spacebar once to open up the the pop-out preview (it won't work right unless you use this) and then just hold down your down arrow on the keyboard. This will run through all the caps you took and basically will look identical to the gif you'll be making.
• Okay. Now that you've seen the caps in order and picked out the ones you really need, we'll move into photoshop. If you're making a gif that's 500px wide and you want to make it in color, I suggest having no more than 8/9 screencaps.
Next step is to highlight all your caps and open them in photoshop. All your caps will open in one tab. Don't do any cropping or editing right now. Save it for later on. Now we're going to layer them on top of each other in ONE file. This might be a long way to go about it, but it's the only way I know how and once you do it a lot it takes basically no time. Click the little double arrows on the side of your picture and a list of every file opened in that tab will be in a drop-down menu.
EDIT: Courtesy of carelesshands : If you go file > scripts > load files into stack, then select all your caps, it basically skips having to drag them all on top of each other and you just go straight to "make frames from layers"
Find the file with the smallest number in the filename (in this case it's ...00091). This is where sequential numbering is KEY. It would be practically impossible to do this without it. Drag that file out into a new window. Then go back to the tab with the rest of the files and click the double arrows again, this time selecting the next number in line (...00092).
Click on that LAYER (should be called Background. by default) and while holding down the SHIFT key drag it on top of the first file you pulled out (the ...00091 file) (this is just like you drag layers from a .psd file to another document). *Holding down the shift key will place it directly in the center, making the caps line up perfectly.
Now repeat this process until all the caps have been placed on top of each other in the new document. You'll just keep pulling over the next numbered cap in line until you're done. (...00093, ...00094, etc.)
• Now with all the caps in one file you can close the other tab/window. Double click the background layer on the new document to unlock it. Now you can do editing such as cropping and re-sizing. DON'T ADD ANY COLORING at this point. Just crop and resize. In this instance, i'm cropping the black lines from the sides of the caps and i'm cropping some unnecessary parts of the caps from the top and bottom. Any pieces you can part with will help your file-size in the end.
After cropping, I resized the gif to 500px wide. I like to sharpen each individual layer so I'm going to go ahead and do that. You don't have to if you don't want to. I just click the first cap in the layer palette and go to filter } sharpen. After that, you can click each layer in the palette and click Command+F (Control+F on PC) and this will perform that same sharpen filter on each layer you click. Command+F is the shortcut to perform the last used filter. This will save you time from having to constantly go click back to the filter menu and it applies to all filters.
Okay, now i've done all the editing I need to at this point. I WON'T BE COLORING UNTIL THE END.
• Now I want to start making the actual gif. Open your Animation window. Window } Animation.
When mine opens up it usually looks like this:
Just click the bottom right button and it should jump you to this window:
Now, with the top layer in your palette selected, click the this button
in the middle bar and select Make Frames From Layers.
Now your animation window should have multiple frames in it.
Highlight all frames (either by clicking and holding down the shift key or clicking the same button you clicked to make the frames and selecting Select All Frames). By highlighting them all, you are applying any changes to all the frames at one time.
Now select the options to make your gif run 'Forever' and then select how many seconds you want each frame to run (click anywhere it says 10secs and a drop down will appear).
I usually choose .02 seconds, but .01 works better on this particular gif. You can de-select them at this point. I want to go ahead and make the last frame a little slower, so i'm gonna select just that one and change it to .02 seconds (NOTE: oops i actually forgot to do this when i wrote the tutorial but i usually do. Just pretend I did). If you want to put in a custom number for it you can just click Other... in the drop down and type it in (sometimes I do .03). Okay. Now we've got the timing of the gif worked out. You can always keep messing around with it if you want to change other stuff around. Just preview the gif by clicking the play button and it will run in the window where your caps are. When you stop the preview, always make sure you click back to the first cap in your layer palette.
Before I color the gif, i'm going to see what I can do to get the file size down a little more. In this particular gif the background doesn't move hardly at all...so I think I can get away with this next step and it won't look terribly noticeable. With the top layer selected click Command+J (Control+J on PC). This will duplicate the layer (Layer 8 in my palette). Now click the duplicated layer (Layer 8 copy in my palette) and select all the parts that will not move. What I did was use the free-hand lasso tool and select the girl's figure, leaving some extra room for her movements.
Now Select } Inverse. This will select everything BUT the girl (aka the parts that won't move) and click Command+J again. This will put the still parts in a new layer. Delete the duplicated layer (Layer 8 copy in my palette) you made before. You don't need it anymore. Now the still parts are placed over every frame in the animation and the girl is still visible underneath. This actually reduces the file size quite a lot. I know some people don't like it or don't think it looks right and most of the time you get strange movements and you can tell. But you gotta do what you gotta do sometimes to make the size go down. Just be careful with what you're selecting, keep testing the gif to spot anything too strange, and don't even bother trying to do this with backgrounds that move a lot. You will be able to tell and it will not look good.
Now it's time to edit color! Open the .psd you want to use in a new window. Make sure the top layer is selected in your palette (should be the still parts you just created). Now go to your .psd. I usually group all the coloring layers together (highlight all layers then press Command/Control+G) to keep things neat but you don't have to. Drag the (grouped) layers on top of your caps. This should apply to all the caps underneath (which is why the top layer needs to be selected. If you have another layer selected, the coloring will only affect that layer and whatever is underneath it). If you want to add text to your gif this is also a way to do that. Basically, anything you create on top of the top layer in the animation will apply to every frame underneath as well.
Now test your gif out by clicking the play button. If you are satisfied, let's get to saving!
Go to Save As } Save for Web and Devices. A new dialogue box will open. As you can see, these are all my settings:
I like to use Pattern because it adds an overall grain to the gif. It puts the file size up slightly but I like the way it looks better. You can adjust any of these setting though in order to achieve the look you want. Your colors are going to affect file size a lot too. I was lucky with this gif that I got to keep my colors at 256. That almost never happens. Note: Darker gifs with a lot of black will always have a smaller KB than brightly colored gifs. Less colors = smaller file. The same goes for Black and White gifs. B&W will always be smaller.
You can also reduce the IMAGE size in this dialogue box. I've had to go from 500px wide to 400px before to get the file size down. I like to keep it at 500px wide though if I can help it. I think it looks nicer on a blog that way.
Once you get your file size under 500kb you can save it! After that, just upload to tumblr and you're done!
Hope this was helpful!