Final Presentations will be held on Thursday, May 16 at 6:00pm

As mentioned in the requirements outline for the midterm, the final project should ideally build upon the work you created in the midterm project (though this is not necessarily a requirement). For example, you could create a title sequence animation based around your midterm deliverables, or a game walkthrough or trailer. The content and scope is largely up to you, but below items are required deliverables for the final project presentation:

  • References and research
  • Concept sketches and thumbnails
  • Storyboard
  • Styleframe
  • Animatic
  • Finished animation piece

01/31

Class 01 – Course Overview; Syllabus; Broadcast design terms and examples; some Motion Graphics History; AFX Tutorial: create a simple logo and logo animation.

Homework:

  1. Create a Pinterest account if you don't have one; create separate boards for Broadcast Design, Lower Thirds, and Transitions. Begin collecting examples of things you find interesting. Also, if you don't have one, get a sketchbook!

02/07

Class 02 – Broadcast standards; Type exercise; Midterm discussion.

02/14

Class 03 – After Effects Tutorial(AFX)/Work in Class (WIC).

02/21

Class 04 – Present and critique midterm concepts.

02/28

Class 05 – TV stinger or interstitial tutorial.

03/07

Class 06 – AFX and Cinema 4D exercise.

03/14

Class 07: WIC

03/21

Class 08: Pre-Midterm Presentation, Work in Class

03/28

NO CLASS - I'll be away

04/04

Class 10 – Midterm Presentations

04/11

 Class 11 – Final Project Discussion, Work in Class

04/18

Class 12 – WIC

04/25

NO CLASS – Spring BReak – DOn't DIE, bro

05/02

Class 13 – Critique of Final Project Progress

05/09

Class 14 – Revision Work in Class

05/16

Class 15 – FINAL PRESENTATIONS

*Please note that the above schedule is almost certain to change in some capacity due to the vicissitudes of the larger production schedule we are beholden to.

%MCEPASTEBIN%

Course Intro:

Welcome to Art/CGI 441 – Broadcast Design. This course involves the creation of sophisticated title sequences, TV show packaging, and on-air promotions to be used as part of DVD, video, and film production. Motion Graphics is essentially the theory and practice of graphic design as applied to time-based media. As such, the same rules that apply to graphic design - color sense, typography, size relationships, the grid, etc. - also apply to motion graphics. However, we must now also consider the added dimension of time. In this class we shall be reviewing and relearning the former, while immersing ourselves in the nuance of the latter.

The overall goal of this class is introduce the skills necessary to create eye-catching title sequences, on-air graphics and broadcast-quality graphics packages used in film, television, web, and other video outlets.

 

Broadcast Design Terminology

Let's get our terms straight before we dig into some broadcast design research. There are a number of different pieces of animation that go into what is known as a 'broadcast pakage,' i.e. all the different on-air, animated items broadcasters place between or on-top of their content. Below is a run-through of some of the most common:

 

Bump or Bumper

A bumper is a little interstitial (i.e. in between) animation that just reminds you what you're watching, or tells you what's on next, or something else of interest. 

 

Bug or Snipe

Bugs are tiny animations that usually pop-up on the bottom left or right of the screen, notifying the viewer of some additional information the broadcaster wants her to know. Like when you're watching The Walking Dead, a bug would pop-up letting you know that The Talking Dead talk-show is one right after. Sometimes it just reminds you which network you're watching:

 

Lower Thirds

You've seen these a gazillion times. Lower thirds sit in the lower third horizontal section of the screen and have information about what's on screen. For example, who's pictured, what the subject of a discussion is, the location of the footage, the event name of the footage, stock tickers, time of day, sports scores, even a live Twitter field:

 

 

Opening Title sequence

This one is fairly self-explanatory, though they are a little more compact than full-on title sequences. They generally introduce a program or segment quickly. Harry Marks, one of the pioneers of broadcast design, created this famous opening sequence for the ABC Movie of the Week, where the camera appears to fly through, in, and around logo-types and other, more abstract shapes:

