new york city college of technology typography in … · 2017-10-25 · you will be graded on:...

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 them by the end of class

B. UPLOAD TO DROPBOX PROJECT 3 FOLDER HTTPS://WWW.DROPBOX.COM/SH/1CJLVSWED5Q91PE/AAC6LHX-9B9NOSWCYAH6DTZ2A?DL=0

C. CREATE A NEW FOLDER Named “Lastname_FirstName_Project 3”

D. FINAL VERSION OF YOUR TYPE IN MOTION PROJECTName 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. Docu-ment 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”

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.

Typography in MotionProject 3: Final Due Nov 2UPLOADED TO DROPBOX BY END OF CLASS

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

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.

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

3. PRODUCTION – Use InDesign or PhotoshopII. 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 Pages http://pin.it/17K6YhS

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

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

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

https://vimeo.com/18499580

https://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

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)


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.


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.


http://www.briandalessandro.com/blog/fade-in-fade-out-an-animated-gif-in-photoshop/

Photoshop GIF Fade

1. Set up your animation frames in the Timeline palette (known as the Animation palette in versions prior to CS6). 2. Select the animation frame that you want to start the fade effect.

In the Timeline palette menu (found under this button at the top right corner of the palette: , click Tween…3. In the box that pops up, make sure “Tween With: Next Frame” is chosen, so that the frame you selected will

fade into the following frame. Under “Frames to Add” pick the number of new frames you want to add in between the current frame and the next frame. A larger number will make a smoother 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 the frame you selected and the 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 the underlying transparency in the newly added frames, which will artificially brighten the image since there is no background layer. This is not what we want. Instead, we want the initial frame to have an opacity of 100% over the course of the tween, as the following frame gradually fades in. This can be manually edited for each frame in the Layer palette, but let’s avoid doing so:

4. In the Timeline palette menu, uncheck New Layers Visible in All Frames

5 Click on your original initial frame to select it. Shift+Click the last of the newly added in between frames. This will select all of the in between frames, while still leaving the initial frame as the “main” selected frame, which is important for the next step.

6. In the Layer palette, right click on the layer corresponding to the image in the initial frame (it should have 100% opacity). Click Duplicate Layer and then OK. This will copy your initial frame image to each of the in between frames at 100% opacity, which will make it appear that the next frame is fading in.

7. Change the timing of each frame if needed, click File > Save for Web & Devices, make sure the file format is set to GIF, and save the image!

You can repeat this for each set of two adjacent frames that you want to fade in or fade out of each other. In the Tween dialog box, there are a number of other options which can be used to add effects such as position changes, which can be experimented with.

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


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


new york city college of technology typography in … · 2017-10-25 · you will be graded on:...

Documents