Thursday, March 9, 2017

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 frameUnfortunately 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 - Gif Animation Challenge:

  • Choose one of the subjects below to animate, BUT CHOOSE WISELY! :
    • A cat with bird wings is flying over a city and shooting lasers out of it's eyes
    • Godzilla is a DJ spinning records on a turntable in a dance club
    • Find a short video clip of a sword fight and replace the swords with Light Sabers
    • A celebrity/politician removes their face to reveal their actual reptilian face
    • A cute animal is using a computer, becomes frustrated and smashes computer
    • Create a seamlessly looping Cinemagraph using still images, video or found film source
    • Create a self portrait, your head opens like a trap door revealing a cat controlling your every move

    How do I Gif?

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: