Department of Visual Arts | California State University, Fullerton
(Dates and projects are subject to change)
WEEK 01 _Friday Aug 30_______________________________________________
File naming NCSPD
All Softwares we may use!
Adobe After Effects 2D|3D
NTSC D1 W
25FPS , Square Pixels
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.
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_______________________________________________
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]
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
Using Motion Blur
Using a Text Animator
Nesting One Composition in Another
Using Illustrator Graphics in a Composition
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_______________________________________________
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_______________________________________________
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_______________________________________________
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
Spot, Omni light, Area light, Presets
Introducing Project 2 [Brief]
WEEK 07 _Friday Oct 11_______________________________________________
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...
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.
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 _______________________________________________
After Effect: Complex motion from still image
Working Files [Here]
Motion Graphic: Letters | Words
Motion Graphic: Geometric Assets
Motion Graphic: Icons
List American Typographers on Wiki [Here]
Typographic Poster in Motion
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
Square grid vs. Pixel grid
Import from Ai
Import from Ps
Working files [Here]
WEEK 12_Friday Nov 15 _______________________________________________
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 _______________________________________________
RCC App Wireframe.
Creating identity/brand, digital assets for RCC.
Smart objects, Mock-ups
*Download HERBiShop Sample from Source page
* 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:
WEEK 13_Friday Nov 29 _______________________________________________
WEEK 14_Friday Dec 06 _______________________________________________
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.