I cannot shake it, there is something magical about experimenting with animated GIFs. There’s a lot to be said about isolating the motion of the eyes- I’d previously played with using video frames in doing the one on Ayn Rand’s eyes, because her eye motion was so mesmerizing in the film.

You might have to look at the image above to catch the movement. Less obvious is better in doing this stuff.

I’ve also been interested in wqrking to make the animated gif less herky jerky, more subtle, even with the way the one of Edward Norton’s character in Fight CLub sits there almost motionless, and then jerks awake.

Hence the experiment above, but done with only 2 photos. I’m enjoying finding ways to capture the raw material for an animated GIF with my own camera. I keep the camera in the mode that shoots continuously when the shutter is held. I would do better in I tripod mounted, but can make up for that in the software.

Here is how it is done… For the GIF above, I had two photos of Giulia and only her eye position was slightly different in the second shot. I am doing these in PhotoShop, I am not sure if the same options are available elsewhere, under File, select Scripts -> Load Files into Stack. In the dialog, click Browse and multiple select (use the SHIFT key) all of the images you need, and select the top option Attempt to Automatically Align Source Images (this will help with any offset of your subjects) (you hope).

What you will get is a single PSD with all the images chosen in separate layers. What you next want to do is to open the Animation window.

What you have here is the timeline for your animation, where each frame is a track. As it stands now, you would not see any movement since the layers are stacked:

(click for full size)

Typically, if I was just flipping frames, I would use the sliders to make each frame appear in its own time (dark green in timeline), and shorten the entire time frame. To make the file more nimble would also make the image size smaller than originals (4000+px) to say 500px, after doing some cropping to address blank spots created by the image alignment. This is how I would have done the gif if I was flipping the frames, which creates more of the repeated jerky motion of many of these.:

(click for full size)

But in this case, there were some shifting in the background lights I did not like, si I decioded to use some layers, and remove everything from the top frame (which is the second image where the blink occurs, essentially isolating just the part of the image that is different. People who really know their way around PhotoShop would do it with a Layer Mask; I simply used the Lasso selection tools, soem feathering, and taking out everything BUT the eyes. I shifted the timeline so the eyes appeared at the end, and for a short duration. If you move the slide, you can see what is being displayed at that point in the animation.

(click for full size)

(click for full size

In this animation, then really the only motion is the addition of the eye movement, the other image is the background and set up frame.

In saving the file (via File -> Save for Web & Devices) be sure to save as GIF, and set the repeat in the bottom menu to be Forever. I set it for 236 colors and no dithering, to keep the quality high. The final GIF weighs in at only 66k.

This is my always refining method approach to doing better animated GIF. I want to get even better at isolating the motion to smaller bits.

The Eyes have it.

UPDATE (Jan 1 2011): I should have mentioned that you should resize your final GIF image to the dimensions you plan to post to your blog; for example, the standard size for my current template is 500px wide that will fit in the column. If you are using WordPress, be sure to embed the version/size that matches the original- if you allow WordPress to resize, it will make a JPG image out of it, and thus, lose ll animation. You don’t want that, your eyes would be sad.

Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.


Leave a Reply

Your email address will not be published. Required fields are marked *