Almost six years ago I decided I was going to start rewatching Adventure Time from the beginning. This time though, I decided I’d watch just one episode a day and then make a GIF of some part of it and post it to my Tumblr. I definitely appreciated the show more the second time around since I wasn’t watching it while distracted and story arcs/running jokes are easier to stick with when you see them every day instead of months apart.

Due to the nature of hobby projects and TV schedules I never finished. The series has concluded though so I’m going to finish up my part by posting the final three seasons over the next month. By the end, there will be over 280 GIFs in the collection. GIFs are a great way to look at Adventure Time: I’d often find perfect loops in the animation that didn’t require any manipulation by me. It also lets you study some of the incredible Jake morphs. The show moves very fast so a GIF is good for highlighting a particular bit of design or to dwell on a moment longer.

I’m only pulling a few GIFs for this post but I encourage you to explore the collection yourself. While my Tumblr theme doesn’t expose tags, the Adventure Time GIFs are all well tagged. You can find stuff by constructing your own URLs: look for GIFs of specific characters (note the + sign in tags with spaces), a particular episode (e.g. s01e23), or even some items.

Here’s my method for making these. This is what works for me and some of these decisions are made to reduce the final file size. I start with the source video as an MP4. I watch the episode using QuickTime Player. I then use the Trim tool in QuickTime to select the portion I want my GIF from and save that slice as a new video. I try to get close to the clip as possible so I’m not processing frames I don’t need. In Photoshop, I use the Import > Video Frames to Layers… dialog on my new video. I only import every 3 frames and as a Frame Animation. Once all the frames are loaded I resize the the image to 600px wide (I do it at this point to cut the amount of memory needed to deal with all these frames). I then start deleting frames from the beginning and end of the sequence until I’m close to the animation I want. I select all the frames and change the delay between frames to 3x the current (since I only kept 1 in 3 frames 0.04s becomes 0.12s). I play the animation and do additional trimming to remove jerky transitions or delete sequential identical frames and increase the delay. When I’m done, I use the Save for Web… dialog to create the final product. You’ll want to adjust the dithering do reduce graininess. Animation is good for GIF compression since there are large fields of color, but you need to do some handholding to make sure it’s not working with too few colors. When I started this project Tumblr had a <1MB cap on their GIFs. This has been lifted but it’s still nice to keep them at a friendly size.

It’s unlikely I’ll do something like this again but I’m glad I was able to improve my workflow for making one-off GIFs.