1. Read the article online about how banner ads work and complete the accompanying worksheet.
  2. Read and work through the handout Visual QuickStart Guide GIF Animations. Make sure you do the examples using your own images.
    1. To move layer imagery across an image p. 518 - Find a simple image with a plain background in Google. Remove the image from the background, increase the width of the canvas by 3 times. You should start with two layers, one with a blank background, second with just the object. Always name your layers.
    2. Do not do the last example for making a rollover trigger. p 524.
  3. Complete worksheets for pre-planning your banner ad (steps 1-4: 1- choosing a product 2- target audience 3- appeal 4- fonts, colors and storyboard.) Give the packet to your teacher before beginning your banner ad.
  4. Steps to complete a banner ad.
    1. In PhotoShop, start with a canvas that is 120 dpi (pixels per inch) in RGB mode. You have a choice of sizes, the banner must between 72-144 pixels wide, .and 468 pixels high. Save it as "banner ad" in your folder.
    2. Search the web for images. Save them in your folder, then open them in photoshop, resize them appropriately at 120 dpi, and copy them into your banner document. Each image must be on a separate layer.
    3. Use a combination of text and graphics. Images may be taken from the web. Text, however should be created in PhotoShop to improve the resolution. Choose a slogan for your product.
    4. Keep individual elements on separate layers. Do NOT flatten your file!
    5. Decide on a creative way to ANIMATE your banner. Look at the old projects for ideas. Animation may be moving of objects or gradual application of an effect. Animations include slides, fades, flashing, spins, zooms. Be creative.
    6. To create animations, you must have a starting frame and an ending frame. Use the TWEEN button to create intermediate frames.
    7. Your banner must be between 5-10 seconds.
    8. Choose the proper timing for your frames.
    9. Test your banner by previewing it in explorer (use the button shown below.). To do so, Click on the "Preview in Explorer" button on the toolbar. Adjust the timing to speed it up or slow it down.

     

 

     10. Choose "Save For Web & Devices." in the FILE menu. Save it in the “Finished Banner” folder. The name of the file should be your class number. The class will be critiquing your banners.

Banner Ad Grading

Criteria for Evaluation:

  • Professionality
  • Text/Legibility
  • Effectiveness
  • Images/Effects
  • Animation/Timing
  • Creativity/Originality
  • This assignment is worth 200 points

Here are some great animated banners.  Why are they so good?

These banners have particular problems. What are they?

 

 

 

 

 

 
 
   

Photoshop Projects

InDesign Projects