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

Sign up to gain exclusive access to email subscriptions, event invitations, competitions, giveaways, and much more.

Membership is free, and your security and privacy remain protected. View our privacy policy before signing up.

Error: Please check your email address.
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Scott Mendham

PC World
Show Comments

Brand Post

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Luke Hill

MSI GT75 TITAN

I need power and lots of it. As a Front End Web developer anything less just won’t cut it which is why the MSI GT75 is an outstanding laptop for me. It’s a sleek and futuristic looking, high quality, beast that has a touch of sci-fi flare about it.

Emily Tyson

MSI GE63 Raider

If you’re looking to invest in your next work horse laptop for work or home use, you can’t go wrong with the MSI GE63.

Laura Johnston

MSI GS65 Stealth Thin

If you can afford the price tag, it is well worth the money. It out performs any other laptop I have tried for gaming, and the transportable design and incredible display also make it ideal for work.

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.

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?