DESIGN 260

Visual Communication IV

CRN 31266

Tues/Thurs 1:00-4:30pm

FI 101

bridget.weis@wwu.edu

Office hours: Tues 5:00-6:00pm

Office: AA 262

 

JULY 30:

Today:

 

 

 

Course evaluations and feedback.

Present your Type Specimen project.

JULY 28:

Present your Type Specimen progress.

Today:

Last chance critiques of animations in progress.

 

For next class:

Finish animations, upload to vimeo and post to blog along with process work.

 

Process uploaded to blog:

 

1. at least 3 examples of type specimen inspiration

2. typeface info research

3. type family observational study showing its range

4. brainstorming/outline ideas for narrative

5. rough storyboard & finalized storyboard

6. look-and-feel comps (at least three of your key screens)

 

 

Critique/grading criteria:

 

Concept

overall communication/innovation

storytelling (beginning, middle, end, overall structure)

demonstration of type family (weights, styles, sizes, leading, tracking)

information about typeface (creator, date, context, history, other…)

 

Design

overall screen composition/layout (balance, unity, negative space)

overall type hierarchy (readability, emphasis, contrast, alignment, spacing, scale)

appropriateness/quality of form (assets, color, background, supporting elements…)

consistency w/ variety in visual elements (clarity/unity, but with innovation)

 

Time/Space

rhythm and duration of elements/scenes

transitioning between elements (natural, consistency w/ variety, innovation)

use of motion (natural/effective movement)

use of space (illusion of depth, framing, orientation)

 

Sound

appropriate sound choice

use of sound to enhance and set pacing

quality audio mix (recording, levels, layers, begin, end)

 

 

In-class references:

 

Typography anatomy detail 1

Typography anatomy detail 2

Typography anatomy detail 3

 

 

Tutorial: Changing the anchor point or "pivot point"

Tutorial: Timecode burn-in

Tutorial: Glass effect tutorial

Tutorial: Ease and wizz

JULY 23:

Present your Type Specimen research/progress

Today:

Presentation of progress; Storyboards; Initial look-and-feel comps; create any assets.

 

For next class:

At least 1/2-3/4 of your animation completed for critique in class.

 

 

Review After Effects tools:

 

Camera feature

 

 

Suitcase Fusion Software

For this project, you are using fonts that are on the computers in both Design labs. Use Suitcase Fusion to enable/activate these fonts. Specific fonts may not be available outside of the lab.

 

Character Tool Palette

Show the align panel by switching the workspace to text or selecting Window > Character from the top menu bar. Drag the panels to more convenient locations.

 

The character palette includes familiar settings for text size, leading, tracking, and kerning.

 

Align Tool Palette

 

The align panel is useful for aligning typography when working in many layers.  Show the align panel by switching the workspace to All Panels or selecting Window > Align from the top menu bar.

 

Animators

Text has its own set of available effects and transformations.  Expand a text layer, then select Animate on the right side. A fly-out menu gives multiple options for animated effects, such as anchor point, position, scale, rotation, opacity, and tracking. For example, select Position. Then it creates an Animator 1 with a Range Selector and Position property. Go ahead and adjust the Position of the Y axis. Then under the Range Selector scrub the Start parameter and you will see the text animate by character. You can then look under the Advanced option and change Characters to Characters without Spaces, Words, or Lines. You can also change the direction shape, smoothness, and randomization of the animation.

 

Make an animation using rotation and watch how the text responds. The first is number of times to turn, the second is how many additional degrees to turn. Under More Options, Anchor Point Grouping can be adjusted.  By character rotates each character.  The value can be changed to word, line, or all.

 

Steps are done very similarly for each parameter.

 

3D text

You can make your text animate around the z-axis as well. In the timeline, click on the 3D cube icon next to the layer to enable 3D. Then open up the Rotation parameter and turn the text around the Y and X axis to see it move in 3D space.

 

You can also enable 3D per character using Animators like above. Click on Animate next to the layer and then choose Enable Per-Character 3D. Then once you go choose another Animator like Rotation, you will see the Z-axis included.

 

Text on a Path

With the text layer selected, go up to pen tool and draw a path onto the layer. This will create a Mask Path on the layer. Toggle open Path Options under your text layer. Then choose the newly created Mask as the Path. The text should then conform to the path. You then have a number of other options like reversing the path, perpendicular to the path, and adjusting the margins.

 

