#gif overlay tutorial

1. Finish editing your image and adding your psd. We want to put the overlay over the psd, that way the white stands out. Here I have edited this picture and I will soon be adding an overlay:

2. Find an overlay gif.

Here is a blog of some: https://overlaygifs.tumblr.com.

octomoosey has posted some gif overlays before, and you can go through their tag to check them out.

library-mermaid has made some as well: 1, 2.

You can also search "gif overlay" on Tumblr and see if you can find any, or go through the tag.

Find the one you like and download it.

I'll be using one from one of library-mermaid's posts.

3. Open the gif in Photoshop and open the timeline (Window>Timelime or Window>Animation). The frame animation should be on.

Example (it should look something like this):

4. Go to the corner of the timeline and click the settings arrow, and then click "Select All Frames."

5. Once the frames are selected, click the settings arrow again, and select "Convert to Timeline."

It will now look something like this:

6. In the Photoshop menu, go to Select and click "Select All Layers."

7. Once the layers are selected, right-click on one of them, and select "Convert to Smart Object."

It will place all the layers into one, like this:

8. Drag the gif over to your edit document.

***Make sure to place the gif layer above all the other layers from the edit, like so:

9. Put the gif layer mode to "Screen" or "Lighten."

It doesn't matter which, but I think people use Screen mode more because it picks up more of the gif. But for certain things, Lighten mode looks better. It is up to you.

It will now look something like this:

10. If your gif doesn't fit like mine clearly doesn't, select the gif layer, click the select tool, right-click on the document, and select "Free Transform" to make the gif bigger.

If it ends up blurry, sharpen it by going to Filter>Sharpen>Smart Sharpen.

Now it fits:

11. Now, before saving it, make sure the timeline duration is in sync to the gif.

As you can see below, the timeline duration ends way after the gif. You don't want that because the overlay will stop for a long period of time.

Drag the end point to where the gif ends.

12. Finally, go to File>Save for Web & Devices, and save it.

***Make sure the looping option is on "Forever" and I recommend setting the Gif to "Adaption" and "Pattern"!!

Here is my final result:

OTHER INFO / TUTORIALS:

Sometimes the background of gif overlay isn't entirely black, so it'll end up looking like this:

It will have a white background and it won't look right. If this happens, add a Selective Color adjustment.

Go to Layer > New Adjustment Layer > Selective Color.

On the adjustment, switch the color to black. Add some to the "Black" section to darken the background.

Here I added 26% more to the black:

Now it is just the overlay with no white background: 

For this, I used this gif.

Another obstacle you might run into is the overlay might not be white or grey.

Here mine is light pink, but I don't want that:

If that happens and you want it to be black and white, go to Layer > New Adjustment Layer > Gradient Map.

On the adjustment, click the arrow to choose and black and white gradient.

Place that into a clipping mask, so that it only makes that layer black and white, not the rest. (right-click on the adjustment and select "create clipping mask.")

It is now black and white:

For this, I used this gif.

But what if you want to change it to a different color?

Go to Layer > New Fill Layer > Solid Color.

Upon the pop-up box, set the mode to "Multiply" and click OK.

Now choose a color you want it to be. (Btw, it's going to temporarily change the entire thing to that color, but we'll fix that in a second.)

I chose cyan, but click OK when you're done.

Now it's gonna look something like this:

To fix it, make sure the color layer is right above the gradient layer, right-click on the color layer, and select "Create Clipping Mask" to put it inside the gif only.

Now it should color the gif overlay only.

That’s all there is to it!

I hope you found this helpful and plan on using it. If you need any further help, just send me a message!

For this gif, you'll need to work with two psd files: one of your silhouette layer, and one of your ‘base’ layer.

STEP 1 is your silhouette. I used a neat animation from the CATWS credits. 

Basic gif creation: load layers, convert to frame animation, convert to smart object. The usual drill.

Editing the gif: Thankfully in this gif I only want to edit out his name. In other gifs this might require more work, such as editing frame by frame 😬

