spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / web / dev / gifanim / tutorial
intro ->backgroundcolor palettesframe optimization
resultstutorialreduce paletteframe differencing
set optionscroptweakconclusions

GIF Animation Tutorial

Developer News
ActiveState Debuts Open Source Business Suite
Salesforce Offers Visual App Builder
Codesion Steps Out From CVS's Shadow

Optimizing Animated GIFs

Step by Step

Let's trace through the steps I took to create efficient animated GIFs with GIFBuilder. PC users can perform the equivalent steps in their favorite animation program.

Create the frames

First create a series of frames in your favorite graphics or animation program (GIFBuilder 0.5 accepts files in QuickTime, GIF, Photoshop [RGB, grayscale, or GIF], PICT, and TIFF). I used Photoshop layers to manually animate the penguin by copying it to new layers and moving them horizontally (the human eye is more sensitive to horizontal movement than vertical).

GIFBuilder 0.5+ can import layered Photoshop files but for more control over the color reduction process I saved each layer as a flattened Photoshop file. GIFBuilder arranges frames alphabetically so be sure to name the files in the order you want them to display.

intro ->backgroundcolor palettesframe optimization
resultstutorialreduce paletteframe differencing
set optionscroptweakconclusions


Comments are welcome


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Use Web Caching to Make Your Web Site Faster · Creating an Online Shopping Cart Mechanism in PHP · Log JavaScript Errors Using an AJAX-driven Web Service
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Configuring Granular Settings for a Database Level Audit · The Perils of a Web 2.0 Transition on Your Business Processes · Facebook Redesigns Site —Again — Nears 400M Mark

 



Created: Oct. 7, 1996
Revised: Oct. 18, 1999

URL: http://webreference.com/dev/gifanim/tutorial.html