Exporting animated gifs with fade transitions in PS CS6

[evertypedesign]

So I created a basic slideshow banner with three different images that fade from one to the next. When I preview it on the timeline, everything looks great, but when I go to save for web and select gif, then hit play for a preview, the fade transitions are gone and they just hard cut from one to the next. Anyone know how to keep those fade transitions when exporting?

[janelle_f]

Here is a great video tutorial where at 2:57 he exports out to a GIF. He has transparency checked, and he also uses diffuse transparencies for his tutorial.

go to 2:57

-janelle

[evertypedesign]

Thanks janelle_f, but his example doesn't fade. I can get the cut transition no prblem, but it's the fade transition that won't seem to save for web.

[Mylenium]

Perhaps render out the animation to a QT file and then re-import it for export to GIF...

Mylenium

[evertypedesign]

Thanks Mylenium, very helpful. Any ideas on how to get the file size down to around 40-50K and still maintain decent quality? I'm thinking this isn't possible with the kind of animation the client is hoping for in this gif. Seems like I've seen it done though, I'm clearly not a gif expert though. You can see that the transitions are working thanks to your suggestion, but it's like a 1.5 MB gif. Yikes.

[Mylenium]

The only way to optimize this is to use less colors and define the frame durations manualyl in the timeline in frame mode, i.e. setting the actual posters to a very long duration on a single frame and then only have the transition regions use multiple frames with short durations. Still, I don't think you will ever arrive at 40-50kB. Even a normal mail blast with static PNGs/ GIFs and JPEGs is larger than that if it contains a huge logo, decorative lines and borders and button graphics... It's unrealistic. With the above optimizations you may get to somewhere about 300kB, but not below, if you wnat to retain the fades. They are what makes your files fat because they introduce lots of colors in teh palette that can't be optimized away easily...

Mylenium

[evertypedesign]

Yeah, that's pretty much what I told the client. If only iOS devices would accept Flash I wouldn't even ahve to worry about this!

Thanks again for your input, it's truly appreciated.

[J453]

Video transitions aren't compatible with animated gifs.

Use keyframes to change the opacity of layers for Timeline Animation compatibility with animated gifs. See example PSD: Adobe Creative Cloud

Frame Animation works best for animated gifs. See example PSD: Adobe Creative Cloud

[mark@headTrix]

You can still use Flash (now Animate CC) it exports to HTML5 so it works in a browser on desktop or Phones!

You can reduce the size of your GIF by limiting the colors, or by limiting the amount of frames in your animation. So it will not be as smooth, but you will still get some movement. With a GIF, you can also use the "Lossy" option which will degrade the images, but its the JPEG algorithm of removing pixels to reduce the file size. SO removing color, removing frames of the animation,

Not sure about fade transitions on your GIF's, not sure if I heard of that. You can just make a NEW frame, and lower the opacity, then make a another new frame and lower its opacity....

Try it with Adobe Animate and export to an OAM!

cheers!
mark