department of communication design comd 2427 … · kinetic typography is different from static...

10
1 NEW YORK CITY COLLEGE OF TECHNOLOGY DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 Typographic Design III Sec. D210 • Fall 17 • Thur: 8:30 AM-11:00 AM Room: N-1118 Instructor: John Battista De Santis [email protected] Class Openlab Page: https://openlab.citytech.cuny.edu/desantistypographicdesign2427fall1d210/ Dropbox: https://www.dropbox.com/sh/nwb2cibzp6x7u6p/AADg8RnBrj91e-H1gwZf9iRia?dl=0 Project 3: Assignment 8 Due Oct 26 Typography in Motion Select a short quote that you will animate using either Photoshop ani- mated GIF or InDesign Final Due Nov 2 UPLOAD TO DROPBOX DUE NEXT WEEK: 1. Work on your motion typography. Create digital assets for this project. Bring native files to class we will work in class 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 refer- ence and related items. Create electronic casebook file with sketches, show research, reference etc. Can be a PDF or Word doc. 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.. References /Class Pintrest Pages http://pin.it/17K6YhS Class Dropbox folder https://www.dropbox.com/sh/kg8l9lpnk0qkhq1/AACNaNgNJHkKR2KgfZyeAZ7ua?dl=0 Vimeo Motion Type Section https://vimeo.com/channels/kinetictypography http://www.creativebloq.com/typography/examples- kinetic-typography-11121304 https://vimeo.com/69375692 http://www.artofthetitle.com/title/oceans-eleven/# https://vimeo.com/18499580 https://vimeo.com/47577648 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 Annimated GIF Photoshop http://blogs.adobe.com/contentcorner/2016/08/10/ create-animated-gifs-with-photoshop/

Upload: others

Post on 10-Jul-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 … · Kinetic typography is different from static typography, and those differences are explored with this project. Assignment: Visually

1

NEW YORK CITY COLLEGE OF TECHNOLOGYDEPARTMENT OF COMMUNICATION DESIGN

COMD 2427 Typographic Design III Sec. D210 • Fall 17 • Thur: 8:30 AM-11:00 AM Room: N-1118 Instructor: John Battista De Santis [email protected]

Class Openlab Page: https://openlab.citytech.cuny.edu/desantistypographicdesign2427fall1d210/

Dropbox:https://www.dropbox.com/sh/nwb2cibzp6x7u6p/AADg8RnBrj91e-H1gwZf9iRia?dl=0

Project 3: Assignment 8 Due Oct 26 Typography in MotionSelect a short quote that you will animate using either Photoshop ani-mated GIF or InDesign

Final Due Nov 2UPLOAD TO DROPBOXDUE NEXT WEEK:

1. Work on your motion typography. Create digital assets for this project. Bring native files to class we will work in class

Design ProcessThe 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 & DiscoveryReference: Do online researchGet a job folder to place all research, sketches refer-ence and related items. Create electronic casebook file with sketches, show research, reference etc. Can be a PDF or Word doc.

II. Storyboarding and ConceptualizingDo a brainstorming activity and idea to generate ideas for your design concept. Using your research, graphic and conceptual sources, begin designing..

References /Class Pintrest Pageshttp://pin.it/17K6YhS

Class Dropbox folder

https://www.dropbox.com/sh/kg8l9lpnk0qkhq1/AACNaNgNJHkKR2KgfZyeAZ7ua?dl=0

Vimeo Motion Type Sectionhttps://vimeo.com/channels/kinetictypography

http://www.creativebloq.com/typography/examples-kinetic-typography-11121304https://vimeo.com/69375692http://www.artofthetitle.com/title/oceans-eleven/#https://vimeo.com/18499580https://vimeo.com/47577648

Animation InDesignhttps://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

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

Page 2: DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 … · Kinetic typography is different from static typography, and those differences are explored with this project. Assignment: Visually

NEW YORK CITY COLLEGE OF TECHNOLOGYDEPARTMENT OF COMMUNICATION DESIGN

COMD 2427 Typographic Design III Sec. D210 • Fall 17 • Thur: 8:30 AM-11:00 AM Room: N-1118 Instructor: John Battista De Santis [email protected]

