Objective
To learn After Effects production techniques by recreating this animated email.
Discussion
Photoshop's timeline can handle basic pixel animation, but sometimes you'll need the powerful vector tools in After Effects for more complex motion. After Effects projects can be rendered and imported into Photoshop, cleaned up and then optimized as animated GIFs.
Because GIF is a pixel format, file size is an issue. Therefore, when designing GIF animation, keep these limitations in mind:
- keep the dimensions of the animation area small
- limit the number of colors (avoid photos, if possible)
- keep the number of frames to a minimum
In this exercise, we will create an animated GIF file that is twice the width/height needed so that higher resolution monitors can display the art with integrity.
The animation has been designed as a loop because the art is embedded inside a HTML email. The first frame has also been designed as a stand-alone frame because some email programs will not play animations.
Also read this tutorial on AE keyboard shortcuts and/or download this cheat sheet.
Procedure
preparing for the exercise
- download starter files
- examine download files
- open "square_finished.gif" in photoshop, examine timeline
- open "square_start.ai" in illustrator, examine layers
- launch after effects
- file > import > file "square_start.ai" (as composition, sequence = no)
- rename "square_start" composition as "square"; open
- composition > composition settings bg = white, duration = 1;00
- save as "square.aep"
creating a vector morph
- select "square large" layer: layer > create shapes from vector layer
- select "square large outlines" layer
- twirl down: contents > group 1 > shape 1 > path 1 > path
- add keyframes: 00f, 08f
- select "box large" layer: layer > create shapes from vector layer
- select "box large outlines" layer
- twirl down: contents > group 1 > shape 1 > path 1 > path
- copy path
- select "square large outlines" layer: paste on keyframe at 08f
- delete "box large" layers
animating the key
- select "square white" layer: restack to top
- add keyframes for position/scale: 00f, 08f
- 08f: scale = 15%, position =??
- select "square small" layer: restack to top
- add keyframes for position/scale: 00f, 08f
- 08f: scale = 1%, position =??
- select "key" layer
- add keyframes for position: 00f, 08f
- 08f: position =??
- trim above layers at 08f (opt+] )
animating the bow
- select "bow" layer: layer > create shapes from vector layer
- select "bow outlines" layer: trim at 09f (opt+[ )
- add "trim paths" to "path 1"
-
add keyframes for start/end: 09f, 29f
• 09f start = 93%
• 29f start = 0%
• 09f end = 100%
• 29f end = 60%
- graph editor: smooth transition
- select "bow outlines" layer: edit > duplicate (cmd+D)
- layer > transform > flip horizontal
animating the strings
- select "strings horizontal" layer: layer > create shapes from vector layer
- select "strings horizontal outlines" layer: trim at 09f (opt+[ )
- add "trim paths" to "path 1"
-
add keyframes for start/end:
09f, 19f
• 09f end = 10%
• 19f end = 100%
- select "strings horizontal outlines" layer: edit > duplicate (cmd+D)
- layer > transform > flip horizontal
- repeat with "strings vertical"
-
delete uneeded layers
rendering the movie
- composition > add to render queue
- render settings = best
- output module = lossless
- output to: "square.avi"
-
save
making a GIF in photoshop
- launch photoshop
- file > import > video frames to layers: make frame animation = yes
- save as "square.psd"
- window > timeline
- adjust timing: frame 1, 30 = 1 sec
- select all frames (flyout)
- copy frames (flyout)
- select frame 30
- paste frames: after selection (flyout)
- reverse animation (flyout)
- play animation
- file > save for web (preset = 32 no dither)
laying out the animated email
- launch Dreamweaver
- open "email.html"
- insert > image: "square.gif" (below <h1>), w=180, h=200
- select <body>: insert > div: id=content (wraparound)
- select <a> around "learn more": insert > div: id=button (wraparound)
- window > CSS designer: sources:
• attach existing CSS file (+): "reset.css", "boilerplate.css", "font.css"
• define in page (+): <style>
- apply <#content.centered>
- window > CSS designer: add selectors (source=<style>):
• body: layout: margin-top/bottom=40px, bg-color=light gray
• #content: layout: width=600px, margin-left/right=auto, padding=30px(all); backgrouns: bg-color=white
• #button: layout: margin-top=50px, margin-bottom=30px
• #button a: layout: padding-top/bottom=12px, padding-left/right=20px;
text: color=white, weight=bold, letterspacing=.2em;
border: radius=5px; background: bg-color=red
• #button a:hover: text: decoration=none; background: bg-color=black
• .social: layout: margin-top=50, margin-bottom=20, margin-left/right=5
• .small: text: font-size=10px, line-height=14px
- apply <img.social>, <p.small>
- window > CSS designer: edit selectors (source=fonts.css):
• body: text: color=gray, font-family=Arial
• h1: layout: margin-bottom=60px; text: font-color=red
• a: text: font-color=black, font-weight=bold
• a:hover: text: decoration=underline
- save; file > preview in browser (opt+F12 and cmd+F12)
grading
- publish exercise files (see separate lesson)
- make a link from your process page to this assignment
