View Full Version : Fade In/Fade Out Image Transitions in Animated Gif

March 11th, 2008, 09:57 AM
Hi, Newbie here,

I'm using PSE 4.0. I have created an animated gif using 10 different photos that loop continuously (like a simple slide show). Is it possible to make each image "fade" or "dissolve" into the next image? I'm looking for a fade in/fade out effect for each transition. It needs to be an animation, not a still photo. Was able to do it in Premier 2.0, but I need it to be in gif format to upload to my website. Hope this makes sense.

Any help would be greatly appreciated! I've spent hours trying to figure this out, was ready to give up when I found this wonderful forum!


Byron Gale
March 11th, 2008, 10:02 AM

There is no fading between frames in an animated GIF.

You could simulate fading by creating the faded frames, yourself, and having more layers in the image.


March 11th, 2008, 10:10 AM
Thanks Byron for the quick reply!

How do I create the faded frames?


Byron Gale
March 11th, 2008, 10:18 AM

If it were me, I would lower the opacity of the upper layer to where it appeared to be about a 25% fade, then do a "Stamp Visible" to capture the look on a new layer.

I'd repeat the process to approximate 50% and 75% fades.

Then, I'd assemble the layers into a new image, inserting my transition layers between my image layers.

If the appearance of fading 25% at a time is too 'notchy' for you, then you could adjust the process to any degree you like... it will just result in more layers/frames for the animation.



Juergen D
March 11th, 2008, 10:26 AM
I was just experimenting with it. I think duplicating each layer six times may do it. The total seven layers need to be set at 25%,50%,75%,100%,75%,50%,25% opacity respectively, followed by one blank layer.

It may be necessary to increase the Frame Delay from the .2 sec default.


Byron Gale
March 11th, 2008, 10:34 AM
I made a quick example... first, with no fades:

http://www.pixentral.com/hosted/1FDtU1T4WAFExtgrPpuDKZ7vdtmGcx_thumb.gif (http://www.pixentral.com/show.php?picture=1FDtU1T4WAFExtgrPpuDKZ7vdtmGcx)

Then, I used opacity settings of 50% and 85% as my intermediate steps, so I created two layers between each full-opacity layer. For the first, I set A at 85%, and B at 50%. For the second, I set A at 50%, and B at 85%. I did the same between B and C, and then from C to A.

(edit to add that I used 50 and 85 because they appeared to be about 1/3 steps to my eye)

http://www.pixentral.com/hosted/1fgMMM3ejztbqNgDSZldhnRvXjOPv_thumb.gif (http://www.pixentral.com/show.php?picture=1fgMMM3ejztbqNgDSZldhnRvXjOPv)

As Juergen mentions, you will get smoother results if you use more transitional layers.


March 11th, 2008, 01:19 PM

Thanks a million for the example, it really helped! Thanks also to Juergen. I think I finally got it. So you have to combine the 2 layers with the different opacities (sp?) to create it's own image. I was trying to set the opacity for each duplicated layer without combining them into one image. Makes sense now.

One more question, is there a quick way to combine 2 layers into one image?

Thank you, thank you, thank you,

Byron Gale
March 11th, 2008, 01:40 PM
...is there a quick way to combine 2 layers into one image?...MissMorales,

Yes. Turn off visibility to all other layers, then select one of the two still-visible layers. Press CTRL-ALT-SHIFT-E on your keyboard and a new, composite layer will be created above your currently-selected layer.

You can do the same thing by first holding ALT, then clicking at the top of the Layers palette MORE>, then Merge Visible.

I'm glad we were able to help!

Don't be a stranger...