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

Graphic Design Exercises
After Effects: Editorial Illustration & Mail Chimp e-Newsletter

 

Objective

To learn Illustrator, Photoshop, and After Effects production techniques by recreating the above animated GIF. To learn basic After Effect expressions. To create a Mail Chimp e-newsletter.

Discussion

Motion is a powerful way to attract a viewer's attention. After Effects can easily add dynamic motion to an illustration. In this exercise we will explore setting key frames and adding simple expressions. Once the animation is completed in After Effects, the animation is rendered as a movie (.mov), then imported into Photoshop and saved as an animated GIF. Currently, Media Encoder does not support animated GIF's for Mac, but does for PC's.

When designing an animated GIF for Mail Chimp, keep these limitations in mind:

  • label and organize your layer stack in Ps or Ai
  • design your illustration about 1.5x larger than the final GIF size
  • keep the animation short and frame rate low
  • limit the number of colors (avoid photos, if possible)
  • utilize the color picker options in the 'save for web' color panel
  • Mail Chimp recommends file sizes around 100k
  • in Ps, reduce the size of GIF to around 5oopx wide
  • newer versions of Outlook do not support animated GIF's but will display the first frame, therefore all important elements should be visible on the first frame

Mail Chimp is a free service that allows users to design contemporary email-friendly newsletters. It also manages mailing lists and tracks user experience. In today's market, designers are often asked to create e-newsletters for a client or employer. See example.

Procedure

setting up the project

  1. download starter files
  2. examine Ai file, note layer stack and groups
  3. launch after effects
  4. file > import file > "flying-house.ai"
    options > import as "composition-retain layer sizes"
    uncheck "illustrator/pdf/eps sequence" if needed
  5. right click on comp in project window > composition settings
    aspect ratio = square pixels
    frame rate = 8f/sec
    duration = 0:00:03:00 (3 sec) 
  6. double click on comp in project panel to open layers in time line panel
  7. save "flying-house.aep"

animating the wings

  1. select "front-wing" layer
  2. activate "pan behind tool" (Y), move anchor point to wing base
  3. repeat with "back-wing"
  4. select "front-wing", activate rotation property (R) in time line panel
  5. set time to first frame (HOME), add key frames
    1f = 50 (turn on stop watch)
    5f = 13
    11f = 50
    17f = 13
    23f = 50
  6. set key frames for back wing (J & K moves to next key frame)
    1f = -50 (turn on stop watch)
    5f = -13
    11f = -50
    17f = -13
    23f = -50
  7. trim time line to 23f
  8. preview animation (space bar)
  9. turn on motion blur
  10. parent wings to house in time line panel
  11. save


animating the house

  1. select "house" layer > position property (P)
  2. alt-click stop watch
  3. copy and paste expression from "expressions.txt"
  4. change loop time from 5 to 3
  5. repeat for rotation (R)
  6. play animation
  7. return to beginning of animation (HOME)
  8. re-position house if needed
  9. save

render the animation

  1. composition > add to render queue
  2. output to = assets > faa??? > gds230 > assets > exercises > x3
  3. render

creating the animated GIF in photoshop

  1. open "flying-house.mov" in photoshop
  2. file > export > save for web
  3. change size to 550px wide
  4. preset = 64 GIF no dither, adaptive
  5. color panel > arrange color by popularity (drop down menu)
  6. delete colors below "hair color"
  7. sample colors from illustration > lock colors > manually delete unneeded colors
  8. looping options = forever
  9. save
  10. preview animated GIF in browser

designing a newsletter in mail chimp

  1. sign up for a free mail chimp account
  2. verify account via email
  3. build an audience = add your teammate's email addresses
  4. create a campaign > add relevant info
  5. template > 1 column
  6. add animated GIF
  7. open "mail-chimp.txt"
  8. copy and paste text into header and body blocks
  9. using "mail-chimp.txt" as a reference, add html tags to text
  10. remove social media icons
  11. add button below body block
  12. using this example or "mail-chimp-reference.png" as a reference, style text and button
  13. save
  14. send test email to your teammates
  15. proof your teammates newsletter and reply if necessary
  16. make edits to your newsletter if needed and send new test
  17. copy url and add to your process page for grading

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