Typography in Motion Project 3: Final Due Nov 2

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: Typography in Motion Project 3: Final Due Nov 2 UPLOADED TO DROPBOX BY END OF CLASS Select a short quote that you will animate using eir Photoshop animated GIF or InDesign You will be graded on: typography, concept, technique and following instructions. DUE AT THE END OF CLASS NOV 2: 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. A. BRING ALL NATIVE FILES TO CLASS You will work in class to finalize your project. Bring file as well as your casebook native files. You will upload m by end of class B. UPLOAD TO DROPBOX PROJECT 3 FOLDER C. CREATE A NEW FOLDER Named Lastname_FirstName_Project 3 D. FINAL VERSION OF YOUR TYPE IN MOTION PROJECT Name file: lastname_firstname_p3.swf or lastname_ firstname_p3.html lastname_firstname_p3.gif E. 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_3.pdf DESIGN PROCESS The animation should be no shorter than 15 seconds and no longer than 60 seconds. References: Class Pintrest Pages 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. 2. CREATE DIGITAL ASSETS Create artwork for steps that is to be animated. Vimeo Motion Type Section Animation InDesign 3. PRODUCTION Use InDesign or Photoshop 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. Annimated GIF Photoshop

2 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

3 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)

4 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

5 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.

6 Photoshop GIF Fade 1. Set up your animation frames in Timeline palette (known as Animation palette in versions prior to CS6). 2. Select animation frame that you want to start fade effect. In Timeline palette menu (found under this button at top right corner of palette:, click Tween 3. In box that pops up, make sure Tween With: Next Frame is chosen, so that frame you selected will fade into following frame. Under Frames to Add pick number of new frames you want to add in between current frame and next frame. A larger number will make a smoor transition, but will result in a bigger file size. Make sure All Layers is chosen, and at least Opacity is checked. Click OK New frames will be added in between frame you selected and following frame. The opacity of each layer is gradually transitioned from 100% to 0% and 0% to 100% respectively. This provides a good start, but one problem with this is that you can see underlying transparency in newly added frames, which will artificially brighten image since re is no background layer. This is not what we want. Instead, we want initial frame to have an opacity of 100% over course of tween, as following frame gradually fades in. This can be manually edited for each frame in Layer palette, but let s avoid doing so: 4. In Timeline palette menu, uncheck New Layers Visible in All Frames 5 Click on your original initial frame to select it. Shift+Click last of newly added in between frames. This will select all of in between frames, while still leaving initial frame as main selected frame, which is important for next step. 6. In Layer palette, right click on layer corresponding to image in initial frame (it should have 100% opacity). Click Duplicate Layer and n OK. This will copy your initial frame image to each of in between frames at 100% opacity, which will make it appear that next frame is fading in. 7. Change timing of each frame if needed, click File > Save for Web & Devices, make sure file format is set to GIF, and save image! You can repeat this for each set of two adjacent frames that you want to fade in or fade out of each or. In Tween dialog box, re are a number of or options which can be used to add effects such as position changes, which can be experimented with.

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