#subtitle tutorial

okay so when it comes to adding text to a gif it varies slightly whether you’re using frames or the timeline. i heavily recommend using the timeline function over frames just in general bc it allows for a lot more flexibility, ease, and precision with each effect that you add.

how to convert your gif from frames to timeline

when you add caption text to a gif, you wanna make sure you’ve resized the gif first. here’s a quick guide to gif dimensions. additionally, always make sure that your text layer is above all of your editing/coloring layers.

after resizing and editing, go ahead and click the lil text icon in the tools panel on the left.

your cursor will change shape, and and then you can draw a text box on your gif. it will fill with placeholder text at first:

press ctrl+a to select all the text in the box and backspace to delete it. type in your caption text:

select all the text again and press the center icon (1) at the top of the screen to center it within the box. once you’ve done that, click the check mark (2) to tell photoshop you’re done editing the text:

now that your text is centered within the box, it’s time to center it horizontally on the gif. switch to the move tool:

and make sure your text layer is selected in the layers panel:

press ctrl+a. your entire gif should have a dashed line around it. press the center icon at the top:

(pro tip: this will work for any type of layer you want to center, not just text.)

from there, use the arrow keys to scoot your text up or down to whatever distance from the bottom you prefer:

now, let’s get into specifics like fonts, sizes, and shadows that will help make your text more clear and readable.

click the text tool icon again, click your text box, and press ctrl+a to select all your text. these are my preferred caption text settings:

i use arial rounded MT bold font, 17pt for full size (540px width) gifs and 14pt for smaller gifs. i use the “faux italic” setting to add a slight slant. 

next, let’s talk about blending. drop shadows and strokes are essential for helping your caption text show up clearly on any gif. right click on your text layer in the layers panel and click “blending options...” OR just double click your text layer.

these are my preferred blending settings for caption text:

click “ok” in the top right of the panel to save the settings onto your text layer.

all right! you’re almost there! the last thing to do (if you’re editing in timeline) is to make sure that the length of your text layer matches the length of your gif layer.

if your timeline looks like this:

or this:

then you’ll need to adjust the length of the text layer. to do this, click and hold the right end of the purple bar representing the text, and drag it horizontally until it matches the length of your gif layer.

and you’re done! the finished product:

I’ll start off by saying that this is one of the main features which photoshop really helps with - their quality is much better and it’s just easier to do especially for gifsets. However, this really isn’t to say you can’t have very decent subtitled gifs without it :)) So for this specific tutorial all you’ll need is iMovie and to go to the ezgif website to convert your subtitled video into the gif, for all other steps see the tutorial I linked above!

Okay so I’ve got this as my starting point where I’ve already coloured, slowed down and cut out the part of the video I want to gif (note: these steps apply for when you want to make multiple subtitled gifs from the same video, you’d just repeat the process outlined here)

To add the subtitles I change from “my media” to titles and then select the lower third option which I click and drag to where I want to add it in on my video. So now my screen looks like this:

It automatically will only be 4 seconds long, but you can elongate it by dragging the purple rectangle along your video until where you want it to end. Click on the textboxes which say Name and Description and start writing your text

 Usually, I just delete the top bit which is in a bigger size (unfortunately this isn’t something which you can manually change) and type in my text in the bottom one. However, if the text you want to include is longer and you need to use both boxes, make sure that most of your text goes in the upper box so that the font size becomes smaller. You can keep an eye on this and can try and make sure that both boxes contain text of a similar size. Although this can’t be changed, you do have a range of options for different fonts which you can experiment with, plus the colour of the text can also be changed. So, for example:

Here I have kept the font the same but you can use the drop down box on the far left to change it. The size you cannot change but I’ve played around with the sentence to make it be almost equal in box text boxes, this is really just about trial and error. Then I’ve decided to make the font bold, italicise it and outline it (the three boxes on the right are in the order that I mentioned them) purely for stylistic reasons. Then if you click on the square which will initially be white you can change the colour of the text, although you can only change the colour of the whole text box rather than individual words in one. This is usually used to represent different people speaking.

Once this is done you’re basically ready to save the video and go and gif it using ezgifs. However, one last thing to note is the fact that in iMovie the subtitles fade in so if you gif all the part you’ve subtitled then there will be parts of the gif with captions still fading in. To get round this problem, I extend the subtitles to a little before and a little after I want the gif to begin and end. In this way on ezgif I can choose the starting point to be once the subtitles are fully on the screen, and same with the ending. And there you should have it, something like this as your final product :) Feel free to ask me anything if you would like more clarifications but I hope this helped for the time being

So take your first gif and type out 5 lines of random text. Set it to whatever subtitle settings you like (here are mine). Scoot up the text so that there’s some space between the text and the bottom of the gif (tumblr cuts off the bottom of gifs by like 2px on the desktop version).

Next we’re going to center the text! 

Selecting the text layer, hit Control + A (pc) or Command + A (mac). You’ll get the marching ants animation around your gif.

Next, hit the button V to get to the move tool (or just hit the Move tool button on your left toolbar)

Now you’re going to hit this button to center your text!

And BAM. Your text is centered! 🎉🎉🎉

Now, save this as a .psd. Use it whenever you want to add subtitles for something.

Now let’s say this gif was part of a gifset I was making and I want the subtitles to be aligned at the SAME exact spot. It’s really easy!

