Typography in Motion

Select a short quote that you will  animate using either InDesign or  Photoshop 

Uploads of final type in motion files and PDF of casebook; explain your work; research and concept as related to research and your design choices.

Motion  
Type Research:

Find examples of motion typography
Select a short quote you will animate sample you could choose from follow
Start concept sketches
Bring examples, concept sketch and any  native files to class

Specifications:

I. Bring ALL native files to class

You will work in class to refine project. Bring  file as well as your casebook native files. Y

II. Upload to  Google Drive Project 4 Folder

A. Create  a NEW FOLDER
your  “Lastname_FirstName_Project 4”

B. Final version of your type in motion project
Name file:  “lastname_firstname_p4.swf” or  “lastname_firstname_p4.html”  “lastname_firstname_p4gif”
C. A Digital Casebook File
For this project you will ONLY upload a digital casebook. With all related materials: page one; brief description page two; final concept board, concept sketches, reference etc.  Document does not have to be a designed document but should reflect your design process. Must be saved as  a PDF.
Name Casebook  file:  “lastname_firstname_pcb_4.PDF”

Design Process

The animation should be no shorter than 15 seconds and no longer than 60 seconds.

1. STORYBOARD –
The first step rough sketch or storyboard a sequence of panels showing main steps. You are showing what is going to happen in main steps. The drawings don’t have to be great, just clear.

2. CREATE DIGITAL ASSETS –
Create the artwork for the steps that is to be animated.

3. PRODUCTION
Use  InDesign  or Photoshop

I. Research & Discovery
Reference: Do online research
Get a job folder to  place all research, sketches reference and related items.

II. Storyboarding and Conceptualizing
Do a brainstorming activity and idea to generate ideas for your design concept. Using your research, graphic and conceptual sources, begin designing.
Create concepts. These should be quick sketches that highlight a concept/idea.

Design Resources

2427_StoryBoard

Creative Brief Sample

Reference 

Class Pintrest Page

Related Videos

Word as Image

Vimeo Type

Kinetic type Channel

Art of the Movie Title

Kinetic Type Examples

Day O Kinetic

Kinetic Typography Resources

Animation InDesign

InDesign basics

adobe.com/contentcorner

InDesign: Creating Animations

Animated GIF  Photoshop

Fade in/out GIF
fadein out animated GIF

Animated Loading GIFs

Animated GIF  Tween

LYNDA.COM

play list  animation  Brooklyn Public Library

Quotations 

choose from or select your own

“I can, therefore I am.” » Simone Weil

Write something worth reading or do something worth writing.
Benjamin Franklin

Be the exception

Well done is better than well said
Benjamin Franklin

I walk slowly but I never walk backwards
Abraham Lincoln

“I hear and I forget, I see and I remember. I do and I understand.”

“Wherever you go, go with all your heart.” » Confucius

“Everything you can imagine is real.” » Pablo Picasso

“Do what you can, with what you have, where you are.” » Theodore Roosevelt

“Eighty percent of success is showing up.” » Woody Allen

“Never, never, never give up.” » Winston Churchill

“The best revenge is massive success.” » Frank Sinatra

“If you dream it, you can do it.” » Walt Disney

Typography in Motion

Final Due Last Class
Upload to Google Drive

Select a short quote or verb that
You will animate using either Photoshop animated GIF or InDesign
No imaging only typography

DUE Next week

Storyboard

Storyboard initial sketches and bring in print out of storyboard.

Digital Assets

Create any initial digital assets for this project.

Native Files

Bring any native files to class we will work in class

2427_StoryBoard

Type in Motion
Kinetic typography is different from static typography

Assignment: Visually represent your selected quote or verb by expressing the content with typographic elements.
Consider variables and spoken word as it related to your animation
Variables:
typeface, type size, weight, color, focus, orientation, location;
entrance, performance, exit; sequence, speed, transition, transformation,
emotion, feeling, atmosphere, interpretation.
Read your copy out loud, hear how it sounds Then think about sounds, any breaks or pause in pronunciation. you can work from that to visualize your text.

______

Design Process

The animation should be no shorter than 15 seconds and no longer than 60 seconds.

1. Select a short quote, a verb or noun, you will animate. Start concept sketches

2. Type Research: Find examples of simple type in motion
Get a job folder to  place all research, sketches reference and related items.

3. STORYBOARD –
The first step rough sketch or storyboard a sequence of panels showing main steps. You are showing what is going to happen in main steps. The drawings don’t have to be great, just clear.

4. CREATE DIGITAL ASSETS –
Create the artwork for the steps that is to be animated.

5. PRODUCTION
Use  InDesign  or Photoshop

6.  Bring any native files to class
You will work in class to refine project. Bring  file as well as your casebook native files.

Final

Upload to  Google Drive Folder
 Project 4 Google Drive
A. Create  a NEW FOLDER
your  “Lastname_FirstName_Project 4”

B. Final version of your type in motion project
Name file: “lastname_firstname_p4.gif”
“lastname_firstname_p4.swf” or  “lastname_firstname_p4.html”

