Kinetic typography—the technical name for “moving text”—is an animation technique mixing motion and text. This text is presented over time in a manner intended to convey or evoke a particular idea or emotion. It is often studied in Communication Design and Interaction Design courses. Some commonly seen examples of this technique include movie title sequences and credits, web page animation and other entertainment media.
Goal
To introduce class to current kinetic typographical methods. Discuss current examples and practices in animated typography. Create a kinetic typographical piece using methods researched and discussed in class.
Project
Animate a conversation, song, or dialogue using
Typography and or typographical glyphs.
Explore and experiment with elements of your text .
Spacing, scale, color. Etc. How are these elements experienced over time? What words are important? How will you illustrate this?
Don’t forget to PLAY!
Materials:
-Text edit or “Word”
-Adobe illustrator
-Adobe Aftereffects
-Adobe Flash
Max size of 800 x 600 pixels
Final project to be posted on youtube gra 422 group site
http://www.youtube.com/gra422.
Suggested Reading
Kinetic Typography Tutorial
A step-by-step video, provided by crookedgremlins.com, outlining how to create your own kinetic typography animations.
http://www.vimeo.com/1271357
Typography In Motion
http://www.smashingmagazine.com/2007/11/19/monday-inspiration-typography-in-motion/
What is Kinetic Typography
http://www.cs.cmu.edu/~johnny/kt
Project III Schedule
10-28 Submit audio and text
10-30 Illustrator layout complete
11-4 First third due in class
11-6 Second third due
11-11 Composition refinement.
11-13 Final composition due. Class cri
]]>Click on “Creating an XHTML document”
This is a great explanation of the basic structure of an xhtml document.
Login to Lynda.com
]]>2. Build a “YouTube Embedded” or “YouTube Chromeless player”.
]]>
Environment must have the following elements:
Background, header, footer, content, a embed flash object.
*All content text must be in html or xml format. Styled w css ( i.e. external from flash)
(You can use xml to import your text into flash if you choose.)
Content for your video environment
(Not included in the video)
- 1-2 paragraphs of text (can be greek text or lorem ipsum if you choose)
- 2 bulleted lists
- A privacy and copyright statemen
Choose one of the following:
- 1. Create a 15 – 30 sec. abstract sequence about any or all of the following:
Time, Motion, Change. - 2. Create a 15 – 30 sec. sequence for a fictional product.
- 3. Recreate a 15-30 sec sequence for an existing produ
9-18 Content, wireframes, video sketches, and mood boards. Due.
•css div structure. How it applies to wireframes
9-23 Refined Photoshop Sketches of web page and first video draft due.
•Small 6-8 group class Crit. Work day when not in crit.
9-25 Photoshop comps Refined Video Due
•Start web page build. Start on flv player
9-30 Prototype of flash player or embeded flash piece due.
•Work day- possible video crit.
10-2 Production – progress due
•Embedding flash objects
10-7 Flash Prototypes Due.
•Work day - small group crit.
10-9 Refinement From Crit Due
•Lecture
10-14 Design Prototypes Due.
•Work day- midterm review
10-16 Project Complete.
•Projects I and II Work and source files Collected
“Hello world”
- Create a 640 x 480 pixel video clip that includes the words “Hello World” that is no longer than 15 seconds.
- Sign up for a YouTube account.
- Join the YouTube group gra 422 (http://www.youtube.com/group/gra422)
- Add you video to the group. (upload your video to the group)