Open Source Web Design from Scratch

Its hard to be flashy on craigslist. Sure you can make your add one big image, but users need to cut and paste! So in the interest of usability and in the name of awesome, I give you the world’s sweetest animated GIF:

That’s right, it just don’t stop. Ever. Not even if you want it to.

Process

This is the first animation I’ve ever done, so I really had no idea what I was getting myself into.  I mean, I don’t even draw things, really.  First I drew a story board of sorts in pencil on sketch paper and scanned it.  It was probably 15 frames at that point.  Then I imported the storyboard frames into Inkscape and drew over them using the bezier tool.

I decided early on that I would use a 2:1 aspect ratio, so the original frames were drawn in Inkscape at 800×600 pixels.  I also decided on a standard stroke width: 3.5px for thin lines (like outlines) and 10px for thick lines.

For color I used the “Tango icons” palette that comes default in Inkscape.  Its beautiful and it degraded well when I optimised the image down to 32 colors.

Screw it, I’m using Gimp

There were several options when it came to putting the animation together.  I tried the Gimp Animation Package but I just couldn’t figure it out.  Its really clunky and I lost patience.  Synfig looks promising, but I would have had to redraw all my storyboard frames, so no go.

In the end I went with good old Gimp.  I drew each frame in Inkscape and exported them as PNGs.  Because you can export just a selected area in Inkscape, I would have the whole scene laid out in one image, with all the frames right next to each other so I could easily reference where I was in the scene.

I imported the Inkscape-created PNGs as layers in Gimp (ctrl + alt + o).  I could check my work in Gimp with the the Playback filter (Filters -> Animation -> Playback…).

Gimp animates by displaying a layer for a set amount of time and then stacking the next layer on top of that layer for a set time, and so on.  The default framerate is 100ms per frame, which works pretty well.  If you want a frame to display for a longer time you can adjust the name of the layer like this:

Layername (1000ms)

That layer will be displayed for one second of your animation.

Finishing Work

Before saving your .xcf file as a .gif file, its important to optimize it for animation (Filters -> Animation -> Optimise (for GIF)). This ensures that new layers in the animation stack on top of the old layers (as opposed to replacing them), which makes the file much smaller (for some reason).

To turn a Gimp .xcf file into an animated .gif, you just have to save the image as, say “MyAnimation.gif” and choose the “Save as animation” and “Convert to inded using default settings” in the dialog that pops up.  I choose against interlacing because I liked my clean lines.

Setbacks

If I had to do it again, I would like some tweening.  Tweening fills in the gaps in your animation, so if you have a bird that flies across the screen, you only set the original place of the bird and the destination.  The computer generates all the frames in the middle so you don’t have to.  Would have saved me some time.

Unfortunately, tweening doesn’t help with articulation.  The most difficult part of the whole project was the 2 seconds at the very begining where the guys are walking down the stairs.  That took forever!  I completely understand now why 2D cartoons are often drawn in 3D programs (I think The Simpsons is done like that).  3D drawing programs like Blender allow you to place joints and muscles inside a character, so if you move a limb the skin conforms in a natural way.  Maybe next time.