- I’d also recommend an adjustment of brightness/contrast set at 100+/100+ to have a complete black+white silhouette. I left mine with an off-white colour rather than #FFFFFFF, but as long as it’s an image of only two contrasting colours.

Flatten the gif: After all your editing etc, you’ll want the entire image to be made into a single layer - this makes things easier later on, instead of having multiple layers in a folder.

- Select: all layers, then Filter: convert for smart filters all the adjustment layers etc are gone, and you’re left with a single smart object layer of your silhouette animation 

STEP 2: Now I’m going to work on the base layer, which is the clip of the Valkyrie jet flying through the clouds

Basic gif creation: load layers etc and get your smart object

Editing for adjustments: I have a simple curves, photo filter, and a rather strong colour balance adjustment to aim for the colour theme of my gifset, which is yellow. The more this gif comprises of a single colour, the more colour contrast the end result will be. A base gif that is very greyscale will end up looking equally as greyscale with the overlay, while a richly coloured gif will look very vibrant. If you’re unsure about this, wait til you add the silhouette overlay and experiment later. 

STEP 3: With the base layer done, I will now begin to overlay with the silhouette.

Duplicate the silhouette single layer from the first psd to your base psd

Change the blending of the silhouette layer to EXCLUSION. Difference works too I think? This gives the colour contrast with the black and the white.

Trim and adjust the size/timing/etc to your liking. It’s important you trim the gif so that both the base and the silhouette gif are both visible in the timeframe. In the screencap below, the silhouette is shorter than the base gif so I’ve trimmed the gif to fit it all in.

9. Adjustments on top of the overlay gif layer: This is all to enhance the contrast between the base gif and the silhouette. I used adjustment layers of brightness/contrast, hue/saturation, vibrance and selective colour. My aim was for similar hues to the other colours of the entire gifset. You can also experiment with the first group adjustments.

10. Add text:  - I wanted a font similar to the original credits text, so I chose Acumin Variable Concept, Extra condensed semibold, and eyedropped a colour from the gif

- The text layer blending is set to Colour Dodge (Screen works too, but I preferred the textures of Colour Dodge) - I placed the text layer under the second adjustment layers.. Idk it looked nice.

- I also wanted a fade in similar to the original, so I dragged a fade to the text layer. I had to go back and forth to make sure it lined up nicely with the entire animation.

