Digital and Analog Storytelling

The entire history of human expression, slightly abridged

New problems for North Quad (animated gif/animation tutorial)

So, so sorry, North Quad, I couldn’t resist.

The first thing that I did was get three images having to with water to add to the ‘flood in north quad’ photo. I chose the Creature from the Black Lagoon, Nessie, and some whitewafter rafters for coming down the stairs. I used the Quick Select tool and masking layers (see the color splash tutorial for a reminder, if you need it).

Then, I have the images that I wanted to insert, and I separated them each onto their own layer (pasting the image automatically sets each one as its own layer). But I really wanted to animate the layers, have each one appear suddenly (not appear gradually, like in the ‘On Leather Wings’ gif that made earlier), and I knew that would cut my work down, make it easier.

First, I made all of the layers invisible except for the flood image. Then I clicked on WINDOW>ANIMATION, and got to work.

animation 1

The rest is fairly simple. Once you have that animation box, you just click on the little icon along the bottom edge of the animation box, the one that looks like a piece of paper with its corner turned up, and you click that to duplicate the image that you have. I clicked this three times, giving me four images in the animation box.

Then, I made the Nessie image layer visible. That changed frame #4 in the animation box to FLOOD + NESSIE.

Animation 2

Then, I copied that layer, using the same corner-turned-up icon, this time clicking it until I got to frame #10.

Then, I made the creature from the Black Lagoon visible.

animation 3

I duplicated that up through frame #16, and then I made the white water rafters visible.

Animation 4

Then I duplicated that image all the way through frame #27. Since this is the last image in the sequence, I wanted it to pause there before starting over, so the viewer would know that the story (or joke) was over.

Animation 5

That’s it! You can push the play button (on the same line as the duplicate button you’ve been pushing) to get a sense of what the image looks like before you move on.

Then, you push CONTROL-SHIFT-ALT-S (that’s for the PC, obviously), which is the shortcut for “save for web.” Then this dialog comes up.

Animation 6

You can preview it more accurately here by clicking “Preview,” or you can just save the animated gif by pushing “Save.” That’s it. You’re animation is done.

Here it is, in all its glory–



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


This entry was posted on April 2, 2013 by in design, umdst and tagged , , , .
%d bloggers like this: