Previous Entry | Next Entry

How to put Text in Animated Gifs

There are a lot of tutorials on how to make animated gifs, but none that i can find which include how to add text to those animations.

My tutorial explains how I go about adding text where a person is talking in an animation so that people can understand what is being said.

Program : Photoshop CS3
Difficulty : Intermediate, some basic knowledge of photoshop assumed but hopefully beginners can follow it too.
Warning: lots of images and quite a long tutorial under the cut

This is the first tutorial i've written like this so be kind :D + its getting late in my part of the world



To start with you'll need to create your own caps. There are plenty of tutorials out there on how to do that. For giffing I usually go with KM player because you can preset the size of those caps to a nice gif size, which saves you having to re-size them in photoshop.

In photoshop select File – scripts – load files into stack



this is a script that comes with cs3, what it does is loads multiple images into one file with each different image on a new layer. Perfect for gifs :D

the new window that pops up is defaulted to use: files – this means that you have to click browse to navigate to the folder where you keep your caps for the particular gif you want to make, select all the images that you want then click okay.
You can also change use: to folders – this allows you to click browse and select a whole folder that your caps are kept in.



Depending on how many images you have as part of your gif, it might take a little while for photoshop to load them all up into layers.



Before we start messing around with the animation frames, if your caps were originally quite large you'll need to resize them by selecting: image – image size and either typing in specific pixel numbers or changing pixles to percentage and reducing it by a percentage that you're happy with.

I skip this step because I usually tell KM player to cap at a specific size that I keep the majority of all my gifs at.

Now make sure that you have the animation window open by going window – animation

at the very right of the animation window there is a button, click that button to open the animation menu:



in that menu click – make frames from layers
This turns each layer into its own animation frame. If you were to click play on the animation window now you'll see the animation go... only problem is, its going backwards. Not exactly what we wanted, but its easily fixed.

Click on the animation menu button again and this time select - Reverse frames. If you click play again the animation should play the way we want it to.

To get it to play at a natural looking speed, select all the frames by clicking the first frame and holding shift click the last frame.

Then click on 0sec and change it to 0.1seconds – I find this the most natural speed setting in both firefox and explorer once they've been uploaded. Don't really worry about what the speed looks like in photoshop – ive found that photoshop tends to be the one that lies, if it looks funny once its uploaded then you can come back into photoshop and mess with this setting a little.



play the animation through and if there are frames at the beginning or end that you don't want, delete them from the animation window first, then delete them from the layers panel as well.

Now comes the very tricky part – adding text. If your gif doesn't really need text then you can file – save for web & devices here.


With the first frame of your animation window selected, THIS IS IMPORTANT, add the text that you want on your gif. Once you've typed it in, with the font and size that you want, make sure that the text layer is at the very top of all your layers.



If you want to put stroke on your text, the solid coloured outline around text, do it now. You'll notice that when you do this, the stroke is only visible on the first frame and not the others. If you duplicate this text layer (cntl J or right click the layer – duplicate) you'll see the stroke is now on all the frames. You can delete the original text layer.
This step saves you having to go to each individual frame and put the stroke on the text – a BIG timesaver.

Now we come to positioning the text and making it only visible where my gif subject is talking so that we know what he's saying.

In my example, Danny is saying “Nice” at the very end where he gets splattered with goo (pretty isnt it!) here's the gif without any text:



I want the word Nice to come up as he says it, so people know what's going on.

To know the right size and place for the text to go is a bit tricky, so keep playing with it until you are happy with it – its easy to get frustrated here!

With your text layer selected in the layers pallet scroll over to the point in the animation window where your subject is talking, have a look at where the text is at the moment



I think mine is too far to the right at the moment and probably could stand to be a little bigger. So to move it closer to my subjects face CLICK ON THE FIRST FRAME AND MAKE SURE THAT ANY CHANGES TO THE TEXT'S POSITION ARE DONE ON THIS FRAME ONLY!

I cannot tell you how many times I've stuffed up at this point. If you make changes to the text's position on another frame it will ONLY change in that frame not in all frames. If you find that you've done that undo (ctrl - alt - Z all at once) until all the changes that you've made to that frame are gone, click on the first frame and start again.

