Tutorial for overlapping gifs

mirkwoodling:

Tutorial: How to make gifs that are overlapping like here, here and here

First you need to make TWO gifs and make sure that they’re both open. NOTE: They need to have the same number of frames and be the same dimension.

1. On the first gif, go to the animation bar, click the button (see pic below) and click ‘select all frames’. Then click the button again and press ‘copy frames’.

image

2. Next go to your second gif. From that same button on the animation bar, click ‘select all frames’ and then click ‘paste frames’.

3. A window (see below) will pop up and you will need to use these settings:

image

Note: You’re now done with actually getting both gifs on the same document, although they won’t both be visible yet. You can now close the other document (make sure you keep the one open that you just copied your frames to).

5. This step might be a little difficult to explain. When you look through your layers panel, you should see that you have the frames from the first gif and the frames from the second gif. You need to put the frames for the first gif in one group. To do this just highlight all of the frames for the first gif and hit Ctrl + G. Do the same with the frames for the second gif.

At this point you should have two groups, in your layers panel. The first group should have frames for the first gif and the second group should have frames for the second gif.

 
6. Now the problem is that you can’t see both of the gifs, because one is completely on top of the other. You can use TWO methods to get them both to be visible. You can either use a blend mode, e.g. ‘Lighten’ OR you can use layer masks. You can even use a combination of both, as I tend to do

OPTION 1: Using a blend mode

Click on a group (it doesn’t really matter which one) and in the layers panel there should be a drop down box next to the opacity. You can play around with these, but I usually use screen, overlay or lighten. (I think lighten is the best one to use)

image

 By selecting lighten, my gif went from:

image

OPTION 2: Using a layer mask

(I usually use a layer mask if the ‘lighten’ option is not giving me a good result).

Layer masks will allow you to erase certain parts of the frame, without actually making any changes to the original image. So if you make a mistake, it’s easy to correct later on. Click the group that you want to erase, and click on the layer mask button (at the bottom of the layers panel)

image

In my case, I wanted to erase parts of the water (highlighted in red below) so that I could see more of the horse. The parts of the water were from my SECOND gif - with arwen, so I put my layer mask on my second group.

image


Then you need to SELECT the layer mask but clicking on it. This is really important, otherwise you won’t be able to make any changes.

image

When painting in a layer mask: a black brush will erase things and a white brush will show it again.

I want to erase parts so, I took a black brush. I recommend using a REALLY soft brush, and making the opacity of the brush low. I usually use these settings

image

Then, just simply use the brush and paint black onto the bits that you want the gif to disappear. So, in my case, I painted over parts of the water with a black brush, so that the gif behind it was more visible.

This is before and after I used a layer mask:

image

I actually think my gif looks terrible with the layer mask, but idk I just did it as an example.

My finished product:

image

Now you can save the gif and you’re done :D

If you need any help please just inbox me :)

Other examples:

here, here and here

  1. thorinsbeard reblogged this from chaoticresources
  2. deansmusk reblogged this from itsphotoshop
  3. promisemened reblogged this from rivailleackerman
  4. shoppingphotos reblogged this from itsphotoshop
  5. openstorybooks reblogged this from itsphotoshop
  6. napimve2 reblogged this from mirkwoodling
  7. marcusdeitylegacy reblogged this from astrologicallyinsane
  8. astrologicallyinsane reblogged this from cocarp
  9. vanityshewrote reblogged this from theravenisthewriter
Here you will find resources & tutorials that you may need for your daily survival at PS. Don't hesitate to ask & request.
DISCLAIMER: All the content featured on this blog was reblogged, unless stated. Credit goes to their respective owners. No copyright infrigment intended.