CIA FND DAD01 : Project 5

CIA FND Digital ARTS 01 : Project 5 : GIF Animation in Adobe’s ImageReady

Create a 15 or 30 second GIF Animation utilizing Adobe ImageReady and Photoshop. NEW FEATURE: Photoshop CS2+ has animation pallette available in that program also. ImageReady works directly with Photoshop to provide additional tools to create and publish content for the web and add animation to your designs and layouts.

• Part 1 : Research 5 or more GIF Animations on the web and share with class.
• Part 2 : Develop sketches (characters, objects, etc.) that you wish to animate in sketchbook to work out any design or animation challenges. Utilizing Tracing Paper is highly encouraged to work with Onion Skinning techniques. Thumbnail sketches are required, and will be graded.
• Part 3 : Create finalized images of the same proportion and import these assets into separate layers of a Photoshop document. Utilize proper layer naming conventions and transfer the image to ImageReady.
• Part 4 : Animate Background & Foreground Elements position, scale, effects, opacity and other key frame-able attributes.
• Part 5 : Complete 15 to 30 seconds of Animation. Review the Timing and Visual Attributes. Decide if you could make any adjustments to make the animations more dynamic.
• Part 6 : Export smaller resolution / compressed GIF files from ImageReady to preview the animation in a web browser to ensure the playback smoothly and meet your artistic demands. Save optimized as a .GIF and Goto File>Export>Save HTML. To preview the document in a web page.

: Class Exercises :

• Transfering Media from Photoshop to ImageReady with the P.S.>I.R. Button (located in toolbar).
• Utilizing Photoshop Actions to batch process opened files, folders and speed up your workflow.
• Combining multiple images to create panoramic backgrounds.
• Simple Animation Exercise.
• Adobe ImageReady Techniques.
• One on one help | Class worktime.

: Project Challenges :

Project Technical Specifications.

Work with standard video resolution (720 x 480 w 0.9 pixel aspect ratio for TV or 640 x480 w 1.0 pixel aspect ratio for Computer)

Your final animation can be in proportion to this original dimension. Working at a standard TV resolutions will provide the creative possibilities that you will demand. The Frames per Second (fps) or Frame Rate does not need to exceed 12 frames. Film = 24 fps. TV = 29.97 fps. Extra info : Sport shows are shot up to 60 fps, but only some HD TV sets can play 60 fps in either progress or interlaced playback.

Preview & test the animation and your optimization settings in a web browser, (Firefox). Test with the default optimization settings but save an optimized version of your project in addition to the ImageReady Master PSD.

Project Artistic Specifications

Utilize Key Animation Components. Frame Sequences & Timing & Frame by Frame Animation. (Turning On & Off Layers at Specific Times)

Position Tween (Artwork changes position in between key frames)

Opacity Tween. Layer Effect Tween.

Animating Masking. Blending Pixel Data.

Selecting Multiple Frames. Duplicating Multiple Frames (Drag onto New Frame Icon) Work Gestural if the animation will be illustrated. Consider the benefits of creating a looping animated GIF. Could a looping animation be used for the web or TV?

Animation is currently undergoing a number of changes. 2D animation is being replaced by 3D animation. Flash Animation is approximately 10 years old. Aardman Animations clay animation “Wallace & Gromit” has turned into sucessful motion pictures. While animation is a changing field, characters and excellent storytelling are still King! While all of our previous projects have been designed to work as Prints this project will focus on final delivery thru a computer monitor.
Think outside of the box: The principals of animation can apply to a variety of project types ranging from web banners to TV text based animations. Timing, Composition and Forms are the key differences between a successful / expressive animation and a run of the mill animation. Students are encouraged to develop animation techniques that utilize a variety of methods including, hand drawn animations, photography based animations, stop motion based animations.

1. Project 5 : Part 1 (11/13/06 )
2. Project 5 : Gif Animation. Intro
3. Overview of Last assignments. GIF animation Intro 2.
4. ImageReady Introduction. Onion Skinning. Working with Animation.
5. Assignment 5: GIF Animation Part 1 Due.
6. Assignment 5: Part 2: Create your GIF animation. (11/20/06 )
7. GIF Animation Concepts & Ideas must be finalized and approved by instructor.
8. Gif Animations Work Week.
9. Final Project Discussion : Part 2 : Brainstorming ideas..
10. Discuss Final Project & Review Project Sheet.
11. Project 5 : Part 2 (due 11/27/06 )
12. Critique : Project 5 : Gif Animation.
13. Final Assignments: Work time. Meet with Greg about project ideas for final project.
14. Final Assignment : Visual Poetry / Narrative Design Focus Project.

Animation References :

http://www.animationlibrary.com/
http://www.animationfactory.com/

Learning Resources * Links:

http://www.insidegraphics.com/image_ready/default.asp
http://www.photoshoproadmap.com/Photoshop-tutorials/Animation-and-Interactivity/Most-popular/1/
http://www.graphicaddicts.net/forums/index.php/topic,550.0.html
http://www.myjanee.com/tuts/animation/animation.htm
http://www.virtualartroom.com/animation_IR_layers.htm
http://www.webreference.com/graphics/column9/index.html
http://www.greycobra.com/tutorials/making-an-animation-in-imageready/page-1.html
http://movielibrary.lynda.com/html/modPage.asp?ID=37