#zee's tutorials

Couple things to note beforehand:

There is a lot of trial and error involved when doing any sort of text, and this is no exception! You might have to play around with the colors and the settings before you find something that looks good and readable!

This tutorial is inspired by the difference text effect in these tutorials: one and two by @anya-chalotra​ (highly recommend checking those out!), just done a different way.

This text effect works better on big gifs (540px width) that have quite a bit of movement below the text so you get that effect.

Find fonts that have bold shapes or some width to them, so you can see the movement.

This is my starting gif, after sharpening and coloring.

First, I position my text where I want it. (this can be moved around later, I just like to get an idea). Remember what I said about fonts? Try to use ones that are thick for this effect so you can see the gradient/movement underneath the letters. I’m using Intro. 

It doesn’t matter what color the text is at this stage, I just do white text so I can see it:

Then, add a gradient map in the color you want your text to be. For this one, I chose black and purple. The more contrast there is in your colors, the better it looks. You’ll be able to change this later though, if you don’t like the way it looks. 

This is how it looks with the gradient map:

Now, we’re going to go over into our layers panel, and where we have the white box (the layer box), we’re going to select and delete that...

...so it looks like this:

Then, while pressing Ctrl, we’re going to hover our mouse over the T in our text layer. Your cursor should show a white box with a dotted border. Press the T in the text with the specialized cursor, and you should get a dotted line all around the letters, like so: 

(I’m not able to get a screenshot of the cursor for some reason but I hope the instruction made it clear!)

Then, make sure you have your gradient map layer selected, and press the layer mask button (shown by a white arrow in the below image - it looks like a white rectangle with a black circle in the middle.)

This is what it should look like:

Right now, it’ll look like some solid color (which depends on your gradient). This is because we still have the text layer visible. Once we press the eye icon next to the actual text layer to hide it, you can see that this is what it looks like:

(You can also delete the text layer, but I don’t, just because if I decide to put these two words on two lines, or change their spacing or whatever, I don’t want to have to make a new layer. I can just edit that one before re-masking.)

As you play your gif, you’ll see that this is what the whole movement looks like:

You can see that the movement of him lifting the glass to drink his tea shows through the text, too. Almost like a weird color X-ray type thing, where the lighter color shows on darker shades of the gif, and the darker color shows on the lighter part of the gif.

Note: sometimes, depending on the way your gradient is made, you might get text that looks like the picture below. Just hit the reverse button (shown with a white arrow), and you should get the text looking like it does above.

This is the basic way to do it. Now, we can easily edit this, if we feel like there’s too much purple and not enough black. To do that, we go into the gradient, and change the slider positions of the colors. This is purely an aesthetic preference, but I’ll show you how to do it below:

For example, I moved those sliders so there’s more black and less purple, and the gradient feels more like two colors only, instead of all the various hues of dark purple/gray-purple. 

This is what the gif looks like:

In the gif before this one, the black was more of a muted gray. In the one directly above, you can see that it looks much more striking. So play around with that until you find something you like. 

It still doesn’t look very visible to me, so I’m going to add a drop shadow underneath (again, this is a preference thing). You’d do it just like you would with a regular text layer. Right click the Gradient Map layer and select Blending Options. Add a drop shadow.

This is what mine looks like:

And that’s it! You can keep playing around with the whole thing until you’re happy with it. You can even keep changing the color, and the great thing about that is you’ll be able to preview it as you change it to see what works with your scene. For example, I tried white and black text here:

Couple things to note beforehand:

There is a lot of trial and error involved when doing any sort of effect, and this is no exception! You might have to play around with the colors and the settings before you find something that looks good and readable and that fits your set!

This text effect works better on big gifs (540px width).

For this, I find that a simple font works better than a fully-cursive one, but play around with what you like. The boxes may need some adjusting if you use a font with too many tall or tail letters (i.e. text where all the letters aren't on one uniform line - that's why capital letters work so well.)

Movement works really well with effects like these, but again, it depends on your gif + readability. If you have a blended gif, it may take a little more trial and error.

I work in frame animation for all my text effects, but this works just as well in timeline as well.

We’re going to start with this gif:

First, I like to put my text on the gif. You can obviously move this around later so don't worry too much about how it looks right now.

The dialogue is "Just don't feel it." "Feel" is one of those Big Words for this quote, so I'm going to emphasize it with cursive text.