Text Shape Animation

Make a new line of text using the text tool.  It may work best to create each letter one at a time.  Right click, then select Create Shapes From Text. Expand the layer in the layer panel.  Under contents, find the path.  This is the outline of your letter.  Letters with counters will have multiple paths.

 

Working with Points

Click the stopwatch next to path to begin animating.  Note that the path as a whole is animated rather than the individual points.  If you move the object, the position will animate along with the individual points.

 

Points can be moved with the typical click and drag method.  Add points with the pen tool by clicking anywhere on the path.  To add a bezier point with curve handles, click and drag with the pen tool.  To convert an existing point to a bezier point, select the pen tool, hold down option, then click and drag.

 

 

Tutorials

Tutorial 1 (Create type on different layers in AE and skip to 10:25 in the video. Uses a null and parenting method.)

Tutorial 2

 

 

JULY 21:

Present your Type Specimen research/progress

Type Specimen Project Assignment

Today:

Presentation of typeface information and concepts; look at examples of type specimen. Review After Effects process.

 

Type characteristics

 

Anatomy of Typography

 

More After Effects Shortcuts

 

For next class:

Storyboards; Initial look-and-feel comps; create any assets.

 

 

1. Look at storyboards and concepts.

    Is the feeling of the typeface represented?

    Is the type family and variation demonstrated?

    Is information about the typeface conveyed?

    How are the transitions? Do they make sense?

    Is there consistency with variety?

    How is the writing and the overall approach to the storytelling?

    Is there a beginning, middle, end?

 

2. Look at look-and-feel comps and asset creation

    How is the overall composition including balance, unity, rhythm, alignment, spacing…?

    How are the type arrangements…hierarchy and readability?

    How is the possible color scheme?

    How is the relationship between type and possible graphic elements?

    How is the style of any graphic elements?

3. Also discuss sound choice

 

    Is the sound appropriate and does it complement the personality of the typeface?

    Does it enhance the experience?

    Does it set the pacing?

    Is there good audio/video synchronization opportunity?

 

NOTE: You can also do voiceover. You can record yourself using a mic with an audio recorder checked out from ATUS or you can use the computer’s internal mic using Quicktime Player.

Open QT Player and go to File > New Audio Recording.

 

 

 

 

In-Class References

Brain divided animated short

Film Title Sequences

Movie Title Sequence Stills

JULY 16:

Present your projects and process.

Introduce Type Specimen Project:

 

Overview

In this project, you will create a type specimen animation promoting a specific typeface. You should show the range of your typeface, while providing a possible historical reference and/or context of the typeface’s intended use and what makes it unique. You are essentially trying to sell it, but also keeping it informational.

 

A type specimen is usually viewed as a publication that shows the range of a particular typeface in use. Printers and typographers have produced them for hundreds of years. In the digital age, type specimens have become more experimental, and they remain a crucial way to promote and explain typefaces to designers who might want to buy and use them.

 

Parameters

1. Content: Type. (supporting imagery is allowed, but emphasis still on type.) Your type specimen must contain the following information:

     a. The creator/designer of the face

     b. When it was created

     c. Further information about the typeface (could be history, context, or defining

     characteristics)

     d. Different weights and styles if it has them

     e. At least 4 different sizes

     f. optional: Some variation in tracking (and leading if multiple lines)

 

2. Length: 60 - 120 seconds + additional 3 seconds black at beginning and end

 

3. Size: 1920 x 1080px; Square Pixel Aspect Ratio

 

4. Sound: This can be music, ambient sound + sound effects, or a voiceover narration of the text. Work on audio/video sync and set pacing.

 

Objectives

1. Principles of time-based media – space, form, motion, time, sequence

2. Animating a longer sequence of type

3. Concept, communication, telling a story (begin, mid, end)

4. Representation/promotion of typeface

5. Typography and composition, including hierarchy, readability, design principles and characteristics

6. Understanding of type classifications

 

Requirements

60 - 120 seconds with 3 seconds of black begin/end — type specimen animation on Vimeo linked from blog

 

Process requirements uploaded to blog:

1. at least 3 type specimen examples (motion and/or static)

2. typeface family and history research (print-out scanned or photographed)