Class Openlab Page: https://openlab.citytech.cuny.edu/desantistypographicdesign2427fall1d210/

Dropbox:https://www.dropbox.com/sh/nwb2cibzp6x7u6p/AADg8RnBrj91e-H1gwZf9iRia?dl=0

Project 3: Assignment 8 Due Oct 26 Typography in MotionSelect a short quote that you will animate using either Photoshop ani-mated GIF or InDesign

Final Due Nov 2UPLOAD TO DROPBOX

Type in MotionKinetic typography is different from static typography, and those differences are explored with this project.Assignment: Visually represent your selected quote by expressing the content with typographic elements sequenced.

Consider the variables below, and the relationship of the spoken words of your quote to the visible and dynamic word.

Some Variables:typeface, typesize, weight, color, texture, focus, orienta-tion, location;entrance, performance, exit; sequence, speed, pacing, transition, transformation, emotion, feeling, atmo-sphere, 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.

Page 3: DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 … · Kinetic typography is different from static typography, and those differences are explored with this project. Assignment: Visually

NEW YORK CITY COLLEGE OF TECHNOLOGYDEPARTMENT OF COMMUNICATION DESIGN

COMD 2427 Typographic Design III Sec. D210 • Fall 17 • Thur: 8:30 AM-11:00 AM Room: N-1118 Instructor: John Battista De Santis [email protected]

Class Openlab Page: https://openlab.citytech.cuny.edu/desantistypographicdesign2427fall1d210/

Dropbox:https://www.dropbox.com/sh/nwb2cibzp6x7u6p/AADg8RnBrj91e-H1gwZf9iRia?dl=0

Project 3: Assignment 8 Due Oct 26 Typography in MotionSelect a short quote that you will animate using either Photoshop ani-mated GIF or InDesign

Final Due Nov 2UPLOAD TO DROPBOX

Quotations you could choose from or select your own

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

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

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

Be the exeption

Well done is better than well saidBenjamin Franklin

I walk slowly but I never walk backwardsAbraham 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

Page 4: DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 … · Kinetic typography is different from static typography, and those differences are explored with this project. Assignment: Visually

Create a new Photoshop file

728 x 90 pixels72 dpiColor mode: RGB

We will create an animated GIF banner. We will be able to see the end results directly on a browser. We will create an animated GIF banner. We will be able to see the end results directly on a browser.

Create a new Photoshop file728 x 90 pixels72 dpiColor mode: RGB

COMD 2427 Typographic Design III Animated GIF (Photoshop)738 x 90 pixels / RGB

Page 5: DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 … · Kinetic typography is different from static typography, and those differences are explored with this project. Assignment: Visually

Start building your layers based on your drawings. You should have no less that 10 layers

Arrange your layers from the bottom up(Starting at the bottom and up)

Start building your layers based on your drawings. You should have no less that 10 layers

Arrange your layers from the bottom up(Starting at the bottom and up)

COMD 2427 Typographic Design III Animated GIF (Photoshop)738 x 90 pixels / RGB

Page 6: DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 … · Kinetic typography is different from static typography, and those differences are explored with this project. Assignment: Visually

Once all your layers are completed, and are in order, we will place them into the timeline. GO to WINDOW>Timeline.

In the center of the Timeline> Select Create Frame Animation

And Double Click on top of it. This will place your design into the timeline.

Go to the upper right menu (small triangle to the right)

Select >MAKE Frames from Layers. This will place all your layers into the timeline. They will be placed in the order in which they are stacked in the layers palette

Go to the upper right menu (small triangle to the right)Select >MAKE Frames from Layers. This will place all your layers into the timeline. They will be placed in the order in which they are stacked in the layers palette

Once all your layers are completed, and are in order, we will place them into the timeline. GO to WINDOW>Timeline.In the center of the Timeline> Select Create Frame AnimationAnd Double Click on top of it. This will place your design into the timeline.

COMD 2427 Typographic Design III Animated GIF (Photoshop)738 x 90 pixels / RGB