I am using Moon for the sans serif text, and Santa Fe Spring for the cursive text. Keep both of these in white for now:

Next, we're going to use the rectangular marquee tool to draw our rectangles around the capital letters (we're not touching the cursive text right now). I just eyeball this, and then try to center it as much as possible.

(The rectangular marquee tool has a keyboard shortcut of M, and it's the second tool in that little toolbar on the left of most people's Photoshop.)

This is what that'll look like:

Next, we're going to go down to the icons at the bottom right of the layers panel and select the half-black half-white circle > Color Fill.... You should get a color dialogue box. Choose your color - I'm using #8d0000. Then, we're going to move that layer below the corresponding text layer, and set its blending mode to Difference. This is what that looks like (click the image for better quality):

I'm going to repeat that with the other two boxes as well, using the same color. The boxes will look different with the Difference blending mode because of the shadows underneath.

For example, the box with "it" looks like a solid red square because it's against a completely black background, while the other two have some blue shading to them since there are some highlights behind them.

This is what my gif looks like now:

Next, I like to go The Lazy Girl™ route and put all three color-fill layers into one group underneath all the text layers. This just lets me edit the drop shadow of all three of them at the same time.

Right-click the group and open up the Blending Options. In Drop Shadow, these are the settings I'm using. The drop shadow color is #0c6477:

(Note: uncheck "Use Global Light" especially if you're working in frame animation to make sure all the drop shadow has the same angle on all frames.)

This is what my gif looks like now:

Now that we've finished that, time to move on to the cursive text.

I usually match the cursive text to the palette of the rest of the text, and since the drop shadow is our "accent" color, so to speak, I'm going to use a lighter version of that color. I am also going to add a drop shadow for readability.

The color I used for the text is #acfffe and I actually ended up adding two drop shadows, just because I needed something subtle that doesn't overwhelm the text, especially since it's a delicate font. Here are the settings for both layers:

And here's what my gif looks like now:

Now, before we move on to the lines, just check the adjustment of all these text layers, see if there's anything you want to change. It's easier to change now than after the lines are added, since you'll most likely have to redraw them if you move the boxes after the fact.

To draw the lines, we're going to use the Line Tool. I just freehand all of this, and I try to go from center to center of the boxes when I can. It all depends on your angles.

My lines are 2px thick, but you can change these depending on your preference. Here's what mine look like right now:

We're going to do the same lazy hack that we did for the color fill, and put all three line layers into a group. Move this group below the text layer and the color fill layers. The reason for this is so that the lines look like they're coming seamlessly from the box, rather than from on top of them or something.

Then, set the group to opacity 50%. I like more subtle, simple looks in my gifs, so I don't like super high opacities.

And that's it! This is our final gif:

Some final notes:

Absolutely play around with the blending modes of the color fill layers for this effect. These two gifs are the exact same color we've been using, just two different blending modes. You can see how drastically different they look. The first one is Linear Dodge (Add) and the second one is Vivid Light:

It can change how your gif looks in a BIG way, so play around with it, see what you like, especially if you don't really like the "two toned" thing going on.

Sometimes, I also like playing with the width and height of the text in the font settings, making it shorter and wider, or making it taller and more compact. You can play with the letter spacing as well. The world is your oyster, etc etc.

One other thing I've started doing is erasing the lines with a big brush, just to fade them from his face a little, like this:

To do that, use a layer mask on the line layer folder, and a brush that's 0% hardness, and at least 200px big. For this gif, I also changed the opacity of the lines back to 100% so the fading effect is a little more pronounced:

(this gif isn't the best example for this, but oh well. Anywho, hope this helps, Nonnie! Let me know if you have any questions.

Once you get your screenshots, you're going to go Photoshop. File > Scripts > Load Files Into Stack.

You're going to get a dialogue box. Click Browse and load the screenshots that you want. This is what that looks like when you finish:

Next, you're going to crop your gif, using the crop tool. You can press C on your keyboard for this or use the tool with this icon in the sidebar.

For this, I'm using an aspect ratio of 540 x 400:

Click that checkmark to crop. Once you do, we're going to resize the image. Use the Cmd/Ctrl + I function to bring up this box. For tumblr gifs, you want to change the width. The height doesn't really matter but if the width doesn't match up, Tumblr is going to fix it for you and it'll look funky. Per row:

1 gif , we use 540px

2 gifs, 268px each

3 gifs, 177, 178, 177 px

We're just doing one, so I'm using 540px.

Now, you want to make sure you can add the timeline. In the top bar, go to Window > Timeline

This will bring up the timeline.

From there, click "Create Frame Animation" (you might have to press the arrow in the timeline bar first.)

It's going to look like this:

We're going to use those three lines in the corner of the picture above. The first option we'll select is "Make Frames From Layers"

That looks like this:

Now, when these load in, you may notice that they're all in reverse. To make them go back in order, we're going to go back to that menu and click "Reverse Frames."

Then, in that same menu, click "Select all Frames." We're going to change the animation speed. You want to make sure you have the first frame selected. We're going to click the arrow next to the "0 sec"

When you click that, it will give you a menu. Click, "other..." You should get a dialogue box that says "Set Frame Delay", just like the one below.

You want to use anywhere between 0.05-0.1 seconds. I find that anymore more is just too slow, so I prefer 0.06. This is fully changeable at the end of my sharpening tutorial, and you can use what you want, but that's what I prefer.

When you do that, it'll change the frame speed of all the gifs.

Now, go back into that little menu, and click, "Convert to Video Timeline."

This is what it'll look like:

Now we're going to select all the layers in the right-hand pane. Once we do that, right-click and select, "Convert to Smart Object."

And you're there! Now you can use the sharpening tutorial to your liking.

Pro tip: Make an action with all these steps so you don't have to do them by hand with every single gif you make.

Couple things to note beforehand:

There is a lot of trial and error involved when doing any sort of effect, and this is no exception! You might have to play around with the colors and the settings before you find something that looks good and readable and that fits your set!

This text effect works better on big gifs (540px width) that have quite a bit of movement below the shape so you get that effect.

For this effect, I find that a simple font works better than a cursive one, but play around with what you like.

We're going to start with this gif:

First, I'm going to add my text and center it. For this text, I used the font, Solar vesta Serif, with these settings:

Note: when you do letter spacing + underline, sometimes, the space after the last letter can lead the underline to stretch a little too far past the letter, making it look like the underline isn't centered properly.

To get past this, I just select the last letter separately, and put the VA setting to 0-10, depending on the font/letter.

We're also going to add a drop shadow here itself, and this is fully up to preference, but I used this:

All of that should give us this (yeah, it's the simplest thing because I'm lazy and I like easy things xD nothing too fancy)

Next, we're going to draw our rectangle around the letters. I like to keep even spacing around all the letters on all sides (in this gif, it's 4px on all sides) but just eyeball it initially, and then adjust accordingly.

I changed the fill to white (this color isn't important, I just used white because it's easier to show) and moved the layer in the back so the text is on top. It should all look like this:

Next, we're going to add a gradient map between the rectangle and the text later. I simply used a black and white gradient, and my gif now looks like this:

Here are the settings:

Next, we're going to delete that white box - the layer mask - next to the gradient map. Just click that and press delete (or right-click > delete layer mask). Your layers should look like this:

Now, we're going to add the rectangle as a layer mask. While pressing Ctrl, we’re going to hover our mouse over the square box next to Rectangle 1. Your cursor should show a white box with a dotted border. Click the square box with that dotted cursor and you should get a dotted selection line all around the box, like so: 

Next, we're going to select our gradient map layer, and then create a new layer mask. At the bottom of the layers panel, you should see a box with a circle in it (denoted with a red arrow). Click that - make sure you have your gradient map layer selected, or you'll end up putting the mask on the wrong layer.

The black and white will disappear, leaving you with just the box again. It'll look like this:

Now, just hide the rectangle layer so it looks like this;

And you're done! This is my final gif:

Once you get this basic thing down, you can play around with it all. For example, I like to adjust my gradient sliders so they emphasize the colors:

You can also just change the colors;

Unlike my previous text effect, we're not going for inverse X-ray effect, so for this, I like to make sure the lighter shade of the gradient is on the lighter parts of the gif, and same with the dark shade.

(If that's confusing, here's a side by side comparison of what the "X-ray" effect vs normal color effect looks like)

Anyway - it's fully up to you!

Because of the effect I was going for, I didn't add a drop shadow underneath the rectangle itself, but you always can if you want to make that a little bit more 3D.

You can also do this with any other shapes, too, with the same procedure.

Couple things to note that make a huge difference before you even start:

Use high-quality videos! I try not to go below 1080p for anything, and sometimes that means downloading bigger files.

Make sure that whatever application you use to get your frames isn't distorting them, or skipping frames. I use MPV player.

Make sure your gif size is correct when you crop it, if you're posting it somewhere). For example, if you're making a single gif on a row, Tumblr's optimum width is 540px. If you make it 500px, or 550px or whatever, it's going to look super crunchy and weird after you post it, so stick to their sizes.

We're gonna begin at this page (if you need a tutorial on how to get here, let me know, but I'm assuming you know!)

