Graphics - Animated GIFs

SOFTWARE:

There are many animation programs and they pretty much follow the same procedures for creating GIFs. Most come with a range of effects and filters but these can dramatically increase the final file size, so they are not likely to be used for Web-based graphics. Programs such as Ulead GIF Animator 4 also allow you the option of exporting the animation to QuickTime, AVI and other formats. Some image editing programs include their own animation packages: recent versions of Paint Shop Pro ship with Animation Shop, while Photoshop ships with Image Ready.

Adobe summarises an animation as "a sequence of images, or frames, that is displayed over time". It is that simple: you create each frame separately in an image editing program (such as Paint Shop Pro) and use the animation software to set the order and length of time that each frame will appear on screen.

SIZE IS EVERYTHING:

If you are going to be including GIFs on your Web site, then they have to be as small as possible, otherwise they may not display or visitors will move on to another site. Most banner ads are typically under 15KB, with 20-25KB being the maximum range. This doesn't allow a great deal of flexibility. To construct a GIF, you will need to determine how you want the animation to appear in each frame. Remember that GIFs display a maximum of 256 colours, so photos will appear grainy. If you use fewer colours, that will also mean the files are smaller - this is why most banner ads use single solid colours.

IT'S TRICKY:

There are many tricks to creating a GIF - one special point to consider is that, in very simple terms, the GIF compresses the size of the animation by looking at what changes from one frame to the next. So if you have a black background and only change a few words in each frame (as in the example shown), then there is very little difference between the frames. This will be more compact than switching the entire image in each frame. The best approach is to start with a frame that you can use as a template; then, each time you add a frame, save a copy of the file and edit that as the new image.

This illustration shows a very simple example of an animation. I am creating a standard banner ad (468x60 pixels) for my Aesop's Fable Web site. You can view the finished product on the cover CD - go to the Help Screen section and follow the "Software" link, where you will also find trial versions of animation software (and some tips about HTML and banners). In this example, the animation has four frames created in Paint Shop Pro.

Tips and tricks

Avoid animations that blink.

The last frame of an animation should display a meaningful image, particularly if the animation plays once.

To minimise size, try to reduce the number of colours - 64 colours is a good target.

To get experience creating animated GIFs, visitor any popular Web site, find a banner you like and save it. Open the file in your animation program and look at the number of colours, frequency and which elements change in each frame.

Transition effects are filters or wizards that allow one image to blend into the next one. However, they can also blow out the file size of a GIF, as they introduce new frames.

GIF format is "lossy" so it is better to save your files in the program's native format (e.g., Animation Shop uses .nmg) and generate the animated GIF once you have finished.

Join the newsletter!

Or
Error: Please check your email address.
Rocket to Success - Your 10 Tips for Smarter ERP System Selection
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Scott Mendham

PC World
Show Comments

Essentials

James Cook University - Master of Data Science Online Course

Learn more >

Mobile

Exec

Budget

Back To Business Guide

Click for more ›

Brand Post

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Andrew Teoh

Brother MFC-L9570CDW Multifunction Printer

Touch screen visibility and operation was great and easy to navigate. Each menu and sub-menu was in an understandable order and category

Louise Coady

Brother MFC-L9570CDW Multifunction Printer

The printer was convenient, produced clear and vibrant images and was very easy to use

Edwina Hargreaves

WD My Cloud Home

I would recommend this device for families and small businesses who want one safe place to store all their important digital content and a way to easily share it with friends, family, business partners, or customers.

Walid Mikhael

Brother QL-820NWB Professional Label Printer

It’s easy to set up, it’s compact and quiet when printing and to top if off, the print quality is excellent. This is hands down the best printer I’ve used for printing labels.

Ben Ramsden

Sharp PN-40TC1 Huddle Board

Brainstorming, innovation, problem solving, and negotiation have all become much more productive and valuable if people can easily collaborate in real time with minimal friction.

Sarah Ieroianni

Brother QL-820NWB Professional Label Printer

The print quality also does not disappoint, it’s clear, bold, doesn’t smudge and the text is perfectly sized.

Featured Content

Product Launch Showcase

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?