Mister Wilson's Digital Photography Class: New Assignment: Making Animated Gifs

Wednesday, May 22, 2013

New Assignment: Making Animated Gifs

Hello Students,

Your new assignment is an introduction to making animated Gifs, and harnessing your skills to create a more elaborate animation or a cinemagraph style gif.

What is an animated Gif?:
A Gif file is a web safe file format that has a cool feature, it can have different frames like a video, you can also change the playback speed and duration per frame. Unfortunately they can't have sound.You can do some really cool stuff with Gif's!

More examples:
http://fluxmachine.tumblr.com/

What is a Cinemagraph?:
A Cinemagraph is just a fancy digital media term for an animated Gif that has the appearance of a still image (graph) with small portions of the image appearing to be moving or appear to be animated (cinema) usually in a seamless or near seamless loop. Some Cinemagraphs will loop the animation constantly, some repeat with a delay to give the viewer a surprise when the photo they are looking at suddenly turns and looks back at them or blinks like the example below.

This cinemagraph is made from the frames of a movie and has a very short loop of just the eyes blinking... work has been done to create a still frame of the actor who was moving slightly, then the eyes were isolated and the motion removed with a motion tracking software tool. Finally the frames were isolated and reduced for a small file size and a delay set on the first frame of a few seconds.

Gif Assignment:

Part A

Create a simple frame by frame animation, use your creativity!
Create an animated gif, use the layers to frames method to create a simple frame by frame animation. Create at least 30 frames of animation.
Follow the instructions below as a rough guide only. There are several ways to make animated gifs in photoshop
This is just a quick project to get you used to creating gifs. The final gif must display on your blog full size in order for animation to work, so make sure the image size is small enough, perhaps around 500 pixels wide
When the animation is complete use the Save for Web feature in Photoshop. Set the file type to gid, adjust your colors and looping options and post to your blog when done

Part B

Create a longer animation this time that loops perfectly with a series of photographs or video footage. Follow the instructions further down this post for a guide.
For photos, use the Continuous Shooting mode on a camera for rapid fire shooting of frames. A Video camera on a tripod may also be used, photoshop can read video files although working with frames and video is different with photoshop
For a Cinegraph style animation Try to create an effect where just one part of the image is moving, such as eyes moving/blinking or the head turns and looks at the camera.
Check out http://fernandojbaez.com/cinemagraph-tutorial/ for tips on making cinemagraph style images.

How to make an animated Gif with Photoshop CS5:

Launch Photoshop
FILE / OPEN a new document at your desired size, I made mine at 200X180 Pixels. It's a good idea not to make Gif files too large, otherwise they can take along time to load over an internet connection.
Your animation can be a series of images, photos etc. You can hand draw each frame the animation also. The key is to set up separate layers that you will turn into frames of animation. Im using some pictures I took of my dog.

Click your top Layer, then while holding SHIFT click on your bottom Layer to select all layers
On your Animation Palette Sub-Menu select Make Frames From Layers
If you don't see individual frames in your Animation Palette, go to the Sub-Menu and select Convert To Frame Animation
You can now designate individual durations on each frame.
Go to FILE / SAVE FOR WEB AND DEVICES to export your animation as an animated Gif file. Make sure to set your looping options to forever.

Open your Gif file in a web browser to test it. Here's my result:

Cinemagraph Photoshop Process:

This is my Cinemagraph. My first frame of animation pauses for 5 seconds before animating.

Setup your frames of animation as Layers from the bottom up. The bottom Layer will be the first frame of animation

You should have 1 layer as the "still image" background and then your other animated layers above
On the Animation Sub-Menu choose "Convert to Frame Animation"

You can set durations here, but if you want to animate your layers go to the Animation Palette Sub-Menu and choose "Convert to Timeline"

Your layers are animated across the timeline, you can select a layer and change its opacity to be visible for a longer duration. Open a layer in the Animation Palette to see its animation attributes. You can adjust when certain layers are visible in your animation frames here. Look at the keyframes in the Opacity value.