department of communication design comd 2427 … · kinetic typography is different from static...
TRANSCRIPT
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/
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.
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
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
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
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
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
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
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
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