3. brainstorm outline/script

4. finalized storyboard + initial ideation storyboards

5. look-and-feel key moments/phrases (composition layouts of design in AI, PSD, or AE)

 

Process

1. Research your typeface and other type specimen examples.

 

2. Arrange a specimen print document, put your typeface in every weight and style in which it is available and in various sizes, kerning, and leading. You do not need to design this page if you don’t want, this is just an initial reference point.

 

3. Figure out what content you are including

 

4. Rough storyboard of animation – illustrate the key points

 

5. Design the key points in Illustrator for look-and-feel

 

6. Bring in Illustrator file with type distributed to layers or create type straight in After Effects

 

10. Animate and render a Quicktime movie or mp4.

 

12. Post to Vimeo and link to blog.

 

 

Schedule

 

Thurs 07.16 -- Project overview, choose typeface,

For next class: Research typeface; research type specimen; print out typeface in every weight and style and in various sizes, tracking, and leading; find out information about typeface; write initial concept/outline and brainstorm approaches for animation.

 

Tues 07.21 -- Presentation of typeface information and concepts; look at examples of type specimen. Review After Effects process.

For next class: Storyboards; Initial look-and-feel comps; create any assets.

 

Thurs 07.23 -- Critiques of storyboards, comps, asset creation, and possible animation.

For next class: At least 1/2-3/4 of your animation completed for critique in class.

 

Tues 07.28 -- Last chance critiques of animations in progress.

For next class: Finish animations, upload to vimeo and post to blog along with process work.

 

Thurs 07.30 -- DUE Final presentations start at regular class time

 

Student Examples

1

2

 

Assigned Fonts

 

Yuya - Garamond

Mack - Futura

Miriam - Baskerville

Kelly - Minion

Paris - Trade Gothic

Dylan - Caslon

 

In-Class References

Spinng Dancer.gif

Type poster

Seb Lester hand-drawn fonts

NY Times "Is That Dress White and Gold or Blue and Black?"

Color Blindness (Adventuretime)

Tetrachromacy - condition of possessing four independant channels for conveying color information.

Massimo Vignelli

Jessica Hische

Design Trilogy Films - Gary Hustwit

JULY 14:

Announcement: Office hours by appointment only from now on.

 

Check-in and critique of projects

 

Keep these requirements in mind:

 

1. Time Aspects:

    - rhythm/pacing (consistency w/ variety)

    - sequence/duration (order of pattern, pacing)

    - motion/easing

    - transition

 

2. Formal Characteristics/Spatial Aspects:

    - color that creates appropriate rhythm and

       good color relationships

    - transparency that creates appropriate rhythm

       and depth

    - scale that creates appropriate rhythm, depth,

      and figure/ground relationships

    - shape that creates appropriate rhythm and

      figure/ground relationships

 

3. Composition/Design Principles:

    - balance

    - emphasis

    - unity

    - pattern

    - consistency/variety

    - gestalt: use of similarity, proximity, continuous,
      closure

    - figure/ground relationships (more obvious in

      shape and size studies)

Work time to make further refinements

Joining projects together

 

How To: Exporting your movie from after effects

 

Go to Composition > Add to Render Queue

 

Click on the default Comp title next to Output To and rename file and choose where you want to save it.

 

I recommend this: If you wish to try to get the file size smaller for the internet, but try to retain quality, change your Video Codec to H.264.

 

If you want to change the compression, click on Lossless next to Output Module and click on Format Options and change Video Codec to None if you wish to keep absolute highest quality. If you want another codec that preserves pretty high quality, but with a little bigger file size, try Apple ProRes 422 (HQ).

 

When you are ready, click on Render in the top right of the panel.

JULY 9:

LECTURE: Layout Principles

NOTE: To change scale but not position, use the scale keyframe associated with the shape and not the entire layer (the entire layer would be the first transform drop down, you are looking a few layers in for this scale keyframe).

 

 

 

 

 

 

 

 

 

 

TUTORIAL: Basics of rendering and exporting (focus on 'collect all files in one location' portion if you are moving your file from computer to computer)

TUTORIAL: How to do audio in after effects (from audio file type to info on adjusting levels to fade in and out, and playback, this tutorial should help with all things audio)

FOR NEXT CLASS:

 

Refine and finish other studies for feedback.

JULY 7:

Project 2: Music Interpretation

Songs:

 

Group 1 (Yuya, Kelly, Paris)

Group 2 (Miriam, Mack, Dylan)

Book Reference

You can refer to Lesson 1: Basic Animation and some of Lesson 2: Advanced Animation in After Effects Apprentice for more help.

 

 

How To: Color Animation

 

Click a shape in the comp panel to select its layer.

 

To the left of a layer, click the triangle to display its properties.

 

Click the stopwatch next to color under Contents > Fill.  This creates a keyframe at the current time.

 

Move the playhead to another time in the future.

 

In the layers panel, click the color swatch and change it to another color. This automatically creates a new keyframe at the current time.

 

Click and drag the keyframes to adjust timing of color transitions.

 

 

How To: Opacity Animation

 

Click a shape in the comp panel to select its layer.

 

To the left of a layer, click the triangle to display its properties.

 

Click the stopwatch next to opacity under Transform.  This creates a keyframe at the current time.

 

Move the playhead to another time in the future.

 

In the layers panel, click the yellow 100% link next to opacity and change it to a lower percent.  This automatically creates a new keyframe at the current time.

 

Click and drag the keyframes to adjust timing of opacity transitions.

 

 

How To: Scale Animation

 

Click a shape in the comp panel to select its layer.

 

To the left of a layer, click the triangle to display its properties.

 

Click the stopwatch next to scale under Transform.  This creates a keyframe at the current time.

 

Move the playhead to another time in the future.

 

In the layers panel, click the yellow 100% link next to scale and change it to a lower or higher percent.  This automatically creates a new keyframe at the current time.

 

Click and drag the keyframes to adjust timing of scale transitions.

 

In addition to scaling from the center of the square, you can also scale from any point by moving the Anchor Point. To move the Anchor Point, select the Pan Behind Tool from the top menu tool bar. Then you will see crosshairs on the center of your square appear and with this tool you can select the crosshairs and move them to any side or corner that you want to scale from.

 

 

How To: Shape Animation

 

 

Click a shape in the comp panel to select its layer.

 

To the right of the Contents, click on the black arrow next to Add.

 

You can change the shape by choosing any number of the following: Pucker & Bloat, Rounded Corners, Twist, Trim Paths, Zig Zag

 

When you choose one, it will appear below the layer and you can keyframe/adjust the appropriate properties across the timeline to change the shape.

 

Click and drag the keyframes to adjust timing of transitions.

 

 

How To: Easing

 

Help with Easing: GreyScaleGorilla: Intro to Keyframing

 

From an existing animation, Right-Click on a keyframe.

 

Click Keyframe Assistant from the menu, then Easy Ease, Ease In, or Ease Out. Play around with the different ones and see what they do. Learn by experimenting.

 

This changes from a linear transition to a curved transition. The motion will appear more natural.

 

Another option for easing is by using the plug-in, Ease & Wizz. Go to Window and at the bottom of that menu click on Ease and Wizz.jsx.

 

Select the keyframes in which you want to apply ease.

 

In the Ease & Wizz panel adjust Easing, Type, the Keyframes, and hit Apply. Expo is the strongest, while Sine is the most gradual.

 

 

How To: Work With Audio

 

1. File > Import > choose file type Footage. In After Effects, drag file to timeline and turn off the eyeball icon so we can’t see the video.

 

2. Five ways to interact with audio in After Effects:

 

RAM preview or hit 0 on the keypad to hear audio

 

Command/Click-drag on playhead to scrub sound

 

Hit LL on keyboard to see waveforms and audio levels. (You can then keyframe audio levels to fade if needed.)

 

You can set markers on layers or the timeline to mark spots of what you are hearing at that time to help you organize. Go to Layer > Add Marker with either a layer selected for a layer or no layers selected to put one on the timeline. You can right-click it to give it a name in the comments box.

 

When you render at the end, don’t forget to click on Lossless in the Render Queue and check Audio Output.

 

 

Grouping Shapes - https://helpx.adobe.com/after-effects/using/overview-shape-layers-paths-vector.html

 

 

DUE NEXT CLASS:

 

Finish at least 2 studies by next class. Bring to class for informal review. Color or Opacity may be the easiest to start with.

 

Post your storyboards or inspirational examples for this project to your blog.

JULY 2:

Present your projects and process.

Introduce Music Interpretation Project:

 

Overview

Create a series of explorations that use the formal characteristics (size, shape, color, transparency) to create the design principle of rhythm in motion, while also exploring the design principles of figure/ground and balance.

 

While using the formal characteristics to create rhythm, this is also a study in audio/visual relationships and interpretation of music. Your visuals should respond to the music.

 

Increasingly motion is becoming more of a design factor. The purpose of these studies is to see what happens to the formal characteristics when motion is applied to them. Changing shape, scale, transparency and color can have communicative and dynamic results.

 

Parameters

Characteristic/Principles Matrix

In each study you will use only one characteristic at a time to achieve rhythm:

 

Shape / rhythm (balance / figure-ground)

Scale / rhythm (balance / figure-ground)

Transparency / rhythm (balance / depth)

Color / rhythm (balance / scheme)

 

Beyond focusing on only one characteristic at a time, you also need to set up a grid within your 1920×1080 composition. Your layout of your chosen shapes (must be basic shapes) must fit into this grid to ensure proper layout and lead towards balance. You may NOT change the position parameter of your shapes within this project because this will distract from using the formal characteristics alone to create movement.

 

For example, you may change only the shape of your forms in the shape study and not move them or change their color and so on. In the scale study, you can only have one type of shape throughout to create your layout and change only the scale of your chosen form to create rhythm.

 

Between each study, you may change your grid, the shape, and color of the form. For example, in the scale study you might have 16 blue squares and in the transparency study you may have 20 red circles. Just be consistent within each study and focus on changing only the one characteristic at a time.

 

REMEMBER you can only change colors in the color study and you can only change shape in the shape study and so on. And you cannot move them. Picture a marquee of lights that you are turning off and on to create rhythm.

 

Objectives

- Explore formal characteristics (size, shape, color, transparency) as they relate to the design principle of rhythm.

- Explore other design principles such as figure/ground and balance

- Explore other variations of composition with a focus on pattern, consistency, variety, unity, and emphasis.

- Explore motion and space as design factors.

- Explore sequence including transitions, duration, speed, timing, and easing.

- Practice audio/visual relationships and synchronization

- To develop your technical skills with digital tools.

- Explore multiple solutions and edit your work for the best solution.

 

Requirements

Size: 1920 x1080 pixels

Length: Each study’s length will be ¼ of your provided sound clip.

Content: Create 4 studies and put them back-to-back in a sequence to your music clip. Then with your group combine all of your clips into one sequence to the final full song.

Format:  1 final Quicktime Movie uploaded to Vimeo.

 

Student Examples

1

2

3

4

5

JUNE 30:

Present your progress for feedback/critique.

Intro to Premiere Pro

Getting started with Adobe Premiere Pro

4:3 sizing tool

Basic sound editing in Premiere Pro

Exporting your video:

**Note: For this project you should use Quicktime format for exporting.

 

1. Open export window: select File > Export > Media

 

2. Select Quicktime as the format. Make sure Export Video and Export Audio are checked if you want both. If your file ends up being too big, you can change the format here from Quicktime to H.264.

 

3. Remember from below, 720x480px is a standard 4×3 size for video. So for the present choose the HD 720p 24, H.264, AAC, 48 kHz option.

 

4. To have a higher quality movie, I recommend changing your Video Codec (on the video panel) to Apple Pro Res 422 (HQ).

 

5. You can login to vimeo from the Publish panel to automatically publish to your vimeo account when the video is exported.

 

6. Click Export at the bottom of the panel and it will save it where you saved your Project File or wherever you set your Output.

 

You can also import a Premiere Project file into AE and vice versa if you are going back and forth.

Importing images as an image sequence:

You can import an animation contained in a single file, such as an animated GIF. You can also import a sequence of still-image files, such as a TIFF sequence, and automatically combine them into a single video clip; each still image becomes one frame of video. Importing a sequence is useful for animations exported as an image sequence by applications like After Effects. The images in the series cannot include layers. For information on layers and flattening, see the application’s documentation.

 

1. Set the frame rate for the still-image sequence. Select Edit > Preferences > Media (Windows), or Premiere Pro > Preferences > Media. Then, select a framerate from the Indeterminate Media Timebase menu. Click OK.

 

2. Make sure that each still-image filename contains an equal number of digits at the end and has the correct file extension—for example, file000.bmp, file001.bmp, and so forth.

 

3. Choose File > Import.

 

4. Locate and select the first numbered file in the sequence, select Image Sequence, and click Open (Windows) or Import (Mac OS). When Image Sequence is selected, Premiere Pro interprets each of the numbered files as a single frame in a video clip.

 

 

 

Work session, keep these requirements in mind:

1. Concept

    - innovative/original concept

    - storytelling

    - clear communication

    - quality of sound

 

2. Design

    - overall composition

    - quality and appropriateness of asset creation

    - consistency in visual elements

    - letterform

 

3. Time

    - overall frame rate (smoothness)

    - use of motion

    - use of space across time

    - rhthym/pacing of elements and scenes

 

4. Requirements

    - 45-60 seconds of story

    - 4:3 aspect ratio

    - Quicktime Movie (or H.264 if too large)

    - research of stop-motion inspiration

    - storyboards (versions to show progress including finalized storyboard)

JUNE 25:

Pixar Storytelling Rules Playlist

Lecture: Narrative

Present your blog posts to class!

Title Sequences: Saul Bass

Title Sequences: Pablo Ferro

Continue to work on your project for the rest of class.

 

DUE NEXT CLASS:

1. Continue ideation including storyboarding and ideas - post to blog.

We will do presentations to the class again like today, so have something ready to share.

 

2. Next class, I will do a demo of creating stop-motion in Premiere. Bring photos so you will be ready to start building in Premiere, or you can bring equipment to try to shoot during class.

Remember, project is due July 2nd (next Thursday).

 

Current Idioms list:

Yuya Era -- A taste of your own medicine.

Owen Powers -- Close, but no cigar.

Carrin Romain-McErlane -- Keep an eye on him.

Mack Stromme -- Cross the line.

Miriam Brooke -- Cup of joe.

Kelly Quesnel -- Don't bite off more than you can chew.

Paris Spence

Dylan Vogel -- Fools gold.

 

 

JUNE 23:

Introductions

                   – Name

                   – Area of study

                   – Why do you want to learn about motion graphics and storytelling?

                   – Tells us about a commercial, title sequence, or trailer that you've

                      seen recently that stands out to you and why (share if time)

Animated Short: Paperman - Christophe Beck

Animated Short: "Pixels" - by Patrick Jean

Animated Short: The illusion of life

Title Sequence: Wimbledon

Title Sequence: Catch Me If You Can

create a tumblr

PROJECT 1: Stop-Motion

Professional Examples –  Short of the Week, Vimeo, Youtube

Storyboard template

Copy-right free music:

 

                  Creative Commons (click on SoundCloud, CCMixter, or Jamendo)

                                       and do a search

                  Free Archive Music

 

Free Music Archive popular artists:

Shooting ratio

Frames per second (fps) for film is traditionally 24. It is 29.97 for video. You however, do not need to shoot that many shots per second. You could have a lower shooting ratio. For example if you shoot on 2′s, you would shoot 12 frames per second and later hold them for 2 frames each on the timeline to reach 24 fps. The higher the shooting ratio the smoother the final animation.

 

Therefore, to figure out how many photos you need to take, you decide your final fps in your timeline, and multiply the shooting ratio by the length of your video. For example:

 

12 (fps shooting ratio)  x 40 s (length) = 480 photos

(for a 24 fps timeline holding each photo for 2 frames)

 

15 (fps shooting ratio) x 40 s (length) = 600 photos

(for a 29.97 fps timeline holding each photo for 2 frames)

 

8 (fps shooting ratio) x 40 s (length) = 320 photos

(for a 24 fps timeline holding each photo for 3 frames)

 

10 (fps shooting ratio) x 40 s (length) = 400 photos

(for a 29.97 fps timeline holding each photo for 3 frames)

 

Tripod

Use a tripod to keep your camera completely steady. Usually try to avoid a lot of inconsistent camera movement.

 

 

Lighting

Check your lighting. Make sure it is consistent throughout your photography or you will see the flicker in the final animation.

 

 

Size

Ultimately the size of your photos is up to you, but it will most likely end up being a 4:3 aspect ratio unless you crop all of your images. 720x480px is a standard 4×3 size for video.