COMPUTER
ART
483
GRAPHIC
ASSISTED
Department of Visual Arts | California State University, Fullerton
◊
AGENDA:
(Dates and projects are subject to change)
WEEK 01 _Friday Aug 30_______________________________________________
Intro.
Syllabus
Book
Communication
Office hours
Tools
File naming NCSPD
...
All Softwares we may use!
Adobe After Effects 2D|3D
Ken Burns
"VOTE!"
NTSC D1 W
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]
VOTE!
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
Scene
Materials
Lighting
Spot, Omni light, Area light, Presets
Shadows
Cameras
Dynamic camera
Introducing Project 2 [Brief]
WEEK 07 _Friday Oct 11_______________________________________________
Due today:
Project 2 | TV AD
Exporting the project 2
Motion in Motion
Demo
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.
Reveal.
Rendering Project 2 and Upload the result.
DUE next class:
FILE 1.
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, ...
FILE 2.
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.
Demo:
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
Demo:
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
Auto-animate
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 _______________________________________________
***Thanksgiving***
WEEK 14_Friday Dec 06 _______________________________________________
On-screen review.
Color in calling actions. CTA Buttons
Retouch.
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.
NCSPD
LastFirst_Class_Semester_ProjectName_Date.xxx
SmithJohn_art483_fa19_serialkiller_mmddyy.jpg
