Module 1: Basic Motion

Research to Inform

To find GIFs for inspiration, I looked at websites like Giphy and Pinterest and followed links to other sites like Dribbble and Behance.

One thing I noticed is how many GIFs I thought, or at least hoped, would loop and then they didn’t. They don’t have to, but many I saw would have benefitted by adding this small detail.

This first GIF is part of a beautiful collection made by soman 소만 on Behance. The only colors are black and white but combined with the use of texture, it creates a simple and serene image that draws viewers.

I chose this GIF of a waving candle by Pinterest user Ayşe because although it has little movement, it is captivating to watch, much like a real candle. It reminds me of cinemagraphs that use a flickering candle as the focus as well.

Another fire related one, this GIF by Katja Dylla has a more illustrated look with its textured flames and lines. The fire is large and energetic, giving it a more passionate feel compared to the peaceful tealight.

I added this GIF of a little shepherd by Lukasz-Buda because of its adorable, storybook style. Also because of the funny fact that me and many other viewers thought the sheep were eyeballs at first glance. It doesn’t loop, but it is still nice to watch over and over again.

Yup Nguyen made this GIF called Virtual Garden - 01 for a Dribbble warm-up exercise. It has a unique art style and beautiful colors, and each part sways in the wind with a calming motion.

Not much to say about this cow GIF by Andrealocel other than it’s simple, cute, and funny.

Another by Andrea I enjoy is this little paper airplane with legs who just wants to fly. It’s an unusual idea done very well.

On Pinterest, I saw a post by a name I recognized, Louie Zong. I have seen some of his animated songs on YouTube, so I followed the link to his website where I saw this GIF of a cat. I enjoy this one before of how seamlessly and satisfyingly it loops. It is also more 3D than most other GIFs.

Nazaret Escobedo created this GIF of a blackbird walking. He has a steady rhythm to his step, and I couldn’t help but imagine the song Stayin’ Alive playing in the background.

Create

After looking at other people’s GIFs, it was time to create my own.

For my first GIF using “jumpy” animation, I chose to do a popcorn bucket that is actually jumping. I created the images in Illustrator with each piece of popcorn being on its own layer. Then I went to Photoshop and used the timeline to create this bouncy look.

My second GIF utilizes the “onion skin” technique of hand-drawing each frame. I wanted a simple image that would loop nicely, and I thought of a heart.

I used Adobe Animate for the first time here, and after figuring out what a few of the buttons did, I enjoyed creating each part. I wanted the loose tracings to give the image a soft, wiggly look, but I did delete a lot of frames when I felt they drifted too far from the original shape. I adjusted the timing of each piece so it flowed well and had the right amount of time to breathe.

For my third GIF, I chose to do another hand-drawn one, this time of a butterfly. I looked at a couple of reference images, but I mostly just “winged it” in regards to how the wings would look as they flapped. So it’s not the most accurate, but I think the final product came out pretty well, and I particularly like the slight body movement giving it life.

My friend suggested making the flap faster and having it linger on the upright wings longer. I tried it, and this second one does seem closer to an actual flap. However, both have their own feel and neither is bad per se.