How to Make An Animated Gif by Lucky Platt

Earlier this month while working on Illustrator Saturday featuring Lucky Platt, I was taken by her animated .gifs and asked her to put together a article that would walk everyone through putting one together. Today is the day I can share what she sent to me. See below:

 

One of my favorite ways to animate is by creating what I call a continuous drawing. Basically it’s one changing drawing scanned in a sequence and exported as a .gif. Here’s how it works:

I start by creating the initial drawing on a sturdy paper.

This drawing will be the first frame of the animation. I’m working on Arches Hot Press Watercolor 300lb paper with Yasutomo Black Sumi Ink, Uniball Signo broad white pens, black Micron pens and Gelly Rolls.

I scan the initial drawing using the Import Images from Devices under the Photoshop file menu, and save the image with a name and number.

For the next frame of the animation, I want to suggest a little bit of movement. The Sumi Ink is great for bold lines and washes – the tail swishes, the ear twitches.

I scan this second drawing like the first, and give it a sequential number.

For the third drawing, I’m moving the tail, opening one eye, and waking up the fur.

The Uniball white pen is great for covering the part of the tail that I want to move. It’s a remarkably opaque ink that works best with a slower controlled mark-making, and needs a little bit of drying time. I use it in combination with the Gelly Roll pen which is less opaque but moves quickly and easily, and is almost instantly dry. The Sumi Ink can be applied over the dry Uniball ink.

I check to make sure the drawing is dry and then scan it and give it a sequential number.

The drawing process continues in this way – canceling areas with opaque white pen, making bolder moves with the Sumi Ink and lighter airier action marks and flying hairs with the fine point Microns. You can see in this sequence that everything about the cat stays goofy and loose – the sense of movement is more important than fine detailing – while the chair structure is mostly static.

For the last drawing, I’m redrawing the cat under the chair, looking at little bit frazzled by the fall. 😉  

At this point I’m ready to create a moving picture. I use Scripts-Load Files into Stack under the File menu in Photoshop and select the eight image files in sequential order. I also check the box Attempt to Automatically Align Source Images so that the software will align using the aspects of the drawing that have remained the same throughout the sequence – in this case, most of the chair. The Scripts feature will open all eight images and automatically create a Photoshop document with eight layers. If needed, I reverse the order of the layers so that the last drawing is first in the Layers view. (Select all layers and choose Arrange-Reverse)

Now I’m ready to animate! (I’m using an older version of Photoshop (CC 2014) but should be very similar.) I open the Timeline panel under Window menu, and click Create Frame Animation. From the Timeline panel pulldown menu in the upper right corner, I choose Make Frames from Layers. The Timeline defaults to playing each frame for 0 seconds, and that’s usually too fast, so I change the timing on each frame, usually adding a half or whole second to each frame. I also select Forever under the drop down Menu (default is Once).

I view the animation and adjust timing as needed. When I’m happy with it, I select File-Save for Web and choose .gif under the file format menu. Like magic, the .gif file is a moving image that can be shared and viewed more easily than a video file.

Thank you so much for reading and happy animating to all of you!

*******

Lucky, thank you for taking the time to put this together. I hope people will have fun playing around with this. I have added it to my “To Do” list.

From IMAGINE A WOLF

Talk tomorrow,

Kathy