First, make sure your gif is a smart object! If your gif isn't a smart object, you won't be able to apply the smart filters. If it is, you'll see this symbol next to it. To convert all your layers to a smart object, select them all, right-click, and select "convert to smart object."

Next, duplicate your gif layer so you have two. Hide the top layer and select the bottom layer. Your layers should look like this:

Remember we're working on the bottom layer first! Go to Filter > Sharpen > Smart Sharpen. Use these settings, depending on what looks best for your gif/video quality:

The radius can be set to 0.2px to 0.5px depending on your quality/preference. You can also choose to remove Lens Blur instead of Gaussian Blur but these are my preferred settings. (I don't do anything with the Shadows and Highlights section)

Next, do another Smart Sharpen, but this time, use these settings:

(a popular choice for this second smart sharpen is 10%-10px, but I like the clarity 20% gives just a little bit more.)

This is what my layers look like right now:

And this is what my gif looks like. I removed the sharpening from the right side of the image, and while it's not super obvious like this, I think you can see the difference best in Buck's eyes. The eye on our left has much more detail and depth, while the one on our right isn't as clear:

You can stop right here if you want to, if you're happy with the way your gif looks. However, my preference is always to soften the crisp edges just a little so it doesn't look over-sharp, and also give it some clarity, which is where that second layer comes in.

Select that top layer and un-hide it. Remember that there are no filters on this layer so far. Go to Filters > Blur > Gaussian Blur. Choose a radius of 0.4-0.7px, and click enter. The gif will look like this:

Next, change the opacity of this top layer to 20-25%. You should have your sharpened gif back, but it will look just a little softer and less harsh along the edges. You can change this opacity depending on your scene, so it's really like a slider you can control to go back and forth.

Your layers will look like this:

Then, one more optional step that I like to do is add a noise layer. This seems counter-intuitive, but when you have big blocks of color, the noise helps disperse them just a little bit.

Go to Filter > Noise > Add Noise. Use these settings:

Then, in your Layers pane, right-click where it says Add Noise, and in the menu, click Edit Smart Filter Blending Options. You should get this dialogue box, where you can change the opacity of that filter to 50%.

I know it kind of seems like "what's the point?" when this particular layer is already low-opacity, but it does make a difference (to me, at least) in some gifs where there's a lot of color/light, especially after you color the gif in!

This is what your layers should look like:

And this is what my gif looks like after I run it through the frame animation, all sharpened!

Here it is colored the way I color my gifs xD (and also slightly slowed down):

And here it is in black and white (I love black and white, too xD):

I hope this helps, Nonnie! Feel free to drop me an ask if something here doesn't make sense.

Last tips:

Don't be afraid to play around with multiple settings until you find the one that works best for you.

Make. An. Action. I can't tell you how much actions save time when I'm working because then I don't have to remember every last detail. The first few times, just get in practice of doing it yourself, but after that, actions are amazing. Some people on tumblr have actions you can download and use, too.

Different scenes/lighting will result in different outcomes of your sharpening, so you might have to play around with it. Sometimes, I add an extra Smart Sharpen layer to that bottom layer to help clarify some of the details, and other times, I just change the existing settings to fit the scenes.

Sharpening tends to be a personal preference thing, so just play around with all the settings until you find one that works best for you.

Few tips before you start:

Adjust everything little by little to prevent extreme changes/washed out gifs.

Don't worry if one adjustment layer makes the other ones look bad. You can always go back and keep adjusting.

Trust the process! The gifs will look different at every stage, as you'll see here, but as we go, they'll turn into properly-colored ones.

A lot of coloring - especially with skin color - is trial and error. Some scenes are inevitably going to be better than others.

Sometimes, it helps to have a few references of the actor/character in good lighting (preferably images of actors, because they won't have the horrible TV filters) so you can refer to that.

Keep in mind that the lighting of the scene (aka, if they're outside, or if they're in a dark room) will affect how they look in your final gif.

First, start with your gif cropped and sharpened (if you need a tutorial, here is my sharpening one!). Fair warning, I'm new to this, and I don't know the super-technical terms so hopefully this makes sense xD.

I'm working in timeline here, and this is what my starting page looks like. Those adjustment icons below the color wheel is what we'll be using:

Here's a small guide if you don't know which icon is which. You can also get these names by hovering over each icon:

My first adjustment layer is always an Exposure layer. This is a pretty bright scene, so we won't need to do too much exposure, but we do need something:

Alternatively, you can use the three droppers over there. I sometimes use the white one (first one on the right) to click on certain white spots to brighten the image automatically, but it doesn't work for all scenes. I prefer manual!

Next, we'll add a Levels layer. I use that middle slider to lighten up the scene, since sharpening and resizing tend to darken the scene.

Then the black slider to put some shadows back into the image. (be careful with this, because it's very easy to make it too dark.

NOTE: some people use Curves to do the work of the exposure and levels layers, but I don't like curves too much. I can make a tutorial on how to use it if you need it, but for now, this is what we'll be going on.

Next, we'll add a Photo Filter layer to get rid of that yellow. Here is where you have to start experimenting with what works best for you.

Photo Filter will have all these options to use:

I usually use any of the three cooling layers to get rid of most - if not all - of the yellow of a scene. The one I use most is Cooling Filter (80). The default is 25%, but depending on your scene, you'll want to adjust things accordingly:

A good rule of thumb is to focus on a part of an image that you already know the color of. For example, this wall is clearly white, not yellow. If the wall looks too blue, then I've done too much of the filter, and need to tone it down. With photo filter, 10-15% works for most scenes, but this scene was super yellow for some reason.

Just for a comparison, here's where we're at right now, with only the photo filter removed (see how he looks more minion on the left side of his face? Photo Filter is a gift xD):

Now, we'll use a Selective Color layer for two things: to remove some of the reddish undertone from his skin, and to add shadows back in.

First, hit the dropdown for Colors and select Red. To remove the reddish undertones, we'll add some cyan to the reds. Here, you really have to play around with things until it looks good. That means adjusting the sliders in a lot of different ways.

(Don't worry about how ashy and "blue" he looks, we'll fix that later)

Next, to add shadows back into it, hit the colors dropdown, and select Black. Here, I move the black slider to add back a few of the shadows. Usually, +3 or +5 are good enough. I've added +13 just because it's what I personally want out of this gif.

(By the way, you can do this on two separate selective-color adjustment layers. I just prefer to do it all on one.)

Next, (this is usually my last adjustment layer) we'll add a Vibrance layer. I do this layer just because I like to add a little bit of warmth back into the gif. The same thing can be achieved with another Photo Filter layer, I just like the pop of color I get with the vibrance layer.

And that's all! Here's what the final gif looks like:

Skin-color tips and other last tips:

For this gif, I didn't really need to go back to adjust the previous layers (for example, to remove more red or something), but sometimes, you have to keep playing around with it.

Some scenes have them very red, and sometimes, removing yellow by adding blue to a layer will make a gif look more red - in cases like these, using a color balance layer helps on top of the photo filter. Adjust midtones and highlights to have more cyan to remove the redness.

For darker skin-tones, I find that removing all the red will take all the warmth out of the skin? You have to be more careful then, to not completely change the undertones. Just remove the excess reds that come from the filters/film/lighting. (I can try to make a tutorial with a dark-skinned character if you'd like.)

An unavoidable part of adding adjustment layers is that it will decrease your quality just a lil bit - not enough to be noticeable, but just so you're aware in case that's a thing for you.

Sometimes, if you're going to gif a scene multiple times, it helps to just make note of the settings you're using somewhere so you don't necessarily have to start from scratch.

It also helps to step away from the gif for a bit and then come back to view it with new eyes. This is because you can get desensitized to all the changes, and I often find myself picking up errors in my coloring when I do this.

Gifs look different on different devices! Just a thing to keep in mind.

I hope this helps, and it wasn't too confusing! A lot of this tends to be practice, so just keep on trying. I usually try giffing multiple types of media for practice (i.e. multiple shows/movies - that's why there are so many Bollywood gifs on my blog!).