It may look kind of dated while we sit here in the 21st century, with powerful animation software literaslly at our fingertips. But consider that Marks and his team did all of this without a computer, and yet we're still making use of these same ideas today:

In point of fact, Harry Marks didn't actually come up with the techniques used above all on his own: he consulted heavily with artist and designer Douglas Trumbull, fresh off the production of Stanley Kubrick's science fiction classic, 2001: A Space Odyssey:

 

The Title Sequence

We all know this one: the best title sequences tell you the a.)name of the show/film, b.)who made it, c.)who's in it and, most importantly and challenging, d.)the nature of the universe you are about to enter. You may even have your own favorite title sequences in mind. Here are a few examples of title sequences or logo reveals that I am really loving:

 

Conversations with a Killer: The Ted Bundy Tapes

 

 

True Detective

(produced by The Mill+ and Antibody, 2018)

 

Stranger Things

(by Imaginary Forces for Netflix, 2016)

For a solid rundown of how this sequence was made, check out [this article]. 

 

Seven (1995)

(designed by Kyle Cooper of R/GA, 1995)

For a solid rundown of how this sequence was made, check out [this article].

This classic title sequence does a really good job of setting the general atmosphere for a deeply disturbing film. It also does something even more important: it introduces us to the villian John Doe, a serial killer who meticulously documents his bizarre philosophy and research about killing people. This sequence recalls to mind the macabre work of photographer Joel-Peter Witkin:

 

And the work of experiemental filmmaker Stan Brakhage:

 

Creation (1979) – Stan Brakhage

 

The short film below features designers Clive Piercy and John Sabel discussing the concept design and production process of this piece, with different production stills of the notebooks used throughout the film. It unfortunately doesn't show the actual process of creating the title sequence itself, but it is interesting to hear what the designers were thinking when they began creating the piece. 

And finally, take a look at these storyboards for the sequence, which precede the actual storyboard production. These are essential in narrative film and animation production because they provide designers with a solid understanding of the camera angles, camera movement, mise en scène, and the general atmosphere of the piece. 

 

Storyboard art by Wayne Coe

 

Class Exercise: The animated Logo

So today we're going to start a mini motion graphics design project in class tonight. First we'll design a simple logo, then talk about how to animate it, then try to quickly animate it in After Effects. Anything we don't complete, we'll work on next week! 

Finishing the Logo animation

Welcome to week 02! Let's finish up the logo animation we began last class. I did a little bit more work to complete the logo accroding to one of our design ideas. Here is the completed logo:

Click here to download the exercise files so we can recreate it in class.

 

Broadcast Standards Overview

Screen Formats

Related imageRelated image

Screens come in all kinds of sizes –also called screen format – so it's good to begin any discussion of broadcast design work with a discussion about which format we will be working with. This is true of any visual design, whether it's print, web-based, social-media, or video media. Keep in mind, screen format is really more the ratio of width to height (the aspect ratio), and shouldn't be confused with screen dimensions. 

In this class, we will most likely be working with the HDTV format, which has a 16 unit by 9 unit aspect ratio. 

 

Title Safe and Action Safe

In the old days, there wasn't much in the way of standards for screen real estate. Television manufacturers basically adhered to screen format, but there was variation. This meant that broadcasters couldn't guarantee that elements they placed around the edges of the format would be completely visible to their entire audience. That being the case, safety areas were introduced to ensure that any on-screen type was legible any on-screen action was visible. 

The areas are called the Title and Action safe areas. Traditionally, title safe was roughly the inner 80% of the screen, whereas action safe was roughly 90%.  But, as television standards have changed, screen manufacturers have fallen into line with these standards, more and more content is now viewed on smart-devices with clearly defined screen sizes, and lastly video codecs/formats have gotten much better at re-scaling to aspect ratios and screen dimensions, these areas have been revised to about 90% for titles and 93% for action (see below diagram):

 

Title and Action safety areas post-2010

For designers, we're really committed to padding and margins, around our type and around screen elements, so we're all for the continued use of title and actions safe guides. Broadcaster designers, however, must adhere to them even more stringently if they want their content to even be accepted for broadcast.

 

A Word About Digital Content Standards  

Digital Media is definitely an incredible sea change in the broadcast world, and it was a long time coming. But keep in mind, it’s not magic. While it’s true that many different formats are supported, this didn’t happen overnight and the technology required to make this possible is vast. To be a broadcast designer or animator, it’s not necessary to know everything about Digital Media, but the following are just a few of the things you definitely must know.

CODECs

A CODEC is essentially a piece of hardware or software that encodes or decodes digital data. The word itself stands for 'coder-decoder'. Video codecs encodes video from an analog source into digital video and also from digital video to analog video. See below:

 

A typical digital video workflow: video gets encoded into H.264, then decoded and re-encoded into Apple ProRes, more suitable for editing.

 

 In the diagram above, the Video Camera has a hardware-based codec that converts the chroma and luminance values to a digital video signal, encodes with the H264 codec and saves it onto the Memory Card, in this case a Sony SXS card. When it comes time to edit this video, the H264 files are converted to the Apple ProRes 422 codec and copied, bit for bit, into a computer’s hard disk. 

In order for it to be viewed on screen, there needs to be a codec on the computer that decodes the Apple ProRes Quicktime stream into a computer screen-ready format. Lucky for you, you’re on a Mac. Apple has tied Quicktime into their operating system and Final Cut Pro (FCP) editing software. Moreover, your computer (and Final Cut, After Effects, and other video-centric applications) natively understand how to decode the Apple ProRes 422 codec. 

audioLikewise, Audio codecs encode analog audio to digital and also from digital to analog. When Kendrick Lamar, for example, records audio, the sounds he makes are technically analog signals in the air, in the microphone, and through the mic cable, until they finally get to the computer’s ‘Analog to Digital Conversion’ hardware. There the analog signals are converted to digital information through an audio codec and written to the Hard Drive. On an Apple, this audio data is usually encoded with the PCM codec within an AIFF file format. From there, different codecs are used to encode and place the audio on iPods (AAC, MP3), Apple TV (MPEG4, H264) and Compact Disc (PCM).

 

Commonly used CODECs

Video Codecs:

Moving Picture Experts Group (MPEG)

  • Apple ProRes HQ, LQ, Proxy
  • MPEG-1(includes .mp3) 
  • MPEG2 (used on DVDs)
  • ISO MPEG-4, versions 1.0 and 1.1
  • MPEG-4 Part 2
  • H.264/MPEG-4 AVC (Advanced Video Coding) 

Windows Proprietary Video Codecs

  • Windows Media Video
  • Microsoft MPEG-4, versions 2 and 3 (proprietary and not MPEG-4 compliant video codec created by Microsoft. Released as a part of Windows Media Tools 4. A hacked version of Microsoft's MPEG-4v3 codec became known as DivX)
  • Microsoft Motion JPEG

Other common Codecs

  • VP6, VP6-E, VP6-S, VP7 - used in Flash Player 8+, Flash Lite and Java FX and it suports High Definition standards

Audio Codecs:

MPEG

  • ISO MPEG Layer 3 (MP3) - we use this codec everyday to share and listen to music
  • MPEG4 (AAC)
  • Vorbis (Used by Spotify)

Windows

  • Windows Media Audio
  • Microsoft ADPCM
  • PCM (Pulse Code Modulation)

Apple

  • Apple Lossless Audio Codec (ALAC)
  • AIFF (PCM)

Others

  • Dolby Digital (a.k.a. AC3)
  • Free Lossless Audio Codec (FLAC)

File Formats

Taco Crispy Beef 990x725Ok, so we’re finally here: formats. How exciting! Here’s the deal with formats: you’ll remember that after a computer or other hardware device has converted analog images and sound to digital video and audio, it has to be stored onto a hard drive. What I didn’t tell you is that storage, whether on tape or disk, requires the data be sealed in a specific wrapper, commonly called a format. A good analog to the file format is the humble tortilla: if the codec is the type of filling (beef, chicken, fish, chorizo, lengua, beans, etc.) then the tortilla is the format.

 

Tortillas come in all types: in rural Mexico they're usually corn, made by hand the old way from macerated corn or maize. But in northern Mexico you will occasionally find flour tortilla. And throughout the world, there are all kinds of bazaar takes on the Mexican tortilla: hard-shell, gordita, etc. But most of these tortillas can contain any number of fillings, such as beef. 

To summarize: tortilla = format; codec = filling

 

Examples of Format

File format is not to be confused with compositional or screen format, discussed above. We’ve already seen examples of a few formats in the hard drive file universe:

  • MP3 - file format that uses the MPEG1 (Layer 3) codec to transport and stream audio in small files.
  • AIFF - uncompressed audio file format used by Apple that uses the PCM codec. 
  • h264 - compressed video format that compresses/decompresses High Def video for screens of all sizes using the MPEG4 codec. This particular format is so adept at displaying content on big flat screens as well as little smart-device screens that is supported by the international, digital TV body ATSC.
  • Quicktime (.MOV, .m4v, .mp4, et al.): this format can use a multitude of codecs, including MPEG1,2 and 4. It is an all around good format for Apple computers.
  • AVI (Audio Video Interleaved ):  this format is used by Windows machines and usually contains video encoded with Divx, Xvid or some variety of Window Media Video codecs.

But there are also Digital Video codecs that can be on video tape in addition to hard drives:

  • DV - used for video tape recorders, color information reuced, max dimensions: 740x480, usually interlaced video
  • DVCPRO - better sound quality and better chrominance accuracy
  • DVCAM - invented by SONY, similar to DVCPRO
  • DVCPRO50 - very good quality, accurate color representation. Used for high-quality productions where HD quality is not required.
  • DVCPRO100/DVCPRO HD - High Definition quality format that supports the same color representation as DVCPRO50, but also supports variable frame-rates and is usually recorded on tape-based, cinema quality cameras or smaller, handheld cameras utilizing flash memory. As a result, this format is generally for professionals only.
  • HDV (High Definition Video) - Conceived and developed by JVC and supported by Sony, Canon and Sharp as a low-cost high definition format. When you buy a consumer HD camera today, it will almost always be using this format. Supports  720p, 1080i and 1080p content.

Why should I care about codecs and formats?

Codecs and Formats are important because when you deliver projects to clients, the clients have editors or producers who have strict codec and format requirements. If the delivered file isn’t in the formats they have requested, they are going to do extra work to convert them. In other words, if you haven’t delivered anything usable, then you haven’t delivered.

Furthermore, in order to export your animations with a particular codec to a particular file format, you usually have to have certain things set up initially, such as frame-rate, audio and dimensions. E.g. you wouldn’t create a standard definition, NTSC DV composition for something that is meant to go into a high definition project. Colors are different, screen dimensions are different, codecs are different... you get the picture.

Understanding these concepts before you even open up After Effects will not just make things much easier for you throughout: they will make it possible to even begin!

 

Type exercises

Let's end with some simple type exercises. The Goal: Choose a typeface that you have some familiarity with, or perhaps just admire, and sketch versions of it modified by three action words. You can use the verbs themselves for the text content for each sketch. Below are some student examples:

 

What Exactly Are Action Words?

Action words are words that express active endeavors, as opposed to passive. You'll often see referecne to these online in regards to resume prepartion, as action words are far more effective in conveying ambition, effectiveness, and success. In our case, this isn't some workforce prepartion class: we're more interested in creativity, and action words are perfect as they activate the visual centers of the brain. Some examples of action verbs:

 

Richard Serra, Verb List, 1967, graphite on paper.

The piece above is by artist Richard Serra, but you can find action verbs pretty much anywhere. After you've sketched multiple versions for each of your three action verbs, we'll take a look at everyone's sketches and choose which onces to animate. Below are examples of some sketches I made in response to a few action words:

Baskerville with 'distribute' applied to it. 
Baskerville with 'spill' applied to it.

Today we’re going to begin by discussing the midterm.

After this, we will work in class on the text projects we worked on last week. Below are examples of the type sketches I made last week in response to various action words, and an animated version of one of these concept sketches. Using your own sketches, try to animate some of your text ideas in After Effects. 

Baskerville with 'distribute' applied to it.

 

 

Baskerville with 'spill' applied to it.

Using the above sketches as my model, I animated the 'spill' type in the following way:

  • We'll start today by finishing up on our text animations and presenting them.  
  • Then we'll discuss your ideas for the Midterm. Please have any references available to present so we can all see what you're thinking.
  • We'll spend the remainder of class researching for the midterm.

Week 10 class trip:

The Cooper Hewitt's Smithsonian Design Museum will be hosting an event on Wednesday, April 3 entitled "DesignPrep | Cinematic Storytelling."  Imaginary Forces Creative Director Alan Williams will share a behind the scenes perspective from main titles such as South Park, Stranger Things, and Anne with an E - revealing design principles, the power of abstraction and composition, as well as innovative storytelling techniques that students will apply to their very own boarded title sequence. I suggest we all attend this event rather than meet on our regularily scheduled meeting time the following night. Let's open it up to discussion!

Regardless of what we decide as a class, you can [Click here to register].

 

In-Class Broadcast Design Exercise: The Glass Panel Intro Animation

This intro wipe was developed for a freelance client of mine, Fordham University, for an interview series I worked on for them. The concept involves glass-like panels, floating back and forth on the screen at different depths, alternately showing the underlying footage and text in some frames, and blowing out these elements in others. The second half – where a logo appears to be floating in the middle of a room – we will do in another tutorial. You can download the exercise files for this lesson [here].

 

 

 

Thumbnail Sketches

This concept began with simple thumbnails, which you can view below. As these were enough for me to begin animating the project file, and in the interest of time, I opted to skip a storyboard. You can see how these sketches, however, demonstrate the basic concept I was going for: interview subject underneath, with text tracking across the screen and glass panels interspersed amongst this type, eventually revealing wide shot of the interview space. 

 

Exercise Tutorial Videos

We'll be doing this exercise in class today, but I have created tutorial videos for each step of the process, just in case you want to refer back to it at a later date.

 

 

 

 

 

Completing the intro wipe

 Let's complete the intro wipe from last week. You'll recall the glass panels concept that we implemented, along with some floating text. The next step is to add a 3D logo floating in the frame, as seen in the example below, and you can download the [ exercise files here ].

 

Tutorial Videos

 

 

 

 

 

The Midterm Presentation is on April 4th at 6pm sharp!

The midterm for this course is really meant to be stage one of a two stage, semester long project, culminating with the final project. You could, for example, begin with a concept design (or re-design of an existing concept: like rethinking theApple Inc. branding, for example), and then create some animated assets around this conecpt. This would then carry forward into the final project, where you would create some longer form content around this concept. Let's take a look at an example. And here is another.

You don't need to do something animated – you could use live action or a mixture of live action and animatin. I am very open to any and all ideas, so feel free to come up with something different and we can discuss whether it’s feasibile. 

 

Midterm suggestions and guidelines

  • You could create your own broadcast, corporate, app, or game identity. An identity includes all the design assets associated with a brand: logo, typography, color palette, etc. You could develop this identity for something real or fictional. With this identity developed, you can then
    • Create a logo/identity animation 

    • For broadcast or corporate-based projects, create concepts, sketches, thumbnails and, if necessary, storyboards for a logo animation or title intro, a bump or stinger, interstitial or wipe, and lower 3rds. 

    • For game or app-based designs, develop logo intros, examples of game graphics, and user interface animations. 

  • Finally, create other elements that work towards a complete graphics package for this identity, e.g.:

    • A set of broadcast design assets (i.e. lower thirds, a bug, interstitials, bumpers, title cards, etc.) for

      • A sports network
      • a primetime drama
      • a terrible reality show
      • an Adult Swim interstitial

This midterm work can be in support of your final, but it doesn't have to be: you can do something totally different for the final, if you so choose.