Objective

To learn After Effects production techniques by recreating the above video. Also see alternate presentations:

• Full screen web presentation (not for most devices)
• YouTube Ifinite Looper

Procedure

preparing for the exercise

1. download starter files
2. examine downloaded files
3. open "flames-720x404.mp4" in Quicktime
4. take screenshot
5. launch Photoshop
6. open all 6 hi-res stock images, crop to 572x480
7. file > new: w=572px, h=480px, RGB
8. copy/paste all 6 images into new file
9. save as "472x480.psd"

preparing the Illustrator files

1. launch Illustrator
2. file > new: profile=web, w=1440, h=1280
3. save as "master.ai"
4. file > place "master.jpg" (as template)
5. rename "layer 1" as "pix"
6. file > place "472x480.psd"
7. new layer "flames"
8. file > place screenshot
9. new layer "rules"
10. draw 1pt rules: width=572 pts, dark gray
11. object > transform: move 60 pts down (copy)
12. object > transform > transform again (cmd+D)
13. new layer "text"
14. copy/paste select text from "porgys.txt"
15. format text: 33/60 Gill Sans, gray
16. heads: Gill Sans Extra Bold, white
17. adjust layout to match template
18. delete unneeded layers
19. hide "pix", "flames" layers
20. save
21. save as "specials.ai"
22. art board tool: isolate specials
23. delete unneeded layers, art
24. duplicate "text" layer, rename "tagline"
25. make tagline Gill Sans Italic, yellow
26. duplicate "text" and "tagline" layers 5x, replace text
27. save

setting up the After Effects file

1. launch After Effects
2. file > import > file "specials.ai" (composition, merged layers) (cmd+I)
3. file > import > file "572x480.psd" (composition, merge layer styles into footage) (cmd+I)
4. file > import > multiple files (all others) (cmd+opt+I)

animating the slide show

1. open "572x480" composition
2. composition > composition settings: duration = 30;01 (cmd+K)
3. trim stills to 6;00 (opt+ ] )
4. tween opacity (fade out from 5;00 to 6;00) (T)
5. start first layer at 3;00 ( [ )
6. stagger each layer 5;00 apart: jump to next keyframe (K), move ( [ )
7. duplicate last layer, restack to top, drag to left (last keyframe=4;00)
8. save

animating the specials

1. open "specials" composition
2. composition > composition settings: duration = 30;01 (cmd+K)
3. trim each layer to 5;00 (opt+ ] )
4. add position keyframes at 0;00, 0;15, 4;15, 5;00 (P)
5. move type off stage at 0;00 and 5;00 (left or right)
6. stagger each layer 5;00 apart: jump to next keyframe (K), move ( [ )
7. all layers: motion blur=on
8. save

retouching the flames

1. select "flames": new composition from selection (RMB)
2. composition > composition settings: duration = 30;01, w=1440 (lock aspect ratio=no) (cmd+K)
3. adjust position of footage
4. tween opacity (fade out from 19;20 to 20;00) (T)
5. duplicate layer (cmd+D)
6. start duplicated layer at 19;20 (K) ( [ )
7. duplicate layer again: move to right (P)
8. duplicate moved layer 2x
9. adjust start times for each layer
10. save

creating the master composition

1. select "master": new comp from selection (RMB)
2. composition > composition settings: duration = 30;01 (cmd+K)
3. add new layers: "flames", "572x480", "specials"
4. adjust layout
5. layer > new solid: black (cmd+Y); move to above "flames" layer
6. effects > generate > gradient ramp: scale, reposition, swap colors (black on bottom)
7. "flames" layer: layer > track matte > luma inverted matte
8. layer > new solid: black (cmd+Y); restack to bottom
9. save

creating the final composition

1. composition > new "~final": HDTV 1080, duration = 30;01
2. add new layer: "monitor", "master"
3. rotate monitor art, scale down
4. duplicate "monitor" (cmd+D), reposition
5. "master" layer: layer > mask > new mask (cmd+shift+N)
6. adjust mask size: double click upper left handle
7. duplicate "master": reposition, adjust mask
8. layer > new solid: warm gray (cmd+Y); restack to bottom
9. save

creating an alternate web composition

1. composition > new "~web": HDTV 720, duration = 30;01
2. drag "~final" composition into layers, scale down
3. layer > new solid: warm gray (cmd+Y); restack to bottom
4. save

rendering a HD movie for web presentation

1. "~web": compositon > add to Adobe Media Encoder queue (cmd+opt+M)
2. choose preset "YouTube 720p HD"
3. output to: "porgys_web_HD.mp4"
4. start queue

rendering a SD movie for YouTube

1. "~final": compositon > add to Adobe Media Encoder queue (cmd+opt+M)
2. choose preset "YouTube 480p SD wide"
3. output to: "porgys_final_SD.mp4"
4. start queue

rendering a HD movie for your archives

1. "~final": compositon > add to Adobe Media Encoder queue (cmd+opt+M)
2. choose preset "YouTube 1080p HD"
3. output to: "porgys_final_HD.mp4"
4. start queue

preparing the web presentation

1. play "porgys_web_HD.mp4" in Quicktime; take screenshot
2. open screenshot in Photoshop, crop
3. file > save for web "video-poster.jpg"
4. move "video-poster.jpg" and "porgys_web_HD.mp4" to "web" folder
5. open "web/index.html", examine code
6. file > preview in browser (copt+F12 or cmd+F12)
7. optional: publish as a link to your process page

grading

1. upload "porgys_final_SD.mp4" to your personal YouTube account (privacy=unlisted)
2. publish unlisted web address as a link from your process page