Making a GIF banner in Photoshop

Arts & Media Visual Arts & Design
1

Hey guys.

I'm making a banner for a website, and I've made the banner shape, but it has three sections divided by white lines. I need to fit a GIF into each section, and end up with thee GIFs next to each other separated by white lines.

Here is my banner shape.

Untitled-1.png960x320 8.83 KB

Any ideas?

2

any ideas on what?

3



https://forum.teksyndicate.com/uploads/default/5633/25ed84de605dd8d7.gif

You gave no specifics on what you wanted to go in those spaces.

4

21a0b5h.gif960x320

something like this

2 Likes
5

Yes, exactly! But how?

6

Sorry, I was in a rush. Basically what eliphas did, except using my own GIFs.

7

i dont use photoshop. i use gimp. so i am not quite sure on lingo or features.

but.

if you have your 3 gifs, you have to merge down or recapture the image with the overlay as the top layer for each frame

8

Thanks! I had not tried GIMP yet!

9

.

i think it took about 30 - 40 min roughly dancing dog pic for some reason is in black and white it should be in color

10

I can't seem to get all of my layers to show at the same time, one GIF plays, then the other, then the other, and then the frame pops up. Any ideas?

11

Using the gifs @thecaveman linked, I just learned how to do this.

(yes it's really badly made, I just squished/stretched the gifs to fit.)

Open the three gifs you want, with the first one change the Canvas Size (Image>Canvas Size) to 960x320, the overlay image size.

Open the overlay image, select all, copy. Select the very top layer of the first .gif (the one you changed the canvas size) and Ctrl+V to paste the overlay as its own layer. It will be placed above the very top layer, and should by default show up in every frame.

Go to Window>Timeline to see each frame.

Go to the second .gif tab. In the Timeline window, click the dropdown menu>Select All Frames, then dropdown menu>Copy Frames.

Go back to the first .gif and click the dropdown menu>Select All Frames, dropdown menu>Paste Frames... Use the method "Paste Over Selection"

Do the same process for the third .gif. Make sure the center gif is topmost, but one below the overlay.

You can either select the empty side areas in the overlay gif with the wand tool and go to each frame of the center gif and delete it, or make a Layer Mask and copy it to each frame.

Then just delete the frames that are at the end, where some of the gifs are longer (or do whatever you see fit here, you could just repeat the other gifs frames or soemthing...)

Sorry if this is a bit hard to follow, I just did this for the first time.
(Might be easier in GIMP, I've only used it a little, so I don't know if those instructions are easier or harder than these with photoshop)

If you want to see the .psd https://mega.nz/#!Y0YDGTbD!JGqsgQh9m-PYej2HfY6kCmNtpu-RDy6ZPt8_jyAlHko there's not really much to see, but it could help. I dunno.

(I know this has basically nothing to do with this... I was bored, so here is a "better" version of the example gif)

1 Like
12

Thank you! It took me two hours of following you guide, but I seem to have gotten it! How do you save it as an animated GIF? I exported it as a GIF but it doesn't move, but in the preview, it plays all the way.

13

Thank you as well! I'm not fond of GIMP at all but after fiddling around it gave me an idea of what I had to do in PS. :)

14

You have to "Save for Web" and use pretty much the default settings. You can choose some looping options, but I'm not sure how well certain browsers react to them.

15

Thanks! Okay so here is my image. http://imgur.com/UhFkL4G

Now I somehow have to get it under 1MB. I was able to scale it down some but it's way too small.