Quotations you could choose from or select your own

“I can, therefore I am.” » Simone Weil

Write something worth reading or do something worth writing.
Benjamin Franklin

Be the exception

Well done is better than well said
Benjamin Franklin

I walk slowly but I never walk backwards
Abraham Lincoln

“I hear and I forget, I see and I remember. I do and I understand.”

“Wherever you go, go with all your heart.” » Confucius

“Everything you can imagine is real.” » Pablo Picasso

“Do what you can, with what you have, where you are.” » Theodore Roosevelt

“Eighty percent of success is showing up.” » Woody Allen

“Never, never, never give up.” » Winston Churchill

“The best revenge is massive success.” » Frank Sinatra

“If you dream it, you can do it.” » Walt Disney

References  Class Pintrest Page samples
http://pin.it/17K6YhS

https://www.youtube.com/watch?time_continue=6&v=J59n8FsoRLE

Vimeo motion Type Section
https://vimeo.com/channels/kinetictypography
http://www.artofthetitle.com/title/oceans-eleven/#
http://www.creativebloq.com/typography/examples-kinetic-typography-11121304

https://www.creativebloq.com/typography/examples-kinetic-typography-11121304

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

http://blogs.adobe.com/contentcorner/2016/12/22/create-animations-using-adobe-indesign/
Annimated GIF  Tween fade between fades
https://helpx.adobe.com/indesign/using/animation.html

Annimated GIF  Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

Fade In & Fade Out an Animated .GIF in Photoshop

Animated GIF  Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

Fade in Fade Out  Animated GIf

https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

http://blogs.adobe.com/contentcorner/2016/12/22/create-animations-using-adobe-indesign/
https://helpx.adobe.com/indesign/using/animation.html

Combining Multiple animation effects InDesign

References  Class Pintrest Page samples
http://pin.it/17K6YhS

Vimeo motion Type Section
https://vimeo.com/channels/kinetictypography

https://giphy.com/search/kinetic-typography

http://www.creativebloq.com/typography/examples-kinetic-typography-11121304

http://www.artofthetitle.com/title/oceans-eleven/#

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

Create animations using Adobe InDesign

https://helpx.adobe.com/indesign/using/animation.html

Annimated GIF  Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk

Save

Typography in Motion

Final Due May 22
Uploaded to Google Drive by 12pm

DUE May 15
Refine your typography in motion based on in class crit and work from May 7 class.

Bring any native files to class we will work in class.

Final Upload DUE May 22 12pm uploaded to Google Drive

Select a short quote or verb that
you will animate using either Photoshop animated GIF or InDesign|No imaging only typography

Storyboard

IND PS Motion How to

Type in Motion
Kinetic typography is different from static typography, and those differences are explored
with this project.
Assignment: Visually represent your selected quote or verb by expressing the content with typographic elements sequenced.
Consider the variables listed below, as well as the relationship of the spoken word to the
visible and dynamic word.
Some Variables:
typeface, type size, weight, color, texture, focus, orientation, location;
entrance, performance, exit; sequence, speed, pacing, transition, transformation,
emotion, feeling, atmosphere, interpretation.
Read your quote out loud several times to hear how it sounds.
Visualize the sequence of sounds and pauses, and explore various ways to visualize what
you hear.

______

I. Design Process
The animation should be no shorter than 15 seconds and no longer than 60 seconds.

1. Select a short quote, a verb or noun, you will animate. Start concept sketches

2. Type Research: Find examples of simple type in motion
Get a job folder to  place all research, sketches reference and related items.

3. STORYBOARD –
The first step rough sketch or storyboard a sequence of panels showing main steps. You are showing what is going to happen in main steps. The drawings don’t have to be great, just clear.

4. CREATE DIGITAL ASSETS –
Create the artwork for the steps that is to be animated.

5. PRODUCTION
Use  InDesign  or Photoshop

6.  Bring any native files to class
You will work in class to refine project. Bring  file as well as your casebook native files. You will upload them by the end of class

II. Final will be Upload to  Google Drive Folder
 Project 4 Google Drive
A. Create  a NEW FOLDER
your  “Lastname_FirstName_Project 4”

B. Final version of your type in motion project
Name file: “lastname_firstname_p4.gif”
“lastname_firstname_p4.swf” or  “lastname_firstname_p4.html”

Quotations you could choose from or select your own

“I can, therefore I am.” » Simone Weil

Write something worth reading or do something worth writing.
Benjamin Franklin

Be the exception

Well done is better than well said
Benjamin Franklin

I walk slowly but I never walk backwards
Abraham Lincoln

“I hear and I forget, I see and I remember. I do and I understand.”

“Wherever you go, go with all your heart.” » Confucius

“Everything you can imagine is real.” » Pablo Picasso

“Do what you can, with what you have, where you are.” » Theodore Roosevelt

“Eighty percent of success is showing up.” » Woody Allen

“Never, never, never give up.” » Winston Churchill

