ART 222

Digital Multimedia

@ KCC New Media Arts
ART 222

Digital Multimedia

Intro to Video Production

Teacher: Chris Gargiulo

Digital Multimedia introduces digital video editing and motion graphics design for film, television, and the web. The full production process for time-based media is explored using Adobe Premiere, After Effects, Audition, and Encore.

Multimedia can be defined as image + text + sound. Today's designers often need to integrate video and advanced motion graphics into web projects requiring a foundation in the production process for time-based works of digital multimedia. This class provides studio experience in multimedia concepts and techniques through the creation of time-based works of art. During the first few weeks of the semester students learn the basics of video production using digital camcorders, video editing using Adobe Premiere, sound design using Adobe Audition, intermediate motion graphic design using Adobe After Effects, and DVD authoring using Adobe Encore. During the second half of the semester, students go through the full creative process of pre-production, production, and post-production creating a time-based work of digital multimedia.

Course Content

The Schedule

Points
Grade
200
Video Project
40%
200
Final Project
40%
100
Crit
Crit
20%
500
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
100%

Grading System

The Calendar

Calendar loading...

Lessons

1 Intro to the Course Expand/Collapse

Week 1: This week we will go over the course and the major assignments and deliverables. Lessons include an intro to the creative design & production process for time-based multimedia.

Agenda:

  1. Introduction to the course
    • In this class we will go through in detail the design process of planning and designing time-based works of digital multimedia.
  2. Game plan for the semester
    • Overview of the syllabus
    • two projects, one small, one large
  3. We will take a look at student work from past years.
  4. Intro to video editing with Adobe Premiere.

Presentation:

Class Overview - The Design Process for Time-Based Media:

Class examples + related links:

Video Modal Window Examples:

Product Video Examples:

Web Site Features Video Examples:

Related Articles:

Other Related Resources:

Lessons:

Assignment: Video AssignmentDue: Week 6

  1. Set up your class web page.
  2. Watch the Intro to Premiere video lesson above.
  3. Go to the Adobe TV web site and view the intro lessons on Adobe Premiere.
  4. Skim the Adobe DV primer posted above.
  5. Start thinking about concept ideas for your video project.
2 Intro to Digital Video Expand/Collapse

Week 2: We will continue where we left off last week learning the basics of video editing in Adobe premiere including more advanced options such as using keyframes for simple animation inside of Premiere.

Agenda:

  1. Lessons:
    • More control options for clips on the timeline (ie. keyframes)
    • In-class demo of equipment
    • Some ideas/options for your video assignment

Class examples + related links:

Assignment: Video AssignmentDue: Week 3

  1. Familiarize yourself with the NMA stock video collection and audio library.
  2. Begin planning your video project. Start by writing down potential ideas, then come up with a concept to execute. Prepare to shoot your own video.
3 Video Production Expand/Collapse

Week 3: We will demo equipment in class and introduce topics such as framing & composition, depth of field, and recording audio with various microphones. We will also begin signing out equipment for your video project.

Agenda:

Class examples + related links:

Assignment: Video ProjectDue: Week 6

  1. Familiarize yourself with the NMA copyright/royalty free stock video and audio collection.
  2. Sign out DV equipment as needed.
  3. Continue working on your Video Assignment project.
4 Video Production Expand/Collapse

Week 4: Work week to dedicate time toward your video project. In-class time for 1-on-1 supprt and feedback. Short lessons on the production process for DV.

Agenda:

Class examples + related links:

Assignment: Video ProjectDue: Week 6

  1. If you haven't done so already, you should be shooting video and capturing/logging it this week.
  2. If you haven't done so already, you should already have the basic framework of your project in Premiere, and in the process of putting together an initial rough cut/1st draft.
5 Intro to After Effects Expand/Collapse

Week 5: Work week to complete your video project plus an introduction to After Effects. In addition to some in-class working time, we will begin learning how to create more advanced motion graphics using Adobe After Effects.

Agenda:

Class examples + related links:

Assignment: Video ProjectDue: Week 6

  1. Watch all of the above Adobe TV video lessons on After Effects.
  2. By now you should be done with your principal production of your video project (gathering music + video, shooting video, recording audio, etc.) and working on your editing, sound design, and over-all polish (post-production).
  3. Please post your final video file as a .mp4 (H264) on your class web page for Tuesday's class next week.
6 Time-based Multimedia Project Expand/Collapse

Week 6: Critique of the video project. After the critique we will continue our After Effects Lessons and tests including the basics (translation, rotation, and scale) and some text animation techniques.

Agenda:

Class examples + related links:

