The document discusses the history and techniques of typography in motion graphics. It begins with the development of posters and changes in design, then describes early motion devices like zoetropes. Traditional animation techniques are outlined including cell animation. Contemporary techniques incorporate computer generated imagery, virtual and augmented reality. A variety of software programs and mobile apps are also reviewed for creating typography animations.

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