Page 7: DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 … · Kinetic typography is different from static typography, and those differences are explored with this project. Assignment: Visually

Under each frame there is an option to change the time each frame will show/play. Change this according to your animation

At them bottom of the timeline window you will see the word ONCE > Change it to FOREVER

Save your files.

Then go to FILE > Save for WEBSave as GIF

Make adjustments of colors if necessary.

Hit DONE when completed

Drag the GIF file into a browser to see animation.

Under each frame there is an option to change the time each frame will show/play. Change this according to your animationAt them bottom of the timeline window you will see the word ONCE > Change it to FOREVER

Save your files.

Then go to FILE > Save for WEBSave as GIF

Make adjustments of colors if necessary.

Hit DONE when completed

Drag the GIF file into a browserto see animation.

COMD 2427 Typographic Design III Animated GIF (Photoshop)738 x 90 pixels / RGB

Page 8: DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 … · Kinetic typography is different from static typography, and those differences are explored with this project. Assignment: Visually

Select the area that is going to show first in your animation, then name it (restaurant review), and under PRESET, give it an action. IN this case it is going to fly from the left.

Select the area that is going to show NEXT in your animation, then name it (BRONX), and under PRESET, give it an action. IN this case it is going to fly from the top.

We will first look at an animation together. It is important to have all material ready and have a clear vision on how you want this animation to be sequenced. WE will use InDesign Animation PRESETS for this assignment.

COMD2427 Typographic Design III | Prof. Giuliani

Basic Animation

GO to WINDOW> INTERACTIVE > ANIMATIONGO to WINDOW> INTERACTIVE > ANIMATION

Select the area that is going to show first in youranimation, then name ,( Ben) and under PRESET, give it an action. IN this case it isgoing to fly from the left.

Select the area that is going to show NEXT in youranimation, then name it (Well), andunder PRESET, give it an action. IN this case it isgoing to fly from the top.

Ben Frankin!

Ben Frankin!

Ben Frankin!

Well

Well

Done!

Done!

IS

IS

Better

Better

Well

Done!

ISBetter

than

Well

Said!

Basic AnimationWe will first look at an animation together. It is important to have all material ready and have a clear vision on how you want this animation to be sequenced. WE will use InDesign Animation PRESETS for this assignment

COMD 2427 Typographic Design III

Page 9: DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 … · Kinetic typography is different from static typography, and those differences are explored with this project. Assignment: Visually

Do the same with other components of your animation. Keep everything in a logical order and organized. I did Bronx, Brooklyn, Manhattan, Queens and now Staten Island in the order in which they will appear on my animation.

I will also have the words restaurant reviewS to fade out and TASTE 5 logo to fade in at the end(see animation for this step).

Go to INTERACTIVE > and have the TIMING panel accesible.

Here you will see the order in which your animation is sequenced. At any time you can hit the PREVIEW

SAVE files! When you are satisfied with the preview, then FILE> EXPORT

Better

than

Well

Said!

Ben Frankin!

Ben Frankin!

Well

Done!

ISBetter

than

Well

Said!

Do the same with other components of your animation. Keep everything in a logical order and organized. place them in the order in which they will appear.

I will have the last image fade in at the end (see animation for this step).

Go to INTERACTIVE > and have the TIMING panel accessible.

Here you will see the order in which your animation is sequenced. At any time you can hit the PREVIEW

SAVE files! When you are satisfied with the preview, then FILE> EXPORT

COMD 2427 Typographic Design III

Page 10: DEPARTMENT OF COMMUNICATION DESIGN COMD 2427 … · Kinetic typography is different from static typography, and those differences are explored with this project. Assignment: Visually

Save your file > then EXPORT > Under FORMAT choose FLASH PLAYER (SWF)

Under GENERAL, make sure that you checkGenerate HTML and VIEW SWF after Exporting.

Choose other options if necessary.

Animation will now open in a BROWSER

Save your file > then EXPORT > Under FORMAT choose FLASH PLAYER (SWF)

Under GENERAL, make sure that you checkGenerate HTML and VIEW SWF after Exporting.

Choose other options if necessary.Animation will now open in a BROWSER

COMD 2427 Typographic Design III