ICM 504: Module 1 Project - GIF Animations

ICM 504: Module 1 Project - GIF Animations

The Project

After doing some reading and researching on the subjects of animated storytelling and animated GIFs, we were tasked with creating three GIFs of our own:

  1. One of them should be made with "cut out" images in Photoshop.
  2. One of them should be drawn by hand (onion-skinned or tweening of symbols), using either Photoshop or Animate.
  3. The third one can be using your choice of program and technique.

The Animations

#1 - Macbook Pro Booting Up GIF

Using the first animation technique of animating "cut out" images in Photoshop CC, I created an animation of a Macbook Pro booting up. Using the mockup as a base, I referenced this video (tabbing second by second with the "." and "," keys between 5:17 - 5:18) in order to create a realistic transition (particularly with the colors).
I left the mockup as the background layer for the entire animation, then used separate layers and the "Frame Animation" timeline to create this GIF.
While researching the subject of an "[Apple product] booting up", I actually found that there were not many resources—mostly just videos of people unboxing their new products for about 15+ minutes with a quick second (literally) of booting them up. I had to reference my own laptop for the sign-in screen, so I'm glad I had the chance to create something I haven't specifically seen before. I also love Anthony Boyd's graphics, and I felt that this was a beautiful, yet simple way to bring his breathtaking graphics to life.

The Macbook Pro mockup and background that I used are credited to Anthony Boyd, Anthony Boyd Graphics.

ICM 504: Module 1 - Macbook Pro Booting Animated GIF

Macbook Pro Mockup © Anthony Boyd, Anthony Boyd Graphics
Image is free for both commercial and personal use.

#2 - Shikyo Smoking Animated GIF

Using the second tecnique of animating by hand (onion-skinning and/or tweening) I created an animation of my OC (own character), Shikyo.
In Photoshop CC, I sketched out the original pose for Shikyo (on a relatively small canvas); then, I drew the rest of the animation using the onion-skinning technique and the "Video Timeline" feature. I love the look of sketchy, fully-hand-drawn animations, so I re-drew Shikyo in each frame.
For the record, Shikyo doesn't smoke; however, I've always wanted to animate smoke and decided this might be a good time to do so.

ICM 504: Module 1 - Shikyo Smoking Animated GIF

I do not encourage smoking or vaping! Please be responsible and decide for yourself whether or not you wish smoke.

#3 - Deer Girl Animated GIF

I masochistically ended up enjoying the previous onion-skinned animation, and I've been wanting to turn the initial sketch from this project into a portrait of a "deer girl"...so I figured, "Why not animate her metamorphosis?"
I took the initial sketch back into Photoshop CC and moved forward and backward with it using the onion-skinning technique: closing her mouth in the beginning, adding in her eyes blinking, and adding the freckles/antler growth (each of these on their own, separate video layer.
After a while of creating this animation, I found the onion-skinning technique to be somewhat therapeutic and relaxing—provided that I allowed myself to keep a sketchy, messy style.

Drawing Shikyo in a line-art-type fashion almost broke my hand.

As a portraiture artist, I tend to focus on the faces of my subject more than anything—body language says a lot, but the face tells all.
The eyes are the windows to the soul, after all.

ICM 504: Module 1 - Deer Girl Animated GIF

Model and image referenced: Darya Dogusheva

Related Reading: