Ambrosia. 15. music, film, & video games.
about | favorites | urls | following
gif tutorial | mine | me // fem!Nick
soulmate I | soulmate II
the cook to my archuleta
the house to my wilson
the flynn to my clu
It’s been a few months since I wrote up my first gif tutorial and I definitely think I’ve improved at gif making. So, I feel like it’s only necessary to update it with more detail and even more screencaps.
As always, I have to thank the lovely, amazing, fantastic Paige (known as clintbarton at the moment) for teaching me how to make gifs. Seriously, she’s a badass; if you aren’t following her, I feel bad for you.
I personally use Photoshop CS5, but as far as I know, you can use any version of Photoshop CS to create gifs.
To give you my perspective, I have two monitors. This is what my desktop looks like.
To start off, figure out what you want to animate. Because I am horribly lazy, I’m going to reuse a gif from a few days ago.
In PS, go to File > Import > Video Frames to Layers…, then Open a video file.
It is worth noting that, more often than not, the file must be in .mov format (I have seen people who can use .avi files though). To convert files into .mov, I use Quick Media Converter or Xilisoft Video Converter.
You will then get the layer extraction window. Scroll to the specific part of the video you plan on animating, then hold the Shift key and press the right arrow button to select the desired frames. Selected frames will appear as a dark grey slice in the scroll bar.
If the clip is considerably long (about 25+ frames), select the Limit to Every __ Frames option.
The longer the gif = the higher the count in frames = the larger the gif. So, increase the limit if they keep piling up (replace 2 with 3, 4, 5, etc). Click OK.
If it’s not open already, go to Window > Animation. This allows you to edit and view the frames inside the gif.
If everything’s set, your main window should look like this.
Remove any unwanted frames if present. This gif went from 26 to 22.
Now would be the time to size your gif. Go to Image > Image Size and choose a width or length dimension (500px width and 700px length is the limit for tumblr).
My standard size is 500px width x 200px length, but gifs can range from any dimension. I’ve made gifs sized 500x500, 500x156, 500x700, and 198x180, for example.
If you have a larger dimension than you want, go to Image > Canvas Size to cut off pixels. Also make sure that the resolution percentage is at 100%. Results should go from this to this.
You should probably give your gif a bit of a test run: click the ‘Play’ button at the bottom of the Animation toolbar. More often than not, it’ll run too fast. To slow down the frame rate, select all frames and click the down arrow beneath one of the frames. Click on Other… to customize the frame rate.
From my experience, the default frame rate averages at 0.04 when I first import my layers. Depending on how high you limited your frames, the frame rate can go from 0.06 to 0.10 without the gif running at hyperspeed. Unless, of course, you want it to run that quickly.
Mess around with this option until you find a comfortable speed. This gif is set to 0.08.
~ Because the positioning of the camera is locked in this clip, you can use the freeze frame technique.
The main reason why I use this in my gifs is to decrease the size of the gif so it fits the tumblr limits. This allows the gif to contain more colors and more frames. I have used it for other things, however.
Select Frame 1 in the Animation toolbar, then go to the Layers box to make sure the ‘paused’ layer is on top of all others. It should look like this.
For this technique, erase parts of the freezing layer that are covering whatever part you wish to be animated. You can also use the paint brush for this technique. The result (animated) goes from this to this.
Now here comes the part I have the most trouble with: coloring.
Now, coloring is just stylistic flair. I like to add coloring, but it isn’t really necessary. It can, however, decrease the gif size, so it can definitely be helpful.
My coloring typically looks like this. This style has been mixed and matched from my own and other graphic/gif makers’ coloring styles. Here is a step-by-step of how the coloring affects the original image.
If you choose, you can also add a watermark (opacity level is typically set 40% or lower). Watermarks (also called ‘tags’) are often placed in the corners of gifs, and font size is usually small but legible.
If needed, now would be around the time to sharpen each individual frame. Go to either Filter > Sharpen > Sharpen or Filter > Sharpen > Unsharp Mask after selecting the layer to each corresponding frame.
Once that’s settled (as I personally take longest on getting the colors just right while gif making), go to File > Save For Web & Devices… and this window will open.
In order for the gif to fit on tumblr, it must be exactly 498.9K or under (I know that tumblr says 500K, but tumblr is a filthy liar). If it doesn’t fit under the limit, the image will be unanimated and stuck on the first frame.
I make my gifs with Pattern, however No Dither, Diffusion, and Noise are viable options as well.
For gif beginners, I suggest reading my old tutorial where I explain using Diffusion and colors/dither/lossy.
Saved with Color 206, the final product should be the following:
If you have any questions, feel free to throw them in my askbox! ♥
