how fucked are you now (castiels) wrote in evangiles,

037 → vicki's big ass guide to gif making.

i get a lot of messages on tumblr asking how i make my gifs. and while i have absolutely no problems with answering them, i get a lot of the same ones over and over. so, in an effort to try and avoid that, i decided to try and write up a guide with everything i do when i'm making gifs, from the very beginning to the very end.

this could end up being really, really long and rambly. so i apologize for that.

NOTE: portions of this are written for photoshop. if you don't have that, there are probably parts of this that are completely useless to you. but there might be some tips in here somewhere that will help you too.



I. SCREENCAPPING
there's more than one way people make gifs, and while some people import their videos directly into photoshop... i don't like doing that. this is partly because i use HD video files, which are usually filetypes that photoshop doesn't recognize... and partly because i just don't like to. personal preferences and all that.

what i prefer to do, is screencap that video myself, so that i have full control over how many frames there are, and things like that. there are a lot of programs you can use to screencap with and it's entirely up to you, but for the purposes of this guide, i'm using the kmplayer.

01. open whatever video you want, and get it to the point that you want to make the gif of. remember, longer clips = more frames = bigger filesize. so, the shorter the better.

02. press ctrl+g. this is going to open the autocapper. make sure you have the following things selected:
numbers to extract: continuously
size to extract: original size
frames to extract: ___ every # frame

in the 'every # frame' spot, you're going to put the number five.

you should be looking at something along the lines of this:

03. by default, the kmplayer is going to save everything to a folder it sets up by itself in the documents folder. you can change where they're saved by clicking the little folder at the top if you want (i don't, but i'm a lazy ass bum, so).

04. okay, so now that you have that set up, you just press start in the frame extraction window, and then play on your video. and then, you pause the video and press stop once the video has played through the parts you want to screencap.

05. locate your screencaps, so that you're ready for the next part~


II. PUTTING THE GIF TOGETHER
i use photoshop cs3 to make my gifs, but as far as i know, animations can be made in most versions of photoshop.

01. go ahead and open all of your frames in photoshop. every last one of them.

and here's where things get a little tricky, but i'm going to explain it as best as i can.

02. go back and grab the very first screencap in the sequence. you're going to copy and paste every single screencap on top of this one, in order. so on top of the very first frame will be the second, and then the third, and so on, until you get them all into the same image.

02 - a. once the frames are all on top of each other, you can resize it to however big you want it (500px is the widest gifs can be on tumblr). i already had all of my caps resized and saved from using automated actions, but that really doesn't matter and it doesn't change anything.

03. okay, now you have to make sure your animation toolbar is open. if it isn't, just click window --> animation.

in the upper right corner, there's a button that looks like a triangle with some lines next to it. click that, and then choose 'make frames from layers.'

your animation timeline should now look like this:

04. now you have to make a few minor adjustments to the way your gif is going to play. first, in the bottom left hand corner, make sure it says forever. if not, your gif will play through once, and stop.

you also have to change the speed of the frames. click that funky triangle/line button again, and choose 'select all frames.' then in one of the frames in the timeline, click on the time marking (0 sec.), and adjust the length of the frames. how fast or slow a gif plays is entirely up to you. it's entirely what you think looks best. mine are usually around 0.16-0.19 seconds per frame.

05. essentially, you could stop here. you now have a completed gif, so if the spirit moves you, go ahead and skip to part IV.


III. COLORING GIFS
i'm not going to go into any details of coloring, because you can use whatever coloring you want. it does not matter. now is the time to get creative. if you want some tips or ideas, try searching through icon_coloring, icon_tutorial, or psd_tuts.

black and white gifs will always have smaller filesizes than ones in color, as well as darker colors. yes, initially sometimes black and white ones seem to be bigger, but you can actually take out more colors than you would if your gif was in color.

one thing i do, that i'm sure not everyone does, is i figure out all of my coloring a completely different image. i open one of the screencaps from the gif, work my funky magic, and then drag all of my layers onto the gif. that way i'm not making a lot of changes to the gif itself, and it's easier to undo things. idk, i'm weird and just do things in strange ways.

the only thing to remember about this part, is the layers for the coloring need to be on top of the layers with the gif frames, or you're gonna get a distracting flash of uncolored frames. and no one wants that.


IV. SAVING GIFS
okay, so one of the most annoying things about making gifs, is that the biggest a gif can be on tumblr is 500kb.
(if you're not going to upload your gif onto tumblr, then it really doesn't matter what your filesize is.)

01. press file --> save or web and devices. make sure on the right handside, one of the drop down boxes says gif (if it doesn't, change it).

02. okay, now check out the bottom left corner. that's going to tell you how big the filesize currently is. if it's more than 500k, then you're going to have to reduce the colors.

to do this, go back the the right side, and it's going to say 'colors.' you can't miss it. start reducing this until it gets so that the filesize is smaller than 500.
when making black and white gifs, a lot of the time you can drop the amount of colors all the way down to around fifteen, and it won't actually distort that much. this is why black and white gifs can be so much longer than color ones. however, you start to really distort things as soon as gifs in color get to around 100 colors.

how many colors you can have and still meet the filesize requirements is really just trial and error. sometimes things will work, and sometimes they just won't.

03. once you've fiddled with all of the settings and you finally have something that will work, just click save and i trust that you pretty much know what to do from there.

right-click + view image (or similar for different browsers) to view full size

04. YOU'RE DONE!! go award yourself a cookie.


V. FAQ

what version of photoshop do you use?
CS3

why do you prefer to use HD videos?
HD videos have better image quality for editing, but there is absolutely nothing wrong with using standard definition videos. a lot of times you can't even tell the difference.

why every fifth frame?
it's just something i've noticed while making gifs. you can cap every fifth frame, and you'll usually capture everything important in a clip, and you can usually even read lips of what people are saying.

however, sometimes there will be little quirks in a moment that i want to gif (like, for example, in despicable me, during the 'does this count as annoying' scene) you'll have to capture every third or fourth frame in order to actually catch everything that someone is doing.

how do you get the dark edges on some of your gifs?
once, you're done with your coloring, create a new layer on top of everything else. use a soft round brush (mine's set at 300px) and paint over the edges/everything but your subject with black. then set the layer to soft light. this is going to darken everything just a little bit, which will help combat challenging filesizes.

what do you mean you can take out more colors from black and white as opposed to color?
well, this is a black and white cap that i saved in gif quality with only 20 colors, and this is one that's in color. see the difference?

but vicki, my gif is way too big for tumblr.
okay, is it in color or black and white? because if you make your gif in black and white, it's always going to be easier to take out colors and keep the relative quality of the gif.

my gif is in black and white, and it's still too big.
try taking out a few frames at the beginning or end that maybe aren't really necessary. or you can crop off a bit of the top and/or bottom. a lot of times there isn't much going on there.

or, you can resize it too be significantly smaller (250px is a good starting point), and then add a border around it. filesizes plummet when you do this.


THE END.
if you have any more questions or if you want me to clarify something, feel free to leave a comment here, or a message in my tumblr ask box.
Tags: % gifs, % tutorials
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded  

  • 29 comments