Department of Visual Arts | California State University, Fullerton


(Dates and projects are subject to change)



WEEK 01 _Friday Aug 30_______________________________________________







Office hours


File naming NCSPD


All Softwares we may use!


Adobe After Effects 2D|3D

Ken Burns





Duration: 10s

25FPS , Square Pixels

Quality: Best

Resolution: Half

Format: QuickTime

Format Option: Animation

Audio Output Off



Watch on Lynda: After Effects CC 2019 Essential Training: The Basics by Mark Christiansen

For sure watch Introduction and Foundations chapter. (My suggestion: Watch all 2 hours.)




WEEK 02 _Friday Sep 06_______________________________________________


Continuing... After Effects


Introducing Project 1 - Kinetic Type [Brief]


Creating digital assets outside of your software and sharing via library.

Create texture/pattern in Illustrator >  Import to After Effects

Text from Photoshop? no problem.


Basic masking

Title/action safe zone

Set anchor point position

Animate your text

Move your type over path

Sync audio with type

How to Render/Export


Type practice - working file [Here]


Pitchboard template [Here]



By the end of class produce a promo to encourage your audience to Vote!

At least use 10 assets (photo, text, digital shape, pattern,...)

Duration: 25s to 30s.

Composition size: NTSC D1 WideScreen

Pixel ratio: Square pixels

Frame rate: 24

Render and export as: Best Quality / Half Resolution / QuickTime format / Animation VideoCode

Upload your file to the Titanium.



WEEK 03 _Friday Sep 13_______________________________________________



Due Today:

What song?

Project 1 | at least 2 Pitchboards | one storyboards

Pitchboards show general idea - Use the template from last week.

Storyboards show your idea in detail according to the timeline. (actions, directions, texts, images, possible sync on chorus, ...)

If you need template for story board [Here]


Reviewing Pitchboards|Storyboards

Upload to Titanium (Scan or Photo*)

* If you are taking photo you must adjust lights, avoid shadows and crop unnecessary background and correct the orientation.


Share your song info [Here]



CSUF's Diner Download working file [Here]


Start a New Project

Create a New Composition

Adding Footage to a Composition

Resizing a Layer

Creating a Solid

Applying an Effect to a Layer

Applying a Blending Mode

Drawing a Mask with a Shape Tool

Animating Flashing Lights

Adding Text

Using Motion Blur

Using a Text Animator

Customizing Transformations

Nesting One Composition in Another

Using Illustrator Graphics in a Composition

Applying  Rotation

Using Markers

Parenting to Coordinate Two Layers

Adding Audio to a Composition



Come up with your own way to animate the CSUF’s Diner composition. For example, you can change how the Eat at CSUF’s text in the corner appears on the screen; you can make all of the text items rotate or slide into place, or you can fade them in by animating the Opacity property.


You can also play with different ways to animate the lights. For example, instead of having them turn on and then turn off in turn, you can have them turn on in sequence and then all turn off at the same time, or have them all flash on and off together.



Create your Avatar - circular 110px diameter





WEEK 04 _Friday Sep 20_______________________________________________


Due today:

Project 1 | Digital Draft


Effect in After Effects


Fullerton Auction - Working files [Here]



Bring an idea to use with Green Screen, up to 10 seconds.



WEEK 05 _Friday Sep 27_______________________________________________



Due today:

Project 1 | Final


Green Screen in After Effect

Green Screen Assets, Images [Here]

Green Screen Assest, Footages [Here]



Cinema 4D Intro



WEEK 06 _Friday Oct 04_______________________________________________


Due today:

1. Green Screen | 5 to 20 seconds | Loop or GIF

2. Auction Scene by your footage | 7 to 15 seconds | with Audio | animated type + Shadow



Cinema 4D


3D Text

3D objects




Spot, Omni light, Area light, Presets



Dynamic camera



Introducing Project 2 [Brief]




WEEK 07 _Friday Oct 11_______________________________________________


Due today:

Project 2 | TV AD


