How to Make Compelling Animated GIFS (by Importing Video to Layers in Photoshop)

Although the GIF web graphic format has been around since 1987 (more history here), animated GIFs are my new favouritest thing. I never thought much about them until I one day I received the electronic newsletter from a magical place in Vancouver called Blim, and it contained (and continues to contain) some interesting animations by Miniature Films.

When I was planning my own monthly email newsletter, I knew I wanted to experiment with this format and incorporate it into my own publication. Traditionally, animated GIFs are flashy clipart that you would never want to associate yourself with (try googling "animated gif" and your eyes will be bombarded by ugly).

Here's a short "how to" on making amazing animated GIFs from "Import / Video to Layers":
(there are other ways to do it)

  1. Take a short video of something on your smart phone
  2. File / Import/ Video Frames to Layers into Photoshop CS5 (Extended), CS6 or CC
  3. You will be confronted with some options:

    From Beginning to End, or a Selected Range of your video only (use the sliders to show which section of the video you want to import - there is a preview player  which comes in handy)

    Limit to Every xx Frames - this is an important option when it comes to file size and how many layers you're going to end up... It will be  a process of experimentation to get this right, but start with the default, see what happens... if you have 200 layers, that is going to be way too many for a web graphic! Cancel and repeat the process from step 2.

    Make sure Make Frame Animation is checked and you will end up with a stack of layers - one for each of your frames. The Animation Timeline will be open by default.

  4. If you want, go ahead & crop the file and add any adjustment layers you might like.
  5. At this point, you should pay attention to the fact that when you click on any one of your frames in the Animation Timeline, only that layer is turned on (i.e., frame 1 corresponds to layer 1). You can mess with this - in fact, a fun thing is to play with the transparency and blending options of the layers frame to frame to create interesting effects, but keep the correlation of the frames to the layers in mind so you don't get too confused!
  6. You can also tinker with the settings in the Animation Timeline to make the animation go faster or slower.
  7. When you are ready to behold the results of your experimenting, go to File / Save for Web, where all the usual GIF settings will be available to you, and where you will be able to see how large your file is. You can either cancel and continue experimenting (if your file is to large, for example), or hit save and test your shiny new GIF in your browser! (Note: all major browsers support animated GIFs, but not all email clients support animated GIFs - ahem, Outlook).

Feel free to sign up for my monthly email publication, where I will publish new animated GIFs every month, licensed under Creative Commons Attribution 4.0.