Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Interactive Design Exercises
Integrated: Animated Email (Illustrator/After Effects/Photoshop)

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

  1. download starter files
  2. examine download files
  3. open "square_finished.gif" in photoshop, examine timeline
  4. open "square_start.ai" in illustrator, examine layers
  5. launch after effects
  6. file > import > file "square_start.ai" (as composition, sequence = no)
  7. rename "square_start" composition as "square"; open
  8. composition > composition settings bg = white, duration = 1;00
  9. save as "square.aep"

creating a vector morph

  1. select "square large" layer: layer > create shapes from vector layer
  2. select "square large outlines" layer
  3. twirl down: contents > group 1 > shape 1 > path 1 > path
  4. add keyframes: 00f, 08f
  5. select "box large" layer: layer > create shapes from vector layer
  6. select "box large outlines" layer
  7. twirl down: contents > group 1 > shape 1 > path 1 > path
  8. copy path
  9. select "square large outlines" layer: paste on keyframe at 08f
  10. delete "box large" layers

animating the key

  1. select "square white" layer: restack to top
  2. add keyframes for position/scale: 00f, 08f
  3. 08f: scale = 15%, position =??
  4. select "square small" layer: restack to top
  5. add keyframes for position/scale: 00f, 08f
  6. 08f: scale = 1%, position =??
  7. select "key" layer
  8. add keyframes for position: 00f, 08f
  9. 08f: position =??
  10. trim above layers at 08f (opt+] )

animating the bow

  1. select "bow" layer: layer > create shapes from vector layer
  2. select "bow outlines" layer: trim at 09f (opt+[ )
  3. add "trim paths" to "path 1"
  4. add keyframes for start/end: 09f, 29f
    • 09f start = 93%
    • 29f start = 0%
    • 09f end = 100%
    • 29f end = 60%
  5. graph editor: smooth transition
  6. select "bow outlines" layer: edit > duplicate (cmd+D)
  7. layer > transform > flip horizontal

animating the strings

  1. select "strings horizontal" layer: layer > create shapes from vector layer
  2. select "strings horizontal outlines" layer: trim at 09f (opt+[ )
  3. add "trim paths" to "path 1"
  4. add keyframes for start/end: 09f, 19f
    • 09f end = 10%
    • 19f end = 100%
  5. select "strings horizontal outlines" layer: edit > duplicate (cmd+D)
  6. layer > transform > flip horizontal
  7. repeat with "strings vertical"
  8. delete uneeded layers

rendering the movie

  1. composition > add to render queue
  2. render settings = best
  3. output module = lossless
  4. output to: "square.avi"
  5. save

making a GIF in photoshop

  1. launch photoshop
  2. file > import > video frames to layers: make frame animation = yes
  3. save as "square.psd"
  4. window > timeline
  5. adjust timing: frame 1, 30 = 1 sec
  6. select all frames (flyout)
  7. copy frames (flyout)
  8. select frame 30
  9. paste frames: after selection (flyout)
  10. reverse animation (flyout)
  11. play animation
  12. file > save for web (preset = 32 no dither)

laying out the animated email

  1. launch Dreamweaver
  2. open "email.html"
  3. insert > image: "square.gif" (below <h1>), w=180, h=200
  4. select <body>: insert > div: id=content (wraparound)
  5. select <a> around "learn more": insert > div: id=button (wraparound)
  6. window > CSS designer: sources: 
    • attach existing CSS file (+): "reset.css", "boilerplate.css", "font.css"
    • define in page (+): <style>
  7. apply <#content.centered>
  8. 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
  9. apply <img.social>, <p.small>
  10. 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
  11. save; file > preview in browser (opt+F12 and cmd+F12)

grading

  1. publish exercise files (see separate lesson)
  2. make a link from your process page to this assignment

BACK TO TOP
Last updated: 3/3/17 ■ Webmaster: Paul Young