Assignment: Final Project - SynopsisDue: Week 7

  1. Write up a synopsis describing your final project idea. Consider beginning some of the other pre-production planning steps such as writing up an outline, a treatment, a script, and a storyboard.
  2. Post your synopsis online on your class web page (ie. in pdf format).

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Start thinking of project ideas for your final.
  2. Heads up: Next due dates are Week 8 (treatment) and Week 10 (tests/story reel) [MIDTERM CRITIQUE]
    • MIDTERM critique deliverables:
      1. Visual Tests - be prepared to show a series of visual tests as evidence of your design process.
      2. Story Reel - put your treatment/storyboard into motion and add preliminary music to create a time-based piece that demonstrates the full story (beginning, middle, and end).
7 Time-based Multimedia Project Expand/Collapse

Week 7: Brainstorm sessions to help figure out the client and conceptual direction of your final projects. We will also learn some different line animation techniques in After Effects.

Agenda:

Class examples + related links:

Assignment: Final Project - StoryboardDue: Week 8

  1. Write up a detailed storyboard that visually communicates your project. Include text to help accompany the visual sketches.
  2. Post your storyboard online on your class web page (ie. in pdf format).

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Consider also creating other pre-production elements such as a detailed outline, a shot list, character/scene sketches, a full written script, and a treatment.
  2. Start conducting a series of visual tests to determine the visual style of your final piece. Be prepared to show some visual tests to me in the coming weeks.
  3. Heads up: Next due date is Week 10 [MIDTERM CRITIQUE]
    • MIDTERM critique deliverables:
      1. Visual Tests - be prepared to show a series of visual tests as evidence of your design process.
      2. Story Reel - put your treatment/storyboard into motion and add preliminary music to create a time-based piece that demonstrates the full story (beginning, middle, and end).
8 Time-based Multimedia Project Expand/Collapse

Week 8: Storyboard Critique plus lessons on 3D in After Effects using parented layers and navigating with custom cameras in a 3D space.

Agenda:

Class examples + related links:

Assignment: Final Project - Story ReelDue: Week 11

  1. Start working on your Story Reel/Animatic.
  2. Each person's story reel may be slightly different than others. The purpose of the story reel is to provide a time-based framework/test run of the full piece (beginning, middle, and end) that can act as an early look at the timing, pacing, and general tone of the piece. At the very least, a story reel should have a full audio track for the full duration of the piece and visuals of sketched storyboard frames (some may have parts in motion) to communicate the story.

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Conduct as many tests in After Effects as you can, then place small versions of your tests into an html page using HTML5 video and MediaElement.js. See John Doe's AE Tests for an example.
  2. Heads up: Next due date is Week 10 [MIDTERM CRITIQUE]
    • MIDTERM critique deliverables:
      1. Visual Tests - be prepared to show a series of visual tests as evidence of your design process.
      2. Story Reel - put your treatment/storyboard into motion and add preliminary music to create a time-based piece that demonstrates the full story (beginning, middle, and end).
9 Time-based Multimedia Project Expand/Collapse

Week 9: Continue lessons on 3D in After Effects and how to display video on an HTML web page via HTML5 that is cross-platform, cross-browser, and backward compatible.

Agenda:

Class examples + related links:

Assignment: Final Project - Story ReelDue: Week 11

  1. Continue working on your Story Reel. Be prepared to post your story reel on your class web page using HTML5 video and MediaElement.js.
  2. Conduct as many tests in After Effects as you can, then place small versions of your tests into an html page using HTML5 video and MediaElement.js. See John Doe's AE Tests for an example.

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. AE Tests:
    • Complete your 3D-in-AE tests, then place your mp4 video into an html page on your AE Tests page using HTML5 video and MediaElement.js.
    • Do a cut-out animation (Guinness Commercial) and wiggle test in After Effects, then place your mp4 file into an html page on your AE Tests page.
  2. FINAL PROJECT: Continue working on your final project. Be prepared to present your story reel and all pre-preproduction development in-class in a critique-style format in two weeks.
    • Pretend as if you are an ad agency and the client would like a mid-project report on what the design agency will be creating.
    • Be prepared to present any and all pre-production documentation
      • An updated synopsis and treatment is mandatory.
      • A full script, outline, shot list, and storyboard are helpful, but optional.
      • Post any visual tests that you have conducted to date. If you have not yet conducted any tests, post style examples for us to visualize what style animation you may be considering for your final project.
    • Use the elements from your storyboard to pre-visualize your final project set to time with audio by creating a story reel/animatic.
    • Story reels and visual style tests are due in two weeks (week 11).
10 Time-based Multimedia Project Expand/Collapse

Week 10: Continue lessons in After Effects. Full work week for the final project to preparation for the midterm critique (story reel + visual tests) and first-round draft.

Agenda:

Class examples + related links:

Assignment: Final Project - Story Reel/TestsDue: Week 11

  1. Complete your Story Reel, if you haven;t done so already. Post your story reel on your class web page using HTML5 video and MediaElement.js.
  2. Conduct as many visual tests as you can and posts these tests for review next week. If you are posting any video files as tests, be sure to place your tests into an html page using HTML5 video and MediaElement.js. See John Doe's AE Tests for an example.

Assignment: First Round DraftDue: Week 14

  1. If you haven't done so already, please begin working on your first round draft.

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Continue working on your final project.
  2. Be sure to begin thinking about the three components of your final project:
    1. Final Video (exported as either .mov, .avi, or .mp4).
    2. Final Video inside of a Web Interface (ie. a HTML microsite/micropage).
    3. Custom DVD Interface with Menu (that contains all of your class video projects).
11 Mid-term Critique Expand/Collapse

Week 11: Midterm Critique. We will take a look at the story reels and visual tests, then provide feedback to move to the next step: 1st round drafts of the final project.

Agenda:

Class examples + related links:

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Over the break continue working on your final project by working on your first round draft. Consider making changes to your project that were suggested during the midterm critique.
12 Spring Break Expand/Collapse

Week 12: Spring Break. No class this week due to the break. Use this week off to relax, take care of yourself, play catchup, or go ahead to begin your final project. Be sure to backup all of your work to date.

13 Time-based Multimedia Project Expand/Collapse

Week 13: Intro to Encore and how to create a Custom DVD. Continue working on your first drafts. In-class working time will be availible and 1-on-1 support.

Agenda:

Class examples + related links:

Assignment: First Round DraftDue: Week 14

  1. Please bring in a first round draft to class next week for an informal critique.

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Continue working on your final project.
  2. Be sure to be working on all three components of your final project:
    1. Final Video (exported as either .mov, .avi, or .mp4).
    2. Final Video inside of a Web Interface (ie. a HTML microsite/micropage).
    3. Custom DVD Interface with Menu (that contains all of your class video projects).
14 Time-based Multimedia Project Expand/Collapse

Week 14: Review of the 1st drafts plus brief lessons how to improve your audio using Audition and how to use video modal boxes.

Agenda:

Class examples + related links:

Assignment: Second Round DraftDue: Week 15

  1. Please bring in a second round draft to class next week for an informal critique.

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Continue working on your final project.
  2. Be sure to be working on all three components of your final project:
    1. Final Video (exported as either .mov, .avi, or .mp4).
    2. Final Video inside of a Web Interface (ie. a HTML microsite/micropage).
    3. Custom DVD Interface with Menu (that contains all of your class video projects).
15 Time-based Multimedia Project Expand/Collapse

Week 15: Review of the 2nd drafts and in-class working time will be availible with 1-on-1 support.

Agenda:

Class examples + related links:

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Continue working on your final project.
    • In addition to working on your final video, be sure to balance working on your DVD and web interfaces.
  2. Be sure to be working on all three components of your final project:
    1. Final Video (exported as either .mov, .avi, or .mp4).
    2. Final Video inside of a Web Interface (ie. a HTML microsite/micropage).
    3. Custom DVD Interface with Menu (that contains all of your class video projects).
16 Time-based Multimedia Project Expand/Collapse

Week 16: Full work week. In-class working time will be availible with 1-on-1 support.

Agenda:

Class examples + related links:

Assignment: Time-based Multimedia ProjectDue: Week 17

  1. Continue working on your final project.
    • At this point you should be done or putting the final touches on your final video and working on your DVD and web interfaces.
  2. Be sure to complete all three components of your final project:
    1. Final Video (exported as either .mov, .avi, or .mp4).
    2. Final Video inside of a Web Interface (ie. a HTML microsite/micropage).
    3. Custom DVD Interface with Menu (that contains all of your class video projects).
17 FINAL CRITIQUE Expand/Collapse

Week 17: Final critique. Last day of class. All final project deliverables are due this week.

Agenda:

Critique Schedule:

Tuesday Thursday Time
---------- SETUP ---------- 8:00-8:15
#1 #8 8:15-8:25
#2 #9 8:30-8:40
#3 #10 8:45-5:55
#4 #11 9:00-9:15
---------- 15 Min. BREAK ---------- 9:15-9:25
#5 #12 9:30-9:40
#6 #13 9:45-9:55
#7 #14 10:00-10:10
---------- CLOSING REMARKS ---------- 10:15-10:30

Pinterest

Chris Gargiulo's Pinterest Boards

Digital Multimedia Related Resources

Motion Design Related Resources

About

This is the faculty web site for KCC New Media Arts instructor Chris Gargiulo. Chris is a designer, animator, and filmmaker with experience in print design, web design, front-end web development, motion graphics, and animation for various film, web, and multimedia projects. This site is for his students and for all who are interested in web design related topics and techniques.

Contact

For specific information about this site and the Interface Design concentration of courses within New Media Arts program at Kapi‘olani Community College, please contact:

Chris Gargiulo

Telephone: 808-734-9707
Email: gargiulo [at] hawaii.edu

For more general information about New Media Arts program at Kapi‘olani Community College, the Associates degree, and the admissions process to become a student, please contact:

Steve Harris

Telephone: 808-734-9510
Email: snharris [at] hawaii.edu
Chris Gargiulo KCC New Media Arts