GIF TUTORIAL

Okay so every now and then people ask me how I make my gifs, and I’ll do the standard “ImageReady”, but that’s not overly specific and it doesn’t help anyone. Once you get the hang of gif-making, it’s really simple, but it does take effort. Once you’re a gif-maker you’ll never steal anything of anyone else’s again, because you know how much hard work goes into making it look perfect!

Okay, so the programs you’re going to need are:

  1. Freecorder. Now you don’t technically need this, but I recommend it. Freecorder will track whatever video you watch online and give you the option to save the video to your computer. It’s so helpful for numerous things, like if you’re in the middle of watching something and your internet or computer crashes, if it’s loaded, freecorder will save it. :)
  2. Adobe Photoshop CS2 and ImageReady. Completely essential to this tutorial. If you don’t have it, well, it’ll be difficult for you. Now this is only a trial version. There are keygens and tutorials to crack it which means the trial limitation is removed, but you can find that elsewhere haha I’m not going to give it to you, sorry.
  3. GOM Player. This is what I use for the videos I download and if you’re only using those then I recommend it. However, very rarely will it play DVDs, and most of the time if it’s a DVD the sound won’t work which is why I mainly use…
  4. KM Player. I have nothing to really add to this, other than to say that this is my favourite, so you should definitely download it. Plus it’s a great media player.

Okay. Today I’m going to gif a scene from Gossip Girl. 

STEP ONE:

GOM PLAYER

Open your DVD or video in GOM Player. In order to get the screencaptures of your future gif, follow the numbers in the picture below. Where it says 0.1, depending on the length of your scene, it’s going to be a lot of images and a lot of frames. Which is why for the most part I use 0.2, which means you have less images but you can still fit the scene you want normally under tumblr’s restrictions. However, the difference between 0.1 is that if they’re saying something, you can see every word pronounced, where as with 0.2, not so much. 

So when you follow those steps, the images will be saved in a folder, normally in your documents. So just go to Documents > GOM Player > Capture and there they are. Delete the images you won’t be using.

KM PLAYER

Open up your DVD/video in KM Player. Now this part’s a little bit tricky. In order to get to the “Frame Extraction” window, you have to press CTRL+G. The window should then pop up and I suggest just copying exactly what I’ve got there. Where it says 5, it’s basically the equivalent to 0.2 in GOM Player. The higher the number is, the faster your gif will be/the more photos you’ll have. The lower, it’ll be slow. Don’t make it too low because then it’ll just look disjointed and weird.

Press start when you want it to start saving the images, and stop when you’re done. Like GOM Player, to access the KM Player files, just go to Documents > The KM Player > Capture, and delete the unwanted pictures.

Okay now we’re ready for:

STEP TWO

Open up ImageReady. It’ll be a little bitch and ask if you want to register and just say no. Okay so what we want to do now is to open your images as frames, so just follow the image below.

Once you’ve clicked “Folder as Frames…” just go to the folder where your images are saved and click okay.

Your image should open up and this is basically what your screen should look like:

obviously though, in the animation window, the numbers under each frame will be 0. Select all the frames and click on the number below them to adjust the speed. If you saved it at 0.1 on GOM, go for 0.1 seconds, or if it was 0.2/5, go to 0.2 seconds. You can always adjust them by clicking ‘other’. You don’t need to be excessive. If you want it a little faster, then just make it go down a few, or up a few if you want it slower. That’ll be all you’ll need trust me. Then just press the little play button and voila, you have a gif. 

But, while you have your gif, you’ll need to adjust it to make sure it abides to tumblr’s gif restrictions, so this is where we move into photoshop.

STEP THREE

Firstly, make sure you’ve selected the FIRST frame in the animation window. That way, if you make any colouring changes or add text in Photoshop, it’ll then go onto all of the frames. If you select any other, it’ll just change the frame you’ve selected and it’s really irritating once you realise. Also, click the last layer in the layer section so you don’t have to move everything all the way up. Once you’ve done that, click the button I’ve circled and it’ll move you into photoshop.

Next, I’m going to colour my gif. If you’re like me and don’t want to spend hours making your own colouring, there are various websites that will give you psds to download so you can just move the layers onto your own picture. I’m sure there are several on tumblr, but I’d go with psd resource on livejournal. So to open that up just go to File > Open  and then choose your psd. 

Once you’ve done that, select the layers, and then move them over to your image. There’s no science behind this, just drag them over. Delete the ones you don’t like, adjust the prominence through the Opacity option in the layers box. 

Once you’re happy with that go to File > Save for Web and you should get this:

 

click on Diffusion, and change it to Pattern. It’ll make the quality of your gif nicer. Then time to re-size. Tumblr won’t allow you to have a gif bigger than 500px in width, so resize it to that. If you want a long gif in 500 px, you have a few options.

  1. make the height small.
  2. make sure your gif has darker colours
  3. try to keep your gifs under 15 frames. (not a long gif, but whatever.)
  4. change the colour (blue highlighted). the less the number is, the more colours they take away from your gif. Depending on how bright the gif is, it’ll look pretty ugly if you go too low, but if you’ve got a black and white gif, or darker colours, you can go lower and then it’ll still look presentable. 

Keep an eye on the number on the bottom left corner. Tumblr won’t allow any gif over 500kb, so the smaller your gif is, the darker it is, the less frames it has, etc etc, will make it fit. I got mine pretty under (It’s a long gif but I made it 300x150px for this tutorial). 

Next you just click save and voila:

If you have any other questions or if something needs explaining further, feel free to ask me. This is just for a basic gif. If you follow it step by step it should work. :)

HW