Several phrases on the same GIF

To do this tutorial you have to already know how to do the basic GIF (Click here). Please, PLEASE…I am sorry about all the English mistakes. Remember, English isn’t my first language and I do not know a bunch of things.

• When your gif is all done, ready to go, with a good size and already with all editions you’ve made (brightness, contrast, hue, saturation, etc), you go to your first frame and click it, then go to your last layer and click it. Then you create the text box, pressing T on photoshop.
•  Then you create your text and edit as you wish…In my case I  almost always use MV Boli font with size 14, but i think Calibri and Helvetica are the best ones; and always do an outline to be more visible. To get the black stroke around the text (outline), double click the text layer and do this below:
  

•  Then press “ok” and to have the stroke visible on each frame, duplicate the text layer. I don’t know why but you have to duplicate, because if you don’t, the stroke will be visible only in the frame you’re working on. And then you delete the “original” text layer and leave just the duplicated one.

•  Now, well, you already made at least the basic text. But I am doing a tutorial for a GIF with more than one text layer… So. Now is the trick, you play your gif as it is and see on which frame ends the phrase you’ve wrote… In my case the phrase “I always had this sense that it wasn’t really my life I was leading.” Will go until the middle of the GIF on the frame 20. Some people just divide the GIF…like…If it is 3 phrases you will put and the GIF has 60 frames, they just throw the text in 20-20-20, I prefer to really see where the character stopped talking one phrase and started the other one. Looks better, BUT IN THIS CASE I couldn’t capture all his phrase because after that the camera goes to Jason, so it’s not necessary, so I am using him talking just this one, but putting text of two. Anyway, now I will select from frame 20 until  the end, frame 39 pressing the frame + Shift on 21 then on 39:

•  Now I will go to my text layer and will click on the eye tool. The text will disappear only between the frames 21-39 and will appear between 1-20. Now you will just to do the same thing with the other phrase you have to put on your GIF, in that case the opposite, you write on the frame 21, and then you click with shift on the layers 1 until 20 and change the visibility on the eye tool. Sometimes you can do this even if there is not other phrase, to just make the text disappear in some moments, etc. It looks difficult explaining but it’s pretty easy. Just don’t forget EVER to see if all your text layers are on the same ‘position’ on the GIF… I mean, the phrase isn’t changing position from frame to frame, because it’s look terrible if you don’t pay attention to this and use different coordinates on different frames. Where is the fucking “eye tool” i am talking about? Here:
  

After you’ve made all your phrases and they are showing and disappearing in the right places, you just have to save it “Save for web & devices”.

Here it’s the final GIF

Basic GIF tutorial

Uh, right. This is the first tutorial. Since people are asking another ones, i will post with TAG’s, then you can always go to GIF tutorials and it will be there.

Let me see. This is a basic tutorial,  there is much more you can do when you are making GIFs but even I don’t know all them, and when you learn the basics you can go to the next level.

First of all, you will need Photoshop (there is a thing called Piratebay :P) and KMPlayer.

Second: you DO NOT GIF small files. What is that suppose to mean? If you are gonna GIF some scene from True Blood, you do not pick a file with only 230 mb. You have to download better versions, the best is 720 MKV versions (I can tell you where to download). The bigger and brighter your caps are, the better the quality of your GIF will be.

So let’s go.

I will pick a random scene and only make a 500px GIF.

1. 1-      Capping:

- Create a folder on your desktop just to save all the captures.

- Open KMplayer with  the file you want to capping.

- Press ctrl+G and use this settings:

(where it says “Extract to:” open and put the name of the folder you created for the captures.)

- Go to the point you want to make a GIF.

- Then you click on Start. The program will capture automatically the frames for the GIF… When you use a MKV file this may take time.

When you already capped all the scene you want:

1. 2-  to Photoshop:

  - Open Photoshop (I use 5.1). Go to File>Scripts> Load Files into Stack and then click on “Browse” and go to the folder you saved all the caps. Chose all the captures you will use and click ok.

    - Now Photoshop  will open all the captures you will use in one file. It’s time to cropping/resizing the image. In this site you can see all the size options you can use on Tumblr. In my example I am using the regular: width 500 px (The limit on tumblr) X whatever height you want to (to resize you go to Image> Image size and change as you want)

Cropping

Resizing

       - The resize and crop is very important because tumblr only accepts certain sizes and also you have to take care because if you don’t crop or resize properly your GIF may look disproportional, like this:

(exaggeration I know, but I have seen a lot of disproportional GIF’s and they are….ugly)

     - Now it’s time to Sharpen. You can do it, OR NOT.  I am used to doing it, but this requires you to do another separate step. If you want to know how to sharpen and make an action to do it go here: http://brittany-santana.tumblr.com/post/8505974210/how-to-apply-an-action-e-g-a-filter-like-sharpen-to.

     - Don’t forget to sharpen before make the animation but after resizing.

      - Now I guess all the boring and complicated part it’s done. Some people say you can only use a specific number of frames for specific sizes. This is bullshit,you have to try and try always and see what works better for you. Some GIFs I made huge and then change the color to B&W and it’s fine….Others i have to delete frames and more frames to look good.

1. 3- Animation:

      - You already cropped/resize and used sharpen (or not). Now It’s time for animate. Go to Window> animation.  Click on the arrow (image) and “make frame from layer”, then in this same menu you click “ Reverse frame”, then again in the same menu “Select all frames”.

       - When you’ve selected all frames you click on top of one of the frames and put the delay for 0,16…Can be another delay depending of the type of GIF you’re making, but usually 0,16 is fine.

     - Now is time for deleting unnecessary frames… I always selected first the odds, and then if is still too much frames I select every second frame. To select you click on top together with the ctrl. To erase you click on the little trash icon on the bar.  This is also a step where you have to take care not to delete too many frames because if you do, your GIF you look sloppy, wobbly… ugly! :P

        - Now it’s done… You animated the scene, you have deleted unnecessary frames… Just ready to go? Not so fast…To make pretty GIF’s is better if you colour then.

         - To colour you have to go to your layers and click on the top (just remembering…Frames are the ones in the animation bar, layers are the images you’ve imported from the captures):

        - When you click on the top layer then you go to Layer > New adjustment layer and play as you wish with all the options…Brightness, contrast, hue, saturation, B&W… a bunch! Or you can download colouring PSDs on tumblr or other sites and use them on your GIFs. I have a ton of colouring PSD’s ready to go when I wish to use them.

       - To add text layers is a bit complicated…If you will use just one line or two of texts in your GIF it’s easy,you just have to create the text on your first frame and on top of the first layer (like for colouring), but if you are giffing a huge scene like this one, you use several layers of texts in one GIF, you have to use the “eye tool” and clicking it on where you want some line to appear or disappear. Yes, I don’t know how to explain.

        -  Now my GIF is ready to go, colorized, pretty, not so big, not wobbly or sloppy… Go to File> Save for Web & devices. Now it’s time for the truth. In my case I’ve made a B&W GIF so I can put less colors to be less than 1MB (size limit for tumblr)… But most of the GIFs has to be more than 100 colors  and this can be a bitch…If your GIF is bigger than 1MB you have to delete more frames (and changing the delay because of this), maybe changing the GIF to B&W and if is coloured using at least 100 colors…Less can destroy your GIF…This you just get with time and practice.

Here it’s the final: