Alternative treatments in typography

Reference

Tomato

Motion studies – Michael Jackson

Exercises

Practical workshop for final assignment

More motion tweening

Motion guide

Mask layer

Today’s topics

Visualization of music

History of title sequence

Text and moving image

Reference

Exercises

Sample sound tracks

1. Track 1
2. Track 2
3. Track 3
4. Track 4

Sample video footages

1. Video 1
2. Video 2
3. Video 3
4. Video 4

RTHK design program

Basic motion design principles

Example movies

Flash introduction

Reference

Thaumatrope

Flip book

Len Lye

Line and cell animation

Stop motion animation

Rotoscoping

Exercises

Flash introduction

Rhythm visualization

Download the quicktime movie or flash video.

Sample text: 動L

Reference

www.w3schools.com

Web Typography

Exercises

Use HTML tags to layout this sample page.

Use CSS to further improve the layout of the previous page.

Use this sample page for image and text. See if we can achieve this version or this one.

Sample photos for the layout.

Common delivery platforms

Introduction to text in Flash

Reference

Embed font in HTML

Text Layout Framework in Flash

Exercises

Understand the web design work flow (without the server part).

1. Create an empty Flash movie.
2. Publish the swf file for the Flash movie.
3. Create an empty HTML page.
4. Include the swf into the HTML page.
5. Publish them if you have a website.

Use TEXT in a Flash movie.

1. Static text for title, label.
2. Dynamic text for output display.
3. Input text for interactive input from users.

Schedule

Review of the logo assignment

Introduction to Chinese calligraphy

Chinese typography fundamentals

Exercises

Layout one of the below Chinese poem with vertical text in Illustrator.

Layout another Chinese poem with experimental typography. Try also removing some parts of the characters such that you can still recognize the words.

Find one Chinese character. Use English alphabets to recreate the character. You can freely transform the English alphabets.

Sample Chinese poem 1

黃河遠上白雲間， 一片孤城萬仞山。
羌笛何須怨楊柳， 春風不度玉門關。

Sample Chinese poem 2

渭城朝雨浥輕塵， 客舍青青柳色新。
勸君更盡一杯酒， 西出陽關無故人。

Sample Chinese poem 3

君自故鄉來， 應知故鄉事。
來日綺窗前， 寒梅著花未。

Sample Chinese poem 4

相見時難別亦難， 東風無力百花殘。
春蠶到死絲方盡， 蠟炬成灰淚始乾。
曉鏡但愁雲鬢改， 夜吟應覺月光寒。
蓬萊此去無多路， 青鳥殷勤為探看。

Sample Chinese poem 5

露氣寒光集， 微陽下楚丘。
猿啼洞庭樹， 人在木蘭舟。
廣澤生明月， 蒼山夾亂流。
雲中君不見， 竟夕自悲秋。

Collection of the logo exercise

Film Show – Helvetica

Miscellaneous techniques for typography in Illustrator

Remember to bring back  your typographic journal that includes a number of good and bad typography examples.

Schedule

1. Review and present the typography journal
2. Logo design introduction
3. Live trace exercise
4. Transform the letters ‘abc’ or ‘ABC’ into any shapes you selected
5. Logo design examples
6. Abstraction and reduction exercise
7. Short film about John Maeda
8. Clock face re-design exercise (?)

Exercise material

Reference

El Lissitzky

Jan Tschichold

Josef Muller-Brockmann

Armin Hofmann

Odermatt & Tissi

Victor Moscoso

Saul Bass

Neville Brody

David Carson

Zuzana Licko

Edward Fella

Jonathan Barnbrook

Kyle Cooper

Topics

• A short review of well known typographers
• Exercise 1 – continued from last week (creative layout)
• Exercise 2 – continued from last week (text poster)
• Graphical text & visual poetry
• Exercise 3 – create a visual poetry from the 2 choices

Remarks

Remember to bring your typography journal next week to share with us your collection.

Exercise material

Sample poem for exercise

SHE WALKS IN BEAUTY

by: George Gordon (Lord) Byron (1788-1824)

She walks in beauty, like the night
Of cloudless climes and starry skies;
And all that’s best of dark and bright
Meet in her aspect and her eyes:
Thus mellow’d to that tender light
Which heaven to gaudy day denies.

One shade the more, one ray the less,
Had half impair’d the nameless grace
Which waves in every raven tress,
Or softly lightens o’er her face;
Where thoughts serenely sweet express
How pure, how dear their dwelling-place.

And on that cheek, and o’er that brow,
So soft, so calm, yet eloquent,
The smiles that win, the tints that glow,
But tell of days in goodness spent,
A mind at peace with all below,
A heart whose love is innocent!

GOD SAVE THE QUEEN

by Sex Pistols

God save the queen her fascist regime
It made you a moron a potential H-bomb!

God save the queen she ain’t no human being
There is no future in England’s dreaming

Don’t be told what you want don’t be told what you need
There’s no future no future no future for you

God save the queen we mean it man (God save window leen)
We love our queen God saves (God save… human beings)

God save the queen cos tourists are money
And our figurehead is not what she seems
Oh God save history God save your mad parade
Oh lord God have mercy all crimes are paid

When there’s no future how can there be sin
Were the flowers in the dustbin
Were the poison in your human machine
Were the future your future

God save the queen we mean it man
There is no future in England’s dreaming

No future for you no future for me
No future no future for you

Source text file for alignment exercise.

Source spreadsheet for form design exercise.

Topics

• Text alignment (continued from last week)
• Grid system
• Golden section
• Modular grid
• Form design
• Poster

Exercise 1

Illustrator text tool, with external text (download here)

Exercise 2

Expressive grid

Exercise 3

Text only poster for AVA information day

Exercise 4

Typography for spreadsheet

Reference