11. Export for web / save gif - my final file dimensions are 540x360 pixels and 119 frames - GIF settings at adaptive + diffusion, and I cheated with dither 99% (I figured it's a silhouette animation so mehhhhhh I can get away with it) + bicubic smoother quality - I ended up with 9.563mb

Disclaimer: I’m no pro at editing and I’m still learning and experimenting, I honestly don’t know wtf I’m doing in Photoshop most of the time! I just mash away until something works 😂

Honestly, the best advice I can give to you before you start doing all the hard gif work is to look for specific scenes and test them out (this best works if you have one relatively dark scene and another where someone or something is in white background). I often take screenshots of the scenes I want and try them out before making screencaps and actual animation. So, for this one, I saw a scene of Tissaia standing in a bright field and I knew I could work with it. I made my base gif:

However, I needed to make Tissaia darker and the background brighter. I started off by adding a basic coloring, a grayscale layer (you can do it through  Layer > New Adjustment Layer > Hue/Saturation (or Black & White). I personally just slapped a solid color layer (white) through Layer > New Fill Layer > Solid Color and set it to Color blending mode. Then, the most important tool in bringing out and adjusting the contrast to extreme ends is Curves (Layer > New Adjustment Layer > Curves). Mine looked like this, but you have to play around depending on your scene:

At this point, your scene should be in Black & White and highly contrasted. Mine looked like this:

I left it at that and started working on the scene I’d be overlaying, which should be dark. Battle of Sodden Hill had plenty of dark scenes, but in the end, I decided to go with the one where Tissaia and Yen are collapsing to the ground. I made the gif and applied a base coloring:

I then put a solid color layer (I chose red, but you can play around with other colors) and set it to Multiply blending mode). It then looked like this:

The next part is a bit tricky unless you know how to make basic overlay gifs, but I’ll try my best to explain. I use the olde CS6 so I work with Timeline animation but I think the newer ones have similar options. You pick the frames of the second gif, click the little drop-down at the top-right corner and select Copy Frames like this:

Then, go back to your original gif, select all the gif frames in the timeline, click on the same drop-down and select Paste Frames, then Paste Over Selection:

I then put the Layers of both gifs into their own Layer Groups (just select one of the gifs with its coloring layers and click Ctrl+G). You can rename them to make it easier to navigate. I set my second gif group to Lighten blending mode (Screen also works for overlays like this).

And that makes the two gifs overlay like this:

Step 1: CHOOSE YOUR OVERLAY

There are several gif overlays available on tumblr as well as elsewhere (free gif sites like giphy, imgur and gifer are great too.)

For this set, I used this gif. (I personally look for overlays based on what my set is about, and since this one was about turning points, so, well, a turning gif :P). This is what I’m going to call the overlay gif from now.

A few things to keep in mind while choosing:

Whether it is black and white. It is always better to choose a b&w overlay for this kind of edit (I will explain why in later steps), but don’t worry if it’s not, you can turn them b&w quite easily by using a few selective colour layers.

Whether it is a looping gif. This one is not hard and fast like the previous one, you can choose either a gif overlay that repeats itself continuously (like the one used here) or one with linear progress (like in this set). Just make sure you have got the right one before getting into the whole process.

Step 2: MAKE YOUR BACKGROUND GIF

As you can tell, we need to make two separate gifs before merging them. It’s preferable to make the background gif first, since this is the one whose positioning we have to keep an eye on. 

My background gifs are of the size 540x400, but you may of course make them bigger (smaller too, but that might not leave much room for your overlay gif). Now, it’s important to see that your background is not getting totally hidden by your foreground gif, and considering that the foreground will be taking a lot of space, it’s preferable to choose zoomed out scenes as your background gifs (or, if zoomed in, with the subject in the corners).

For the backgrounds in this set, my focus was on their powers and so I placed them accordingly.

As for colouring the background, I had decided early on to keep the colour restricted to the foreground only as the overlay covered a large part of the gif. You can of course choose to have a coloured background too, especially if your overlay is not as big.

This is my background gif from now:

Step 3: MAKE YOUR FOREGROUND GIF

So far so good, now comes the gif that will go in the overlay. Since my overlay is an expanding circle of 540x400, I kept the same dimensions for my gif. (You can make it any size that suits you, but just be careful to keep the dimensions according to your overlay gif!)

This is my gif after colouring:

(If you want the basics on colouring backgrounds of gifs, you can check out @yenvengerberg‘s wonderful colouring tutorial, it’s very comprehensive!)

Step 4: PLACE YOUR OVERLAY

Now comes the fun part! Open your overlay gif in Photoshop, and convert it to video timeline mode.

Then select all layers (Ctrl+Alt+A) and right click -> convert to smart object.

Next, open your foreground gif (in side by side tabs) and follow the same steps (convert to video timeline -> select all layers -> convert to smart object). Here’s what it looks like now:

Now, go back to the overlay gif, copy the gif layer, and paste it on top of the foreground gif layer, like so:

You may find a slight disparity in the size and positioning of the two gifs, if they are not of the exact same dimensions. You’ll need to click Ctrl+T (with the overlay layer selected) to adjust these.

And this is what it looks like now:

Set the blending mode of this layer to Darken (which basically displays the darker of the two layers, i.e. the white is hidden and the black dominates), and voila:

If you play the gif now, you will find them moving together. But there’s one small problem, the length of the overlay is much shorter than the main gif. Since the overlay is a looping gif, this is easily fixed. Duplicate your overlay layer, and drag it to the position where the original layer ends, like so:

Again, even the duplicated layer doesn’t cover the entire length of the main gif. So we need to duplicate it one more time, and trim the end of the new layer as necessary.

And we have our completed gif, which I’ll be calling my foreground gif from now:

Step 5: MERGE YOUR FOREGROUND AND BACKGROUND

Time for the final step. Open your background gif and the final foreground gif in new tabs. Follow the steps to convert each of them to smart objects (convert to video timeline -> select all layers -> convert to smart object). Copy the foreground gif layer onto the background gif, and you get this:

[Side note: The lengths of both the gifs should be equal, i.e. they should be ending at the exact same point in the timeline.]

Click Ctrl+T and resize and reposition where you want the foreground gif to be.

Now, if you play the gif, this is what you get:

We’re almost done! But we still need to remove the black square edges.

Open your overlay gif again, convert it to smart object and copy the gif layer onto the main gif. Place it between the background and the foreground gifs, like so:

Reposition and resize with Ctrl+T, so that it matches the foreground gif exactly. The properties tab will come in handy for this, as it will show you the size and position of your foreground gif and you can transform your overlay accordingly.

This is what they look like after matching up:

Now, with the overlay gif selected, click Image -> Adjustments -> Invert, and this happens:

Set the blending mode of the overlay gif to Darken, and you get:

Next, set the blending mode of the foreground gif to Lighten (which hides the black part and displays the white and lighter parts. This is why a b&w overlay is important to make Lighten and Darken work perfectly), and we’re done:

If you play it, you’ll see we have got the effect we want! All that’s left is to duplicate the overlay gif layer so that it covers the whole length of the gif, as we did in step 4. We need to duplicate it twice again, and reposition the duplicated layers to the original’s position. You can use the properties tab to do this again, simply look at the X and Y position of the original layer and input the values in the properties of the duplicated layers:

And finally, after adding text (I’m not including that part so that this doesn’t become too long, but if you need help with the curved text, let me know!), this is our completed gif:

Here are some good resources around tumblr to find overlay gifs: @octomoosey @overlaygifs  @bowiescoffee​ @bicepsie (You can surely find more by just searching “gif overlays”.)

You can experiment in a lot of ways with this method too. Here is another example of a gif made using this method, this time with this non-looping overlay gif:

1. The base

The process is very similar for each of the 3 gifs. First, you need to pick which scene will the base of your gif. You can crop your gif the way you want but keep in mind that you need space somewhere to put a second scene! Try not to pick busy shots because those will be harder to work with. Negative space and plain background are your best friends! The tricky part is that the other scene you will add on top of the base gif will only be nicely blended if it's put on a very dark or a very light area. Below are the shots I've chosen to be my base and, as you will notice, there is negative space around the main subject. Those dark areas will be where I'll add my new layers later.

Vincenzo's shoulder on the first gif makes a perfect area for blending layers because it is not only black but also is very plain! Chayoung's face adds a lot of contrast against this dark space

On the 2nd gif, there isn't a lot of space around her but there's enough on the right for what I have in mind so it's fine

Same with the 3rd gif. I cropped it so her face would be on the left, which leaves a bit of space on the right to add my new layers later

Our base gifs aren't done yet, we have to make the background cleaner so our blending results will look better. I will pick black because the background colors of the scenes I've selected are closer to black than white. However, if you're doing this with brighter shots, you should use white or any bright color! Add a new layer, select the brush tool (make sure it's set as a soft brush) and paint on top of the area you'll add your blended layers later.

