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

Cool Tech

Toys for Boys

Family Friendly

Stocking Stuffer

SmartLens - Clip on Phone Camera Lens Set of 3

Learn more >

Christmas Gift Guide

Click for more ›

Brand Post

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Aysha Strobbe

Microsoft Office 365/HP Spectre x360

Microsoft Office continues to make a student’s life that little bit easier by offering reliable, easy to use, time-saving functionality, while continuing to develop new features that further enhance what is already a formidable collection of applications

Michael Hargreaves

Microsoft Office 365/Dell XPS 15 2-in-1

I’d recommend a Dell XPS 15 2-in-1 and the new Windows 10 to anyone who needs to get serious work done (before you kick back on your couch with your favourite Netflix show.)

Maryellen Rose George

Brother PT-P750W

It’s useful for office tasks as well as pragmatic labelling of equipment and storage – just don’t get too excited and label everything in sight!

Cathy Giles

Brother MFC-L8900CDW

The Brother MFC-L8900CDW is an absolute stand out. I struggle to fault it.

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.

Featured Content

Product Launch Showcase

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?