Project 3: Assignment 7 Due Oct 19 Typography in Motion

Transcription

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 Class Openlab Page: Dropbox: DUE NEXT WEEK: 1. Select a short quote you will animate Start concept sketches 2. Type Research: Find examples of simple type in motion post two examples to course site Name new post last_name_first_name Project 3 Post links into that post 3. First rough concepts sketch Bring examples, concept sketch and any native files to 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 artwork for 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. 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.. Project 3: Assignment 7 Due Oct 19 Typography in Motion Develop typography in motion Select a short quote that you will animate using eir Photoshop animated GIF or InDesign References /Class Pintrest Pages Class Dropbox folder Vimeo Motion Type Section Animation InDesign create-animations-using-adobe-indesign/ html Annimated GIF Photoshop create-animated-gifs-with-photoshop/ 1

2 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 Class Openlab Page: Dropbox: Project 3: Assignment 7 Due Oct 19 Typography in Motion Develop typography in motion Select a short quote that you will animate using eir Photoshop animated GIF or InDesign Quotations you could choose from or select your own 001gtlrmj1d33dijr521ai81433kk I can, refore I am.» Simone Weil Write something worth reading or do something worth writing. jamin Franklin Be exeption done is better than well said jamin 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

3 COMD 2427 Typographic Design III Animated GIF (Photoshop) 738 x 90 pixels / RGB We will create an an animated GIF banner. We We will will be be able able to to see see end end results directly on on a browser. Create a new Photoshop file Create a new Photoshop file x 90 x pixels 90 pixels 72 dpi 72 dpi Color Color mode: mode: RGB RGB

4 COMD 2427 Typographic Design III Animated GIF (Photoshop) 738 x 90 pixels / RGB Start Start building building your your layers layers based based on on your your drawings. drawings. You You should should have have no no less less that that layers layers Arrange your layers from bottom up (Starting at bottom and up) Arrange your layers from bottom up (Starting at bottom and up)

5 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 m into timeline. Once all GO your to layers WINDOW>Timeline. are completed, and are in order, we will place m into timeline. GO to WINDOW>Timeline. In In center center of of Timeline> Timeline> Select Select Create Create Frame Frame Animation Animation And Double Click on top of it. This will place your design into timeline. And Double Click on top of it. This will place your design into timeline. Go to upper right menu (small triangle to right) Go to upper right menu (small triangle to right) Select > MAKE Select Frames > from Layers. This will place all your layers into timeline. They will MAKE be Frames placed in from order Layers. in This which will y place are all stacked your layers in into layers palette timeline. They will be placed in order in which y are stacked in layers palette

6 COMD 2427 Typographic Design III Animated GIF (Photoshop) 738 x 90 pixels / RGB Under each frame re is an option to change Under time each frame re will show/play. is an option Change to change this according time each to your frame animation will show/play. Change this according to your animation At At m m bottom bottom of of timeline timeline window window you you will will see word ONCE > > Change it it to to FOREVER Save your files. Then Then go go to to FILE FILE > > Save Save for for WEB WEB Save as GIF Save as GIF Make adjustments of colors if necessary. Make adjustments of colors if necessary. Hit DONE when completed Hit DONE when completed Drag GIF file into a browser Drag GIF file into a browser to to see see animation.

7 COMD 2427 Typographic Design III Basic Animation We Basic will Animation first look an animation toger. It is important to have all material ready and have a clear vision on how you We want will first this look animation at animation to be sequenced. toger. WE It is will important use InDesign to have Animation all material PRESETS ready and for this have assignment a clear vision on how you want this animation to be sequenced. WE will use InDesign Animation PRESETS for this assignment. Done! IS than Said! GO to GO WINDOW> to WINDOW> INTERACTIVE INTERACTIVE > ANIMATION > ANIMATION Done! IS Done! IS Select area that is going to show first in your animation, n name it (restaurant review), and under PRESET, give it an action. IN this case it is going Select to fly from area that left. is going to show first in your animation, n name,( ) and under PRESET, give it an action. IN this case it is going to fly from left. Select area that is going to show NEXT in your animation, Select n area name that is it going (BRONX), to show and NEXT in your under animation, PRESET, n give name it an it action. (), IN and this case it is going to fly from top. under PRESET, give it an action. IN this case it is going to fly from top.

8 COMD 2427 Typographic Design III than Said! Do same with or components of your animation. Do Keep same everything with or in components a logical order of and your organized. animation. I did Bronx, Keep everything Brooklyn, Manhattan, in a logical order Queens and now and organized. Staten Island place in m order in in which order y in will appear on my animation. which y will appear. I will also have words restaurant reviews to fade out and I will TASTE have 5 logo last to image fade in fade at in end at end (see animation (see animation for this for step). this step). Go to INTERACTIVE > and have TIMING panel accessible. Go to INTERACTIVE > and have TIMING panel accesible. Here you will see order in which your animation Here you will is sequenced. see order At any time you can in which hit your PREVIEW animation is sequenced. At any time you can hit PREVIEW SAVE files! When you are satisfied with SAVE files! When you are preview, n FILE> EXPORT satisfied with preview, n FILE> EXPORT Done! IS than Said!

9 COMD 2427 Typographic Design III Save your file > n EXPORT > Under FORMAT choose FLASH FLASH PLAYER PLAYER (SWF) (SWF) Under GENERAL, make sure that you you check Generate HTML and VIEW SWF after Exporting. Choose or options if necessary. Choose or options if necessary. Animation will now open in BROWSER Animation will now open in a BROWSER