This isn't a mandatory step but, in most cases, it is very useful! As an exemple, my 2nd gif needed it. As you can see on the previous picture, Chayoung is standing outside and the street lights are visible behind her on the right. Because this is where I will insert Vincenzo later, I need to clean up this area to end up with a plain and dark background. Here's the result after I added soft brush layers:

You can color your base gif now if you want to or do it later, it's up to you!

2. Blending

You're done with your base layer, which means it's now time to work on the gif you'll be blending! Finding the right scenes to blend is the hardest part of the process and you'll probably need to try this several times before you feel satisfied with your result. Don't feel bad about it, I'm also struggling and it's ok! It takes some practice to understand how blending works so be patient!

Put your gifs on the same file

Before blending our gifs together, we need to have them both on the same file. First, just open the gif you've selected to be blended and make sure you're working with timeline and not layers for all of your gifs (here's where to convert to timeline if you need help). Select all the layers from your future blended gif and put them all in one folder. Now, they are ready to join the base gif! Just select the folder and drag it to your base gif. Place it roughly where you want it to be and resize it if it needs to be.

Now that you have both gifs on the same file, you may need to adjust the length of your gif. Indeed, it is very likely that your base gif and your blended gif don't have the same number of frames, which means that one of your gif may run longer than the other. This is what happened with the first gif of my gifset. As you can see on the timeline below, the gif I wanted to blend was shorter than my base gif.

To fix this, just clic on the right handle on top of the timeline and slide it where your shorter gif ends. Your final gif will now end when the shortest gif ends!

Blending mode

It's now time to change the folder's blending mode! Since I'm making dark gifs, I will be selecting the folder and setting its blending mode to lighten. Below is the before and after of my middle gif. You can try using different blending modes as the result will be really different from one gif to another. Sometimes, screen gives a nice result as well. However, if you're working with light backgrounds, lighten will not work at all and you'll have to set it as darken instead. I really suggest you to experiment with different modes and colors to understand how it works!

Here, changing the blending mode helps making a smooth transition between Chayoung and Vincenzo but it's not enough for the rest of the gif because the edges of Vincenzo's gif are still visible, as well as the lights in the background. It's fine, let's just apply a layer mask!

Layer mask

To use a layer mask, make sure you've selected the folder you've set the blending mode to lighten and click on this icon. The layer mask will help us hide what we don't want to show! Select the eraser and make it as soft as possible. Now, erase the parts you want to hide. Don't worry, it won't actually erase your layers, it will simply hide those parts! If you erased too much, just pick the brush tool and paint on top of the areas you want to be visible.

Here's my result. Looks better, right?

I'm almost done with the blending process of this gif but I feel like Vincenzo's part needs more contrasts... When you're blending gifs, contrasts are important because they can drastically change your result. I haven't applied any coloring layer to Vincenzo's gif yet so I will increase the blacks and whites using a levels layer. But... if I create a new layer, it will also apply to Chayoung, right? So how do we do? It's actually simple: we will be creating a clipping mask!

Clipping mask

I need to add a levels layer so this is what I will be clipping but the clipping mask technique can be used with any kind of layer! I create a levels layer and make sure this layer is placed right above the blended folder. Then, we right-click on it and select "create clipping mask". It's done! Now, the layer will only apply for what is inside the folder (it doesn't have to be a folder, you can also clip a layer to another layer).

