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. 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 a timed slideshow, or a short animation with sequential drawings
- 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
- 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.
- 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:
Previous Student Work Samples:
