Animated Gif Banners

Are a pain in the arse.

I’ve been making some for Churchill, based on designs the Studio forwarded to me. They’re lovely (as far as pop-ups and banners go), but the major problem is file size.

They’re huge.

Considering the target size is about 12K here, I really can’t see how I’m supposed to make them that small. Currently they’re all around 100K. I think some of that was due to the high quality of image the design studio used, so I’ve taken them all into Photoshop and saved them out as a lower quality, and got that right down. But When I take the .psd into ImageReady and start animating it (very small amount) the size shoots straight up.

Any ideas on what I’m doing wrong? Or how I can compress them?

Hi Kitiara,
I get asked to make quite a few banners for different companies and through trial and error I have found that once you have created your images in photoshop and saved them at the lowest file size as possible without losing any quality, open the images up in fireworks and create the animation there using frames as I find fireworks optimises gifs muchbetter than photoshop,
(And believe me it hurts me to say that as i’m a big photoshop fan).

I’m sure your aware also that the more frames you use the bigger the file size is going to be so its always best to use the least ammount of frames needed and adjust the frame speed of each frame to get the required effect.

By the way I love looking at the images you create when you post them do you have a tutorial website where I could create one for my nickname of The Bandit:bandit:

You like my drawing? Thank you very much. :slight_smile: I’m not much cop at the fantastic Photoshop stuff - a lot of these guys seem to be able to do them blindfold (Eilsoe, Edwin, I’m talking about you here :slight_smile: ). I tend to stick more to line art. I did write a tutorial on how to do it for It’s buried under Flash MX - Special Effects - Line Art or something similar. It’s cheating really, as I draw by hand first, scan in then trace in Flash. But sometimes you can get really nice effects.

I’m about to try playing around with Fireworks now for those animations. Stupid of me really, I’ve got it here on my PC, but I never thought of using it. Duh… Fingers crossed it’ll work out. As far as I can tell, it’s Imageready that’s bumping up the file size…

I use Jasc Animation shop 3 to make my gifs… just make the jpg’s in photoshop, and then import to Animation Shop 3…

It even has loads of transition effects! :slight_smile:

It comes with Paint Shop Pro 7…

Argh, I don’t have Paintshop Pro!

It ain’t that expensive really…


When you use Fireworks to make your animation, try converting to a symbol and using a tween, as in Flash…

That will create a much smaller file size…it’s one of the things the prog was designed for… :stuck_out_tongue:

If you need help, ask…


my icon is a GIF animation. i made it in Flash. fairly small. thanx for the mention Doll :slight_smile:

When you use Fireworks to make your animation, try converting to a symbol and using a tween, as in Flash…

I don’t know if these things are tweenable… Alright, look I’ve attached one of the animated gifs to this post, so you can see what I mean. I’ve got this one down to 20K, but I need to make it lower. I haven’t got much knowledge of Fireworks (at least not on the animating side), - I’ve found the Convert To Symbol thing, but it doesn’t seem to reduce the file size. Each frame was originally a .psd, which was then Saved For Web as a gif, opened into Fireworks, then pasted into the animation.

Any ideas, bright spark? :slight_smile:

Hi Kitiara,
Ive had a look at your animation, and Ive got the size down roughly another 2k.

What I did was I opened up the animation in fireworks and exported/optimised each layer, then I reopened each image and put them back on the canvas which I then trimmed to match your layers.

What you could try is to only use photoshop for the image work and apply the text from fireworks, I’m not sure if this would make much of a difference but it might reduce it a further couple of k.:bandit:

Cheers. :slight_smile:

I’ll try that tactic on the others, see if it reduces them any more. Like I said, I’ve never really had to use Fireworks much before, so I’ve still got no idea of the best way to go about things, and all the little tricks you can do. :-\

that is the UGLIEST dog I have ever seen in my life!


I took the gif into fireworks, looked at in the 4 by preview mode, then took it down to 32 colors… that makes it 16k .

it is a matter of how good do you want it to look vs. small file size… anything else will take much more time (export individual frames, then import into FW, then optimize/export, then paste into layers, then export as animated gif…

hope this helps,

Rev :elderly: