Have you ever seen those commercials which feature sketch animation, like the Numbers Never Lie commercial during the Super Bowl?  You may have also heard it called video scribing, fast hand drawing, or sketch cartoon video.  Building on this style of animation, I wondered how hard it would be to do a similar effect on a tablet.  Even cooler, what if I made a sketch animation GIF to use as a loading page animated GIF?

To start, I needed an app that would allow me to draw and turn my strokes into a video.  I started by searching google for sketch animation tablet apps, but the results were just plain old animation apps.  No good.  Digging deeper, I remember that teachers make sketch animations all the time for online classes.  So instead of looking for teaching apps, and voila!  I found two apps:  ScreenChomp and Educreations.  They both appeared to offer what I needed:  video recording of a drawing, aka sketch animation.  Teacher’s have been using sketch animation for years!  Note:  I tried ScreenChomp first and it worked, so I didn’t try Educreations.

Now the next challenge: how to make a GIF from the sketch animation video.  There are web services out there that will do this for a fee, but 1) I wanted to learn how to do it myself and 2) I wanted a transparent background.  I heard you can use Movie Maker some how, but having a Mac I decided to use the iMovie method.

Here is my method:  I used this awesome tutorial to convert the video to gif using iMovie and GIFfun, then used GIMP to make the background transparent.  To make the background transparent, I went through every frame/layer of the GIF to 1) add an alpha channel, 2) Select the background using the color selector tool, then 3) Edit->Clear.  When you save, make sure you set the animation speed to ~20ms.  This is quite tedious, but you could automate it using a GIMP script if you were so inclined.

And that’s it!  Here is my animated sketch GIF with transparent background!