Exporting the project 2


Motion in Motion



Working files [Here]




Ex. Pick a brand to create a motion for their identity to use on Instagram.

540x540 25fps 6 seconds.




WEEK 08 _Friday Oct 18 _______________________________________________



Continue on Motion...


Shampoo Ad.


2D Image to 3D Space.




Rendering Project 2 and Upload the result.




DUE next class:



Brand motion in 6 seconds | 25fps| 540px x 540px

Try to promote/emphasis the brand service/functionality in your motion.

for example:

Fedex providing shipping services, so Fedex motion should imply changing the location, connection, ...

Starbucks distributing hot and cold beverages by focusing on coffee, so their motion can emphasis drinking, liquid, coffee bean, ...



TV Network Reveal | 4 seconds | 25fps | 500px x 500px | with audio.

Logo will have text, image, and slogan.




WEEK 09 _Friday Oct 25 _______________________________________________


Review Submissions.



After Effect: Complex motion from still image


Working Files [Here]


Chunk bites:

Motion Graphic: Letters | Words

Motion Graphic: Geometric Assets

Motion Graphic: Icons






List American Typographers on Wiki [Here]


Typographic Poster in Motion

6-8 seconds

750 x 1125 pixel

Format : .mov

You are required to reduce the file size to upload to the Titanium.


* Submitting any file in wrong format/size or without proper file name will not be considered. No late submission.


WEEK 10 _Friday Nov 01 _______________________________________________


Due today before class:

Poster in Motion



UX | Adobe XD


Sketch > WIreframe > Mockup


Web | App



Introducing Project 3 [Here]




Download Adobe XD Intro file [Here]


Download Adobe XD Wireframe assets [Here]


Download iPhone X - iOS 11 Color system GUI [Here]


Photoshop iOS assets Download [Here]


iPhone X Screen limited areas Example [Here]


WEEK 11 _Friday Nov 08 _______________________________________________


Due today before class:

Personal App wireframe/structure.


have your assets ready to use in your portfolio app.

Good quality images from your work, statement/bio, any logo/logotype, personal avatar or photo, resume (resumes will follow a clear hierarchy to be readable according to screen size).


No low quality image.


Continue on UX



New tools in XD |Grids | Shapes

Creating Icons

Square grid vs. Pixel grid

Import from Ai

Import from Ps


Pop-up menu

Drop-down menu


Working files [Here]


WEEK 12_Friday Nov 15 _______________________________________________


 Due today:

Final version of Personal App.


Introducing Project 4 RCC App[Here]




Layout template for iPhoneX and iPad [Here]


* If you are using the latest version of Adobe XD, share your prototype by choosing "Design Review" option.



WEEK 13_Friday Nov 22 _______________________________________________



Due today:

RCC App Wireframe.


Creating identity/brand, digital assets for RCC.

Smart objects, Mock-ups

*Download HERBiShop Sample from Source page

For inspiration:


* These are data-base generated visuals. They are not suitable for any graphic designer portfolio. Don't use them directly.


While you are creating your assets for RCC pay attention to:

  • Typography
  • Color scheme (Analogous? Monochromatic? Neutral? Triadic? Pastel? ...) No more than 3 main colors. Golden rule: 6:3:1.

consult your color palette with color wheel in Adobe Color or Coolors.

  • Unity in imagery
  • Backgrounds (texture, pattern, photo)




WEEK 13_Friday Nov 29 _______________________________________________









WEEK 14_Friday Dec 06 _______________________________________________


On-screen review.

Color in calling actions.  CTA Buttons


Expand your artboards by adding the iPad layout and adjust all necessary elements. Some images, menus, nav-bars, keyboards may need to re-size due to new specification in iPad.

Setting for sharing.




WEEK 15_Friday Dec 13 _______________________________________________



The final release is due for both devices.

Make sure the prototype is working similar to your wireframe.

Revisit all connections and internal links.

Sharing in Adobe XD is updating constantly.

To share your prototype follow the instruction in the class on Dec 06.