This content has been marked as final. Show 9 replies
No tutorial, but this should be easily doable with the Liquify and Mesh Warp effect by animating the distortion grids/ brushes.
You can render to a GIF from within AE (but the GIF won't be very optimized and hence not as small as it could be if optimized in a dedicated GIF software).
To me, it looks like he's done it in Photoshop CS3/CS4 Extended with the Smear tool.
- Jonas Hummelstrand
Don't mean to highjack this thread, but your reply prompts some questions:
Just yesterday I was playing around with animated Gifs, as a client asked for a little looping banner ad. I had good success animating in actual size in AE (118x240 pixels) and I put the resulting Gif in a browser and it looked and played fine. I haven't used these really at all up to now, so just for grins I tried making a larger animated Gif for the banner across the top of an exsisting web sit I made. Right now, the banner is an SWF file, which loads pretty quick, but I wanted a comparison.
The Gif worked, but its timing was off so in AE I squeezed the keyframes closer together and that helped some, but it begs the question, how do you control timing in an animated Gif you want to play once and stop?
Also, the quality of the Gif was all grainy, it looked okay but more like a mezotint.
Any advice on apps or procedures that will work better, give more control? Thanks!
> Also, the quality of the Gif was all grainy, it looked
> okay but more like a mezotint.
The graininess that you refer to might be because of the dithering to an 8-bit palette.
There is some information about this in the "Creating an animated GIF movie" section of After Effects Help.
Rendering to GIF shouldn't mess up the timing, but be aware that browsers may not be able to keep up with frame rates of 15 fps or more.
The palette issue is due to GIF only having 256 colors.
Instead, I'd render an image sequence from AE to TIFF or PNG and then use any of the number of free GIF tools to optimize the palette and create the actual GIF.
I used to do this in Adboe ImageReady that isn't sold anymore, so I'm not really up to date on the curent tools.
- Jonas Hummelstrand
The very best way to render an animated gif is not to use the render cue in AE to create the gif but to render an image sequence to a lossless format and then bring that sequence into an app like Firefox or Photoshop to create the gif. You'll then have complete control over the timing of each frame and much higher quality output at a much smaller file size.
Personally I set up my AE comp with no breaks in the animation. For example if I slide in a word from the left and then want to hold it for 3 seconds before sliding it out my AE comp is set up with only a 1 frame pause in the middle. I then use Firefox to set the duration of that frame to 3 seconds.
Hope this helps. If you don't have Photoshop or Adobe's best web graphics optimization app Firefox, there are a ton of free apps on the web that will convert sequential image files to animated gifs.
I think Rick meant to say "Fireworks" by Adobe.
At first, I was psyched that Firefox added that kind of functionality!
You guys may not believe this, but as luck would have it, all this dawned on me yesterday afternoon after the following:
Waiting on a response from Jonas, I Googled for some Mac-based Gif animation software. I ended up buying Gifmation, as in playing with the trial version I saw that it could import QuickTimes. BTW, the 15 fps gifs rendered out of AE played alright, but looked all grainy.
My attempts at importing a regular QT file into Gifmation of my banner ad wouldn't work, so, after reading up on how gif animations are frame-based, it occured to me to try and load an image sequence.
I used mpegStreamclip to convert my movie to frames, 10 fps, and it went right into Gifmation and made a great optimized animated Gif!
So, I learned a lot about this, and made a deadline, so thanks all.
Firefox- is wrong. Fireworks is right. That's what I get for being up at 3:20 AM and trying to make sense.