You're done with blending!

You're now free to color your gif the way you want! Remember you can create clipping masks if you need to color the scenes separately. Here's my final result:

I've used to same blending process for the other gifs as well. You can blend as many scenes as you want. For instance, I've used 3 different scenes for the last gif but the process was the same!

My final step was to add the quote on each gif. The main font I've used is Blastrick (which isn't a free font but I was able to get it for free a while ago when it was part of Creative Market's weekly free goods). I've used Algerian for the word "mine" on the last gif and I believe this font was actually pre-installed in Windows so you might have it too on your computer!

today, i will be using photoshop cc 2019 to combine this picture and this gif overlay which i found here.

first things first, open photoshop and use ctrl + o (or file > open) to select an image from your files. it will then go to something like this.

you will need to see layers and timeline for this tutorial, so select window at the very top, and it will display a list of windows which you can choose to open. select layers and timeline. on timeline, click create video timeline and press the three small squares in the bottom left corner. your page will now look something like this.

next thing to do is to open the gif in a separate window. 

go to the end of the timeline to see how many frames it is. you will need to make this amount of frames in the main picture. also, something to note - in the gif i use, the time does not matter. however, if the bottom says 0.9 or something like that, please put that in your picture. this can be done by pressing the arrow done and applying the appropriate time. in here, i use 0.00 seconds. the default is 5 seconds, so please make sure you change it if you want a smooth gif.

anyway, to make the right amount of frames in the main picture, click the three horizontal lines on the top right hand side which will come up with a few options for paste frames. please select paste after selection, and do not select link added layers. 