“The best revenge is massive success.” » Frank Sinatra

“If you dream it, you can do it.” » Walt Disney

References  Class Pintrest Page samples
http://pin.it/17K6YhS

https://www.youtube.com/watch?time_continue=6&v=J59n8FsoRLE

Vimeo motion Type Section
https://vimeo.com/channels/kinetictypography
http://www.artofthetitle.com/title/oceans-eleven/#
http://www.creativebloq.com/typography/examples-kinetic-typography-11121304

https://www.creativebloq.com/typography/examples-kinetic-typography-11121304

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

http://blogs.adobe.com/contentcorner/2016/12/22/create-animations-using-adobe-indesign/
Annimated GIF  Tween fade between fades
https://helpx.adobe.com/indesign/using/animation.html

Annimated GIF  Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

Fade In & Fade Out an Animated .GIF in Photoshop

Animated GIF  Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

Fade in Fade Out  Animated GIf

https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

http://blogs.adobe.com/contentcorner/2016/12/22/create-animations-using-adobe-indesign/
https://helpx.adobe.com/indesign/using/animation.html

Combining Multiple animation effects InDesign

References  Class Pintrest Page samples
http://pin.it/17K6YhS

Vimeo motion Type Section
https://vimeo.com/channels/kinetictypography

https://giphy.com/search/kinetic-typography

http://www.creativebloq.com/typography/examples-kinetic-typography-11121304

http://www.artofthetitle.com/title/oceans-eleven/#

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

Create animations using Adobe InDesign

https://helpx.adobe.com/indesign/using/animation.html

Annimated GIF  Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Project 4 FINAL
Typography in Motion
Develop typography in Motion

Final Due the end of last class

Select a short quote or verb that
you will animate using either Photoshop animated GIF or InDesign

No imaging only typography

Assignment Spec Sheet

Storyboard

IND PS Motion How to

Type in Motion
Kinetic typography is different from static typography, and those differences are explored
with this project.
Assignment: Visually represent your selected quote or verb by expressing the content with typographic elements sequenced.
Consider the variables listed below, as well as the relationship of the spoken word to the
visible and dynamic word.
Some Variables:
typeface, type size, weight, color, texture, focus, orientation, location;
entrance, performance, exit; sequence, speed, pacing, transition, transformation,
emotion, feeling, atmosphere, interpretation.
Read your quote out loud several times to hear how it sounds.
Visualize the sequence of sounds and pauses, and explore various ways to visualize what
you hear.

______

I. Design Process
The animation should be no shorter than 15 seconds and no longer than 60 seconds.

1. Select a short quote, a verb or noun, you will animate. Start concept sketches

2. Type Research: Find examples of simple type in motion
Get a job folder to  place all research, sketches reference and related items.

3. STORYBOARD –
The first step rough sketch or storyboard a sequence of panels showing main steps. You are showing what is going to happen in main steps. The drawings don’t have to be great, just clear.

4. CREATE DIGITAL ASSETS –
Create the artwork for the steps that is to be animated.

5. PRODUCTION
Use  InDesign  or Photoshop

6.  Bring any native files to class
You will work in class to refine project. Bring  file as well as your casebook native files. You will upload them by the end of class

II. Final will be Upload to  Google Drive Folder
 Project 4 Google Drive
A. Create  a NEW FOLDER
your  “Lastname_FirstName_Project 4”

B. Final version of your type in motion project
Name file: “lastname_firstname_p4.gif”
“lastname_firstname_p4.swf” or  “lastname_firstname_p4.html”

Quotations you could choose from or select your own

“I can, therefore I am.” » Simone Weil

Write something worth reading or do something worth writing.
Benjamin Franklin

Be the exception

Well done is better than well said
Benjamin Franklin

I walk slowly but I never walk backwards
Abraham Lincoln

“I hear and I forget, I see and I remember. I do and I understand.”

“Wherever you go, go with all your heart.” » Confucius

“Everything you can imagine is real.” » Pablo Picasso

“Do what you can, with what you have, where you are.” » Theodore Roosevelt

“Eighty percent of success is showing up.” » Woody Allen

“Never, never, never give up.” » Winston Churchill

“The best revenge is massive success.” » Frank Sinatra

“If you dream it, you can do it.” » Walt Disney

Animated GIF  Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

Fade in Fade Out  Animated GIf

https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

http://blogs.adobe.com/contentcorner/2016/12/22/create-animations-using-adobe-indesign/
https://helpx.adobe.com/indesign/using/animation.html

Combining Multiple animation effects InDesign

References  Class Pintrest Page samples
http://pin.it/17K6YhS

Vimeo motion Type Section
https://vimeo.com/channels/kinetictypography

https://giphy.com/search/kinetic-typography

http://www.creativebloq.com/typography/examples-kinetic-typography-11121304

http://www.artofthetitle.com/title/oceans-eleven/#

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

Create animations using Adobe InDesign

https://helpx.adobe.com/indesign/using/animation.html

Annimated GIF  Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk

Save

Save

Save

Save