So on your subtitle psd, make sure your text layer is selected, right click it, and hit “Duplicate Layer”

This dialogue will pop up. Under DESTINATION, Document, you’re gonna pick the name of the file you wanna transfer the subtitles to (in my case, it’s a file called “file b.psd”). Then hit OK.

TA-DAAAA. Your subtitles transferred PERFECTLY to the other gif! :D

Now just erase the text and start typing whatever you wanna type at the top.

Then go to the beginning of the text and hit the enter key x amount of times until you get your text at the bottom. It’ll have the EXACT amount of space from the bottom of the gif to the text like your first gif. :)

And you’re done!!

WARNING ⚠️⚠️⚠️

When you duplicate a text layer from one gif to another, for SOME reason, if you have a Drop Shadow effect, the Angle gets reset to default for the new gif (30 degrees) :/ So just open it up again and fix it.

ALSO!! Make sure when you duplicate your subtitles onto another gif that THE TEXT LAYER IS ON TOP! ABOVE your coloring layer! It’s so important!! Otherwise, your text ends up looking janky like this:

It’s kind of hard to tell but it’s fixed here by just making sure the text is ABOVE the coloring layer:

(I wanted to include some example pictures in this but this post is already long and it messes up the bullet points, so I decided to put them all here.)

So in general, making subtitles has two parts: first the translation and then the subtitle editing and formatting.

Translation crutches:

Watch the entire part/episode you have to translate beforehand. The better you know the material, the easier it will be. Pay attention to see if there are recurrent terms, sentences or expressions in the episode, for example nicknames, or terms like “Lit TA”., “Board of governors” etc. If you translate with several people, it might be a good idea to create a little glossary to ensure consistency.

This is obviously easier the more material you already have. Pay attention to how the characters speak and what language they use.

Translate the episode’s title.There might be title cards at the beginning, the end or sometimes in the middle, so make sure you don’t forget them!

After you finish translating, read it again and ask yourself: “Would I say it in my own language?” It helps you to see if the translation is too literal.

Every character has their own “voice”; Does the character use slang? Or do they talk more formal or use antiquated words? Try to imitate these things in the translation too.

Puns are often impossible to translate, especially if they depend on a rhyme. Maybe there is a saying that comes close?

Spell check!

When you finished the suffering and crying of the translation and you finally have the text for your subtitles, there are some rules for the formatting to bear in mind!

Subtitle formatting:

Sometimes these guidelines cannot be applied perfectly. Don’t panic and go with your gut, maybe try a few different versions and see what works best when you play the episode.

Subtitles can’t overlap. (Your subtitle editor should indicate this.)

Subtitles need to be on screen long enough so you can read them comfortably, especially if the text contains unfamiliar words.

For this do not put more than 35-40 characters in one line and no more than 2 lines. (This might depend on the language! German for example has longer words in general, so lines that are a bit longer can still be read comfortably.)

Try to match the beginning and the end of the subtitle with the audio, especially if someone talks immediately before or after; it can be good to allow a bit more time. In general, the subtitle should last a bit longer than the audio, because reading takes more time than listening. Add a tiny bit before and a small bit at the end. 

Pay extra attention to the timing when there is a joke (for example, LaF bursts in and interrupts - if their speech appears to early, you ruin the surprise!).

Line breaks should happen at logical points in the sentence.

It is possible to break a long sentence into two or more separate sentences and then you can display them as consecutive subtitles. Again, make sure those breaks happen at a logical point.

You should also break the sentence when there’s a pause in the middle.

Sometimes several people speak more or less at once. The standard way to format this is to indicate each speaker with a dash and a new line.

Make sure to give enough time for one word subtitles too (”Hey.”). They should appear on screen for minimum 1 sec.

If someone talks off screen, indicate their name like this: [Laura]

Same goes for music or noises, for example [panther growling in the distance].

Subtitles should not overlap into a different shot. (In Carmilla you almost never have shot changes since there is only one camera angle and maybe a cut in between scenes, but in Couple-ish that might happen.

Common problems you might run into and possibilities to solve them:

Too much text in too little time. Sometimes you have people like Laura Hollis who talk without breathing for half the episode - and it can be a real challenge to fit it all in the given time.

The first thing you should try to do is check your translation, maybe there is a way to make it shorter by using a different phrase, word or structure.

Delete words that are not absolutely necessary, like “well”, but don’t do this all the time either!

If you have a pause, you can extend the subtitle for a bit longer when nobody else is speaking.

Divide the lines differently. 

Get distracted and rewatch the episode. (And cry again cos that’s fun.)

Extra subtitles on the screen which are not spoken (like JP in s1) and people talking simultaneously.

We can use two lines with a dash and pretend as if it is a normal dialogue, but shortening both lines.

If the characters read or narrate the text, then it might be best to only write down the spoken text.

Brand names and references to characters from other shows:

Urban dictionary is your best friend!

Leave the name as it is.

Look up the show and check if the character already has a translated name and then use that.

If it refers to food, sometimes it is a good solution to use a more general term, for example “candy” instead of “twizzler”.

Quotes: For example, Carmilla quoted Camus once. You can look it up if there already is a translation in your language and then use that, otherwise you have to translate it as best as possible on your own (if possible, from the original).

Last step: Watch the whole thing at once and check for any last mistakes or problems!