“But my subject has gone! How do I know where to put the text now?” I hear you saying... yep its a bit sucky but you'll have to do a some guess work and flip between looking at the frames where your subject is talking and the first frame to see if you need to move it some more or if you can stop. It becomes easier the more you do it – trust me.
Also if anyone knows a better way to do this please let me know I'm always up for figuring out easier ways to do things!

Okay so now I have my text at the right size and place that I want it. With the first frame in the animation window still selected click the eye next to the layer in the layers palette. This toggles the layer's visibility. By doing this on the first frame it makes the text invisible on all the following frames in my animation window as well.



Watch the animation through and try to take note of what frame number your subject first starts saying the word/sentence you want to caption. Click on the individual frames and you'll probably be able to see exactly where your subjects mouth starts to move. On that frame click the eye button on the layers pallet again to make the text visible. I will then usually let the animation play again and try to take note of where the subject stops speaking. Click through the individual frames to find the exact frame where the mouth stops moving and again click the eye button to make the text visible.

This then means that you have two clear frames for you to highlight in between and make the text visible on. Rather than just trying to guess how many frames to highlight and make the text visible on.



So highlight those frames using the cntrl key and click on the eye to make the text visible on all frames where your subject is talking.

Play your animation through and if you need to adjust the frames where the text is visible just use that eye button and click on the individual frames one by one.

To save your gif go File – save for web & devices.

In the dialogue box that opens I usually select Gif 128 dithered in the preset box at the top right:



click save and YOU'RE DONE.

This is how mine ended up looking:


While saving I do also take a look at the size the gif will be according to to photoshop when its saved. Anything over around 3.5 MB its getting a bit big and is the reason why people with slow internet hate it when people post gifs. If you're gif is larger than that you should probably think about trying to make it smaller. Usually if its too big its because you are trying to gif to much of a scene, cut it down to less frames and only capture the major facial expressions or words of your subject rather than a whole scene.

If its still reeeeeally big then you can also look at making the overall size a bit smaller, or sometimes making it black and white instead of colour will help. My last resort is to delete every 2nd animation frame – you'll still get the gif that you want but it might be a little jittery if too many in-between frames are cut out.

PHEW! I hope my instructions were clear and if I've not explained something enough lemmie know and I'll try to elaborate.



Thanks for reading

Comments

( 10 ideas — Have an idea? )
sumrndmgrl
Aug. 6th, 2010 09:12 pm (UTC)
You have no idea how much i appreciate you making this. thanks for taking the time. the screencaps, explanations, examples... thanks! :)
curlytoot
Aug. 7th, 2010 03:20 am (UTC)
Not a problem. If you do try it, lemmie know how ya went :D
smallvillefics
Aug. 6th, 2010 09:22 pm (UTC)
Awesomeness! I've been thinking about tackling some animated GIF's, but this is the icing on the cake to convince me. :D Thanks so much for this.
curlytoot
Aug. 7th, 2010 03:22 am (UTC)
YAY, yeah give it a go - the more you play around with stuff the more you'll be able to do as you get the hang of it :D
non_timebo_mala
Dec. 16th, 2010 03:14 am (UTC)
This is such a helpful tut, thanks!

Would there be any possibility of you re-uploading the pictures though? There's just a few things I have a question about and those may help. :p
curlytoot
Dec. 16th, 2010 07:28 am (UTC)
ooooh sorry, I forgot about this when tinypic deleted my account >:|

reloading for ya :D
wednesday_d
Jun. 4th, 2012 10:26 pm (UTC)
I don't care if this post is kinda old, but I really wanted to thank you for this!!! It's awesome and it helped me sooo much!! Thank you again XD
acustica
Oct. 13th, 2012 07:31 pm (UTC)
late to the party but thanks so much for this! really helpful :)
curlytoot
Oct. 14th, 2012 01:17 am (UTC)
oh COOL, i'm glad its still helpful! :D
bizarra
Jul. 2nd, 2013 04:35 am (UTC)
You are a computer lifesaver. THANK YOU! Three years later. LOL I was tearing my hair out trying to get the text on the right frames!
( 10 ideas — Have an idea? )

Tags

Current Month

November 2014
S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
Powered by LiveJournal.com
Designed by Lilia Ahner