you will now have two frames. you can keep doing this until you have fifty frames, or you can press the three horizontal lines again and select select all then copy frames. normally what i do is make ten frames from groups of two, then replicate those ten frames to fit the number of frames required.

when you have the amount of frames required, go to the gif overlay tab, click the three horizontal lines, select all and copy frames. once you have copied them, go back to the main pictures, click the three horizontal lines and select all frames. make sure you select all frames before pasting them!! 

after you have selected all frames, select paste frames and then change it to paste over selection. your photoshop will look something like this.

as you can see, there are two problems here. firstly, the gif is way too small. secondly, as it is black, you cannot see the background behind it. this will all be fixed in due time, but let’s fix the first problem first.

firstly, to make it all just a lot easier for you, group the layers now. this can be done using ctrl + g or layer > group layers. 

secondly, to make the gif bigger use ctrl + t to free transform the gif. drag it out to enlargen it and adjust it how you like. do not worry if it is pixelated as it will be clearer when you let go of the free transform.

as you can see, it is now big enough to fit the entire picture. unfortunately, you can no longer see the picture now. do not worry! this is easily fixed. just go to the layers tab and go to the very top where it says pass through. you can change it to lighten or screen to see the gif by selecting it.

and voila! you have overlayed a gif!!

although you are technically done, i would recommend colouring the gif to make the gif really jump out. you can do this by going to windows > adjustments.

i thought about doing a colouring tutorial, but you know what? it is so much better exploring all the adjustments on photoshop by yourself, without a tutorial. when learning how to colour a gif, i went through so many colouring tutorials and i didn’t get anything from them. in the end, really, the best person to make all the adjustments is you. in terms of what to use, i would recommend adjusting brightness, curves, vibrance, levels, colour balance and selective colour but honestly? just play around with it. some pictures are better vibrant. sometimes, having more toned down colours is the best. in all honesty, when i’m adjusting colours, i have no idea what the hell i’m doing - i’m just dragging the controls back and forth and seeing how that looks on the picture. trust me, it’s a lot more fun this way than copying the controls of someone on tumblr. that can get incredibly tiresome and boring, and it probably wouldn’t look as good as the example provided as you are using a completely different image with different colours. if you want me to share the colours i used for the gif i will, but i would not recommend copying it.

to save your gif, go to file > export > save for web (legacy). these are the adjustments i use. 

and after that, you’re done! here is my completed image -

don’t beat yourself up if it doesn’t look as good as you hoped for! just have fun, and keep doing what you’re doing!!

this tutorial, you’ll need access to photoshop preferably a recent one. an image and gif overlay like the one i going to be using you can find either on google or you can make it yourself by finding a video of falling stars or snow and make it into a gif 

the first step is to create a new document (i am using the sizing of 640x360px as my canvas but it will work on any size of the image)

the second step is your canvas / choosing your image i am going to be using a picture of jason momoa as arthur curry in the justice league

the third step is to put your psd on your image and to click on the create video timeline  i’ll be using a bw psd for my image at the bottom of your timeline it should give the option to create video timeline or create frame animation click on create video timeline and it should look like the last image in this section

the fourth step is to make sure your image/psd are the same lengths on the timeline you can click the layer to scroll it back or forward to make it shorter or longer as long as they are the same length

the fifth step is your gif overlay 

you can search google or wherever to get a gif overlay as long as it is a .gif file or you could make your own by finding a video of whichever gif overlay you want i used shutterstock to find mine and made it into a gif to which i am using here.

the next part is to drag the gif overlay layers over to your image canvas like so

now again the layers on the timeline all have to be the same length preferably the length of your gif overlay image the sixth step is to make the gif overlay on your image  you will want to make sure the gif overlay layers are under your image layer 

now you want to set your image file to screen! like in the image above so that you can see the gif overlay on your actual image now it will look like this 

and with the psd, it will look like this 

the seventh and final step is saving it  to make sure you save it as a .gif file you go to file > export > save for web (now you want to make sure you’re saving as a gif) it’ll say at the top and then press preview at the corner and it will appear in your web browser right click and save as