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. Check out Fluxmachine for inspiration.
What is a Cinemagraph? A Cinemagraph is just a fancy digital photography 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). 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.
 |
This cinemagraph is made from the frames of a movie and has a very short loop of just the eyes blinking...
|
 |
This Cinemagraph was created by a photography student in Mr.Wilson's Digital Photography Class at SCHS
|
Gif Assignment:
Part A
- Create an animated gif, you can use photographs to make an animation, or a short animation with sequential drawings on paper. You can use found images as well or even short video clips. Think of something simple for the first example... just use your imagination and use this opportunity to become familiar with the gif process
- Follow the instructions below as a rough guide only. There are several ways to make animated gifs in photoshop. Try a google search and you will find many tutorials and different techniques
- This is just a quick project to get you used to creating gifs, make sure they are short, not too big in file size and loop forever. Use the Save For Web dialog box in Photoshop to adjust the file size and dimensions
- This Gif should have at least 10 frames of animation
Part B
- Create a longer animation this time that loops perfectly. Try creating a character and animating them, you can use photos or cartoons or draw your own with the brush tool in photoshop, just create individual frames of animation as layers, 1 layer per frame... then you can use the layers to frames option in the animation palette sub-menu.
- You can use 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 some video files
- Try creating 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.
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 with the layer palette 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
- Open the Animation Palette and click on it's Sub-Menu and then 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:
Previous Student Work Samples:
