Embedded Files
Due: Tuesday, February 22
Due: Tuesday, February 22
Upload your completed GIF and .psd document to the Shape Animation folder on the Google Drive. Also add your GIF to your website.
WIP Deadline: Tuesdsay, February 15 >> Turn in storyboard and WIP animation via your blog by the end of class
Create a looping keyframe animation (~10 seconds) using only shapes, lines, textures, and patterns. This limitation is meant for you to focus your creative attention on the possibilities of movement, scale, transformation, and multiplicity of shapes.
Advanced students: You'll be doing essentially the same thing (although Sam, you feel free to work in After Effects). I'm looking for a more advanced approach to composition and movement and a cohesive design.
"Looping" means that the timeline begins and ends at the same place, with all of the elements in the same position so that the action is seamless when the timeline is repeated. Your animation should consider the entire composition, and how the different elements interact with each other. They might form a pattern, as in Pes' Fireworks , or scroll through the frame in the same direction but at different speeds and with varied secondary movements, as in the Shapes.gif below. Whatever you decide, the movement should not appear random, but motivated and coherent.
Requirements:
Requirements:
You should have at least one example of animated size, position, and rotation properties.
Create differences in texture within the shapes - or create shapes from textures!
The animation should begin and end with the same frame so the action seamlessly loops.
There should be at least two elements whose action begins and ends at different times, so all actions don't begin at the first frame and end on the last. Another way to say this: Proper consideration should be given to timing: some elements should move faster or slower than others.
Use layers to create the illusion of elements being in front of or behind other elements.
Work from a consistent color palette.
Suggestion (not required): consider creating complexity by duplicating and offsetting movement.
Technical Specifications:
Technical Specifications:
Photoshop Settings: 800 x 600 px, 150 dpi, RGB color
Frame Rate: 24 fps
When finished, export your animation from Photoshop as a .gif: navigate File > Save for Web (legacy); in the next screen make sure field is set to "forever." Then press the Save button and navigate to the location you want to save the .gif.
Inspiration:
Inspiration:
Insa's gif-itit
John Whitney, Matrix III
Symphonie Diagonale, Viking Eggeling
Animation Attempts by Alma Arrollo
Oskar Fischinger, An Optical Poem
Composition in Red, Tendril Studio
Student Work
Student Work
Tony Rayo
Report abuse