Commercial Series

Unit 1: Journal Website

Unit 2: App Project

Unit 3: Commercial Series— Create a Commercial series in After Effects. The commercial could be an extension of a design project from a previous course: Advertising Design, Package Design and etc. All commercials will be uploaded to Vimeo.

  • Option 1: one 20s TV commercial + one 8s Instagram Ad
  • Option 2: three 8-12s Instagram Ads

Unit 4: Mini movie

New Change—Unit 5: Updating your portfolio site with work you created this semester 5%


Copyrighting, voice-over, AE animation, techniques

Studio photoshoot

Art direction, project assistants, No studio?

Editing photography

Still photography, masking, AE cameras


Editing still photos and make it into cinemagraph, z-position + puppet pin

Stop Motion

Consistent lighting and still camera position

Create your own footage

Lighting is the key.

Find footage online

Edit all footage clips to be more consistent.

Summer internship projects at The Richards Group
Recent Student Work


M 03/23— Assign Project, Work in class—Puppet Pin tool, Project Discussion—Meeting individually: previous projects, company products, and initial slogan/copywriting.

W 03/25— Meeting individually: progress on a project concept, storyboard, footage, copywriting, voiceover, AE techniques?

M 03/30—Meeting individually: copywriting should be finished, AE technique is learned, the footage is prepared over the weekend.

W 04/01—1/3 commercial finished;

M 04/06— 2/3 commercial finished; Voice over should be prepared.

W 04/08— 3/3 commercial finished;

M 04/13— Project is due

Walking Cycle—Introducing puppet pin tool Effects
  • Animation Assignment: Animate a cartoon character and post it on Instagram and tag @yvecao by end of next class or submit on TCUonline
  • Post five inspiration entries on TV Commercial on your journal

App Promo Video

Redesign_iOS7_Big (1)

Vimeo guidelines

720p HD
16:9 aspect ratio
1280 × 720

Yes. There are templates, but use them wisely.

How to render your video in a smaller size?

Weekend Assignment— put at least 5 video entries about app promo on your journal.

1 Expand Animation

2 Video footage

3 3.1 Simple descriptions and break down into sections

4 Split view?

5 Audio to your target market

6 Solve a problem.

Please upload your final video on Vimeo,  leave your app description, credit information in the description area.

App Animation Demo

Tips on prototyping screen recording
  1. Download Kap to record your prototyping screen. Kap has the option of not showing mouse movements.
  2. Screen recording your prototype on a web browser will allow you to zoom and increase screen size.
Suggested Schedule:

W 02/12: Plan your animation and prepare additional screens needed for animation

Weekend: Prototype your App

M 02/18: Prototype is due for discussion (Use your phone if applicable) Screen recording your 1st clip.

W 02/20: work in class: Animate your 1st clip;

Weekend: Screen record and animate your 2nd clip.

M 02/25: Discussion: Introduction to your app. Screen record and animate your 3rd clip and finishing your app animation

W 02/27: Work on your intro

M 03/04: Final presentation on App animation. Journal is due for mid term.

App Poster

  • Work in class today
  • Finish touching up all 8 screens

Inspiration 1, Inspiration 2, Inspiration 3

Weekend Assignment

  • Journal entries: Post at least 5 inspirational entries on app presentation
  • Digital poster(100% complete) for presentation —due on Monday, 02/10, TCU Online
  • Printed poster—due on Wednesday, 02/12

App Poster Design Mounting Guideline:

Include app logo, slogan(less than seven words), app description (2-3 sentences) , icons, color codes, typography, procedure (step1,2,3) or features, graphic elements, background and etc

  • Include 8-10 screens
  • Use iPhone mock-ups (3D, flat, outlined or no frame)
  • Label all screens
  • 1–2 inch border
  • Flush mount on foam board, long side edge 32-36 inch*
  • Similar to original iPhone screen size *

  • Bold text: project requirements
  • *suggested guides

Masking and Morphing shapes in After Effects

Any problems submitting your Animated Type Poster?


  1. Masking Shapes Demo—Trkmat, Bezier Path, Parent
  2. Morphing—Shape Layer, Rotation

Work in Class:

Please Animate one of your logo—due at the end of this class, you may post it on your instagram @ me or submit via TCU Online

  1. Separate logo layers in illustrator
  2. Use anchor point/scale/position/opacity/ rotation/ mask/ morphing in AE to animate your logo
  3. Don’t forget to turn on your Sunshine *
  4. Save it for Instagram

Meeting Individually:

  1. Creative Brief
  2. App names
  3. Logo Drafts
  4. 8-10 Screen plans

Due on Monday 01/27:

  1. Finalized name and logo design
  2. 2-3 UI styles for the 1st & 2nd screens (Sketch or XD)

Project Deadlines:

  1. at least 7 screens developed for progress critique—Monday 02/03
  2. 8 screens poster (digital) Presentation—Monday 02/10
  3. poster printed and mounted is due—Wednesday 02/12
  4. DSVC submission—Friday 02/15

App Project

  1. Download Uber and Foursquare in the App store
  2. Discussion: Visual Design, please reflect on your journal later
  3. Weekend Reading assignment: iOS Human Interface Guidelines
  4. After Effects Recap
  5. Discussion: Uber & Foursquare
  6. Work in class today—Type animation, please keyframe position, rotation, scale, opacity and make it fun? It’s due at the end of class today.
  7. Individual consultation today—What’s your app ideas? 2-3 app ideas, be ready to show 3-5 inspirational journal entries or apps on your phone, popular apps, work sample

8. Due Wed 01/22

  • One final app idea—Design brief, app name, and logo drafts are due
  • Be ready to discuss thumbnails and plan for all 8-10 screens (Sketches on paper)
  • Logo Animation Exercise—Please bring a logo you designed to work in the next class

Intro to After Effects


This is Advanced Computer Application to Graphic Design course! A class with the purpose of introducing the design concepts and skills required to develop interactive content for the screen-based media. This class will focus primarily on the merging of aesthetics and functionality in interface design, designing information architecture, and designing for a satisfactory user experience.

I will be encouraging you to work both individually and in groups during the semester on various projects, across various applications. However, the course remains focused upon understanding and the application of basic conceptual and design skills. I intend to provide these required skills to you, in informative, fun, and creative ways!

Please check out and use the links on the right column☞ for help and inspiration!

  1. Reading Assignment this weekend: UI Design Basics Visual Design, please put down your reading notes on your journal.
  2. Download: Exercise file
  3. Demo:
    • Inputting footage from Ai & Ps
    • AE interface
    • Shortcuts
    • Path editing
    • Timeframe
    • Graph editor
    • Rendering
    • Loop gif
    • Keywords for tutorials: after effects move on a path, bouncing ball, looping gif


  • Create an animated type poster by the end of Wed class/Jan 15, you may post it on your Instagram and tag me @yvecao, or submit it in Exercise folder on TCUOnline.
  • 2-3 app ideas/flow maps due on Mon/Jan 15, be ready to show 3-5 inspirational journal entries or apps on your phone
  • One app final idea—Design brief due on Mon/ 01/20, be ready to discuss thumbnails and inspirations on your journal