I'm trying to stack 1, 2, 3, 4 images through some online tools, but they don't seem to do support a function to make it work. The third one is a PNG image, the other ones are GIF images.

So they have to be one above the other, in order. How can I do it?

  • Hi Leon! What do you mean "stack?" What exactly are you trying to achieve?
    – Rykara
    Jan 12 at 21:27
  • @Rykara I mean I want to merge first with second gif, this below the first and so on, in order.
    – Leon
    Jan 12 at 21:29
  • Ah, so you mean not in terms of layers but in terms in sequence like down a page. They're animated GIFs, so is this going on a web page?
    – Rykara
    Jan 12 at 21:31
  • @Rykara yes, but not mine. I need to display everything into a single gif, with those animations.
    – Leon
    Jan 12 at 21:33

The BEST way

Plug each image into a page together with the correct html and css coding. They won't be one single image, but this is the simplest and most flexible way to do it.

The Hard way

If you want to combine each animated GIF into one, tall single image, you've got your work cut out for you. How I would approach it:

I don't know how many frames there are for each GIF. It's likely that each one could have a different number of animation frames and possibly even different timing.

You need each "frame" of each animated GIF as a standalone image. You can extract these using Photoshop and save them individually. So what you'll end up with is a collection of frames for each component piece. If you letter the component images from top to bottom, that might look Something like:

A1.gif, A2.gif, A3.gif ...

B1.gif, B2.gif, B3.gif ...

and so on for C and D.

Then (assuming all the images are the same width) you need the height of each component image. These you would add together to figure out the height of the composite animated GIF.

I would snap guidelines at the places where the different frames will stack to make it easier to place them. Then, you will need to figure out the timing of each frame. If the longest GIF is 18 frames (or whatever), this becomes the length of your composite animated GIF.

If you're lucky, all the other components have the same number of frames. If you're unlucky, they don't.

If you're lucky

If all the component images have the same number of frames and same timing, you'd create a bunch of layer groups for each new composite frames. These are the little folders in Photoshop's layers pallet. All the "1" frames would go in the first. All the "2" frames would go in the second, etc. and you'd stack them from 1 through the last composite frame group.

That is, the group folders would go from 1 through 18 so that layer group 1 was on top. You'd open up the animated GIF interface of Photoshop and, for each composite frame, you'd specify the timing of the fame and then create the next frame. At that point, you'd turn off the previous frame's visibility, revealing the next layer down, and so on until you got to the last group of frames.

Export to GIF and you're done.

If you're unlucky

If you're unlucky and the component animated GIFs have different amounts of frames and/or their timings are different, you need to figure out add/drop frames and your composite animated GIF gets much more complicated.

Say, for example that:

  • GIF #1 is 20 frames long and each of its frames lasts .1 second so that it lasts a total of 2 seconds.

  • GIF #2 is 18 frames long and each of its frames lasts .1 second so that it lasts 1.8 seconds.

You need to add a duplicate of 2 frames of GIF #2 so that it ends up the same length as GIF #1. It will not look as smooth in the new composite GIF as it did individually because of the added frames, but there's no way around that.

Another thing that might happen is not only will the number of frames be different between GIFs, but their timing might also be different. For example:

  • GIF #1 is 20 frames long and each of its frames lasts .1 second so that it lasts a total of 2 seconds.

  • GIF #2 is 18 frames long and each of its frames lasts .125 seconds so that it lasts 1.875 seconds.

In this case, you need 2 more frames to match the 20 frames of GIF 1. What's more, the timing of the GIF will be pegged to the timing of GIF #1 which means that the 18 frames will play at a rate of .1 seconds/frame instead of .125. This means it will play "faster" than it did before.

You could do the opposite, of course, and set the composite image to the timing of GIF #2. This would mean that GIF#1 would appear to speed up compared to how it looked when it was by itself.

Or you could have one component GIF just repeat that last frame until all the others were done, making it look like it was paused until the whole thing restarted.

It's a nightmare, honestly.

So, again, the BEST way would be to just combine them together as individual GIFs using HTML and CSS on the web page they're going to be displayed on. This would have the added advantage of making each individual GIF faster to download and play so that all of them didn't have to wait for everything to download before playing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.