Mel (kikwangs) wrote in mixotic,

Gif Tutorial

Here's a gif tutorial for downpour and posting it here for anyone else who wants it. The following things are needed to be able to follow it.

- A video converter that can convert files to mp4. Also useful is the DownloadHelper firefox addon, which allows you to download videos off youtube, and sometimes you can download files in mp4, which is really helpful.

- Quicktime Pro.

- Adobe Imageready CS2

1. After you've converted your file to mp4, open it in Quicktime and use the little notches to mark the start and end point of your gif.

2. Once you've got the notches set, go to Edit > Trim to Selection then File > Save As and save the new video file. That's the gif you're gonna make.

3. Now ImageReady. Open the file you just saved in Quicktime and IR will prompt you, choose From Beginning to End and to make the gif smaller, choose Limit to Every 2nd Frame. Click okay, and you'll have the gif open in IR. If it's not already open for some reason, go to Window > Animation. Now you can see a window with all the frames in your gif, and you can delete any frames you don't want in the gif. You can also see what your gif will look like by clicking the little arrow that looks like a play button on the bottom of the animation window.

4. First, use the crop tool to crop out everything you don't want in the gif, and go to Image > Image Size to adjust the width or height. Ignore all the other options they give you, only bother with width and height.

5. Next, you'll adjust how fast the gif moves. You can click play and it'll show you a regular-moving gif, but note that gifs will NOT move at the same speed online. I've found that 0.09 works well for most gifs, but you can adjust to fit whatever you're making.

5a. Click on that little notch and a menu will come up, click on Select All Frames.

5b. Next, click on the little black arrow thing and click on Other. A box will pop up, saying Set Delay For All Frames To: and put in 0.09 seconds.

6. Now you're gonna work on optimizing it for the web. First, change the gif view to "Optimized".

If it's not already open, go to Window > Optimize. These settings are as HQ as I've been able to find.

6a. If you wanna make a gif smaller for tumblr, this section will help you with that. If you're not interested, skip to part 7. Now, you need to focus on making the size under 500k. This is where your gif size is:

That's...way over 500k. So to make it smaller, you can do the following things. I often do everything below to make my gifs good for tumblr.

- Crop anything you don't need.
- Delete any frames that aren't necessary.
- Resize the whole gif to make it smaller.
- In the Optimize menu, lower the colors as much as you can. It's best to stick with 64, 128, and 256 or any other number above 64 and below 256 that you want to enter. I don't recommend going below 64, because the color will look beyond disgusting.

7. Now go to File > Save Optimized As and save your gif. That's it! Here's the gif I made.

Here are a few ways of making gifs look nicer. Before you save your gif, after you're done getting rid of any frames you don't want, you'll open it up in photoshop by clicking this button. BUT before you click it, make sure you've selected the first frame in your gif in the animation window. When that's done, you can go to photoshop but clicking the button below.

1. Once you're in photoshop, open your layer window by going to Window > Layers and scroll up to the top of the layers and click on the very top layer. This is extremely important.

2. Now you're gonna use adjustment layers. At the bottom of your layers palette you'll see little icons. Click on the black and white circle and choose curves.

2a. If you're not comfortable using curves, you can choose brightness and contrast or levels instead, or really anything to make the gif look more vibrant and less dull.

2b. It's a good idea to experiment with color balance and selective color, especially with gifs, because sometimes you might want more reds or yellows, or you might want brighter whites or darker blacks.

2c. I also like to add a color fill on top of everything. Click on Solid Color, choose a color (I like medium to dark greys), and then once that's done, change the blending mode and the opacity. I chose these.

3. If you want to add a border, it's really simple. Once again, make sure you have the very top layer selected, even if it's an adjustment layer. Click on it, and then make a new layer above that one. Make sure you have that layer selected. Select the Rectangular Marquee Tool and make a selection around the whole gif, so everything is selected.

3a. Once that's done, left click, and when the menu comes up, click Stroke. When the window pops up, put these choices in. you can of course change the border size as much as you want, but I like these settings.

3b. You can keep it that way, or if you're like me, and you like two borders, do the Stroke thing again and these are the settings I use.

4. If you're done adding adjustment layers, jump back to imageready the way you jumped to photoshop, and save the gif. Here's how mine came out.

If you have any questions, or if I left anything out, please let me know! :D

Tags: tutorial: gif
  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded