Typography and Motion Graphics Weeks 3&4
- 1. Typography & Motion Graphics Alexis Sansone sp.2016
- 2. Wk 1&2 History of typography in motion graphics Development of the Poster
- 3. Wk 1&2 History of typography in motion graphics What stands out? The use of bold, CAPITALIZED and italicized words and letters Different colors Different type faces
- 4. Wk 1&2 History of typography in motion graphics http://www.designishistory.com/design/motion- graphics Post- Modernism Designs
- 5. Wk 1&2 History of typography in motion graphics What has changed? New ideas are used to make designs more intricate. Introduction to combined Typography and graphics design for advertising
- 6. Wk 1&2 History of typography in motion graphics
- 7. Wk 1&2 History of motion graphics What is a motion graphic? Digital footage and/or animation technology to create the illusion of motion or rotation combined with audio for use in multimedia projects.
- 8. Wk 1&2 History of motion graphics The earliest forms of motion graphics: cave drawings -- represent motion of a story Motion graphics can be shown in the forms of art, photography, text or video One of the first successful devices for creating the illusion of motion was the thaumatrope
- 9. Wk 1&2 History of motion graphics A disk with a picture on each side is attached to two pieces of string When the strings are twirled quickly between the fingers the two pictures appear to blend into one due to the persistence of vision
- 10. Wk 1&2 History of motion graphics William George Horner invents the Zoetrope a 19th-century optical toy consisting of a cylinder with a series of pictures on the inner surface that, when viewed through slits with the cylinder rotating, give an impression of continuous motion. Example: Cartoon Network Bumpers - Magical Zoetrope
- 11. Wk 1&2 History of motion graphics Classical animation -- political caricatures and comic strips in newspapers and magazines 1910- Cell animation process was a major break through in figurative animation use of translucent sheets of celluloid for overlaying images. With this came Betty Boop, Terrytoons and Woody Wood Pecker
- 12. Wk 1&2 History of motion graphics Cell Animation Layering Process
- 13. Wk 1&2 History of motion graphics 1902- Stop Motion photography is used in George Melies film “A Trip to the Moon” Stop Motion Example Power Minion
- 14. Wk 1&2 History of motion graphics 1906- J. Stuart Blackton discovers that by exposing one frame of film at a time a subject can be manipulated between exposures giving the illusion of motion Humorous Phases of Funny Faces
- 15. Wk 1&2 History of motion graphics http://www.designyourway.net/blog/inspiration/some-of-the-best-kinetic-typography- examples/ Emily Cohl and Max Fleischer begin to mix live footage with hand-drawn elements. Experimental Animation turn of 20th century-- postwar industrial advances and changing social, economical, and cultural conditions throughout Europe fuel artist to reject classical representation Dadaist and Surrealist artists seek to overthrow traditional restraints by exploring the spontaneous and the irrational
- 16. Wk 1&2 History of motion graphics 1970- Frank & Caroline Mouris develop collage animation Animators begin to be brought onto feature films and mini films to create opening or closing animations Pink Panther Opening sequence, Loony Toons mini films Pink Panther Opening Motion Graphic
- 17. Wk 1&2 Typography within motion graphics http://designshack.net/articles/typography/kinetic-typography-an-introductory- guide How is Typography integrated in a motion graphic?
- 18. Wk 1&2 Typography within motion graphics When we think of motion graphics and animations the text size, shape and font lead us to assume and associate different things with the motion graphic Loony Toons Example
- 19. Wk 1&2 Typography within motion graphics Betty Boop gives a completely different atmosphere Betty Boop Example
- 20. Wk 1&2 Typography within motion graphics A leader in motion graphics and advancements in typography within motion graphics Mickey Mouse Example Disney Example
- 21. Wk 3&4 Contemporary Techniques and Technology https://vimeo.com/channels/kinetictypography How is motion graphic typography applied today?
- 22. Wk 3&4 Contemporary Techniques and Technology There’s hand drawn which requires a frame by frame drawing of the animated object. Calvin and Hobbes Flip Book
- 23. Wk 3&4 Contemporary Techniques and Technology http://www.makeuseof.com/tag/technology-explained-what-is-cgi-animation/ Drawn on film animation footage is developed by making the images directly onto the film stock
- 24. Wk 3&4 Contemporary Techniques and Technology Paint-on-glass animation Used for producing animated films Slow drying oil paints on sheets of glass gets manipulated
- 25. Wk 3&4 Contemporary Techniques and Technology Erasure animation Two-dimensional medium is used Involves photographing over time as the artist manipulates the image Example
- 26. Wk 3&4 Contemporary Techniques and Technology Pinscreen animation Uses a screen filled with movable pins that can be displaced in or out by pressing a thing onto the screen The screen is illuminated from the side in order to cast shadows by pins Example
- 27. Wk 3&4 Contemporary Techniques and Technology Sand animation The sand is moved around on a back lighted or front lighted piece of glass in order to make each frame for an animated film Christmas sand animation
- 28. Wk 3&4 Contemporary Techniques and Technology Computer Generated Imagery (CGI) 3D technology that allows animation to be put into a three dimensional world. Used often in films to make characters and objects seem real. MU Process Example
- 29. Wk 3&4 Contemporary Techniques and Technology http://www.motionmedia.org/informative-article-motion-graphics- software.html Computer Generated Imagery (CGI) Most common and currently used in features today
- 30. Wk 3&4 Contemporary Techniques and Technology Computer Generated Imagery (CGI) Used for full feature animation, sci-fi animation, live and animation mix Toy Story was the first feature length CGI animation. How Toy Story Changed Animation and CGI
- 31. Wk 3&4 Contemporary Techniques and Technology Do it Yourself Do it yourself techniques range from flip books to 2D on programs like After Effects to Maya. Many student animators learn animation through completing the entire process from hand-drawn to computer practices. Adobe After Effects Important to all motion graphics Takes images from Photoshop or Illustrator and allows them to move Most basic to complex animation process Alexis Sansone Basic After Effects Animation Advanced After Effects Short
- 32. Wk 3&4 Contemporary Techniques and Technology iPhone Apps FrameCast – Online Animation Studio for iPhones Cam Animate Stick Nodes (I’ve used and it is very simple but helps you understand the process) 3D World Apps List from Apple
- 33. Wk 3&4 Contemporary Techniques and Technology Virtual Reality the computer-generated simulation of a three-dimensional image or environment that can be interacted with in a seemingly real or physical way by a person using special electronic equipment, such as a helmet with a screen inside or gloves fitted with sensors.
- 34. Wk 3&4 Contemporary Techniques and Technology Augmented Reality a technology that superimposes a computer-generated image on a user's view of the real world, thus providing a composite view.
- 35. Wk 3&4 Contemporary Techniques and Technology http://i-media.soc.napier.ac.uk/Motion_Path/07005342/Article/07005342.html Examples Ratatouille Process After Effects Process iPhone Animation Awesome Virtual Reality and Augmented Reality Example