Build an animated ad in PhotoShop CS4

Tutorial: Build an animated ad in PhotoShop CS4

Independent bloggers and journalists may find that they need to build an ad to support their work. This tutorial will provide some basic guidelines and instruction on how to build an animated ad in Photoshop.

Sample ad for La Val's Pizza

Dos and Don’ts

Interactive Advertising Bureau studies on the effectiveness of online ads indicate that design plays a major role in getting users to interact with the ad. Here are some basic guidelines:

1. Know your audience

  • If your advertiser is selling to people, use emotion, incentives, animation and interactivity
  • If your advertiser is selling to other businesses, use less animation, emotion and interactivity.

2. Keep your animation subtle and sophisticated. Loud, in-your-face ads will turn people off.

loud colors are bad

3. Don’t use more than two typefaces.

4. Use color wisely.

  • Avoid using minimal or weak color or people won’t see the ad
  • Avoid using too strong a combination of color. This can turn people off, and may even chase them away from your site.
  • Be careful using red. A little goes a long way.
  • A medium range of color results in the most clicks.

medium color

5. Always put a message on the first frame of an animation. People will sometimes stop a page from loading before your ad has finished loading. If you don’t have a message on your first frame, people will never know what you wanted to tell them.

message on first frame

6. Keep the message simple. If there is too much text, people will not read.

7. Reward the customer. Let them know what they are going to get before they click on an ad. It may be  a coupon or discount, or simply more information like a menu.

8. Include a call to action. “Click for…”

9. Link directly to the content advertised. Nothing will annoy a potential customer more than landing on an advertiser’s home page and having to hunt for the content that was promised.

10. Use the word “Free” carefully. People distrust free offers and may avoid your ad. The exception is a free offer that lists its limitations. For example, people are likely to click on something that offers a free software demo if it fulfills a need.

free is a bad word in ads

11. Refresh your ads regularly. A small change of color or typeface can prevent an ad from becoming wallpaper after a couple of weeks.

12. Be tasteful. The ads on your site reflect on you. An offensive ad can make someone decide to avoid your site.

Universal ad sizes

The Interactive Advertising Bureau offers guidelines for ads to be viewable on most sites. While there are more than 15 sizes, four are considered universal.

Leaderboard: 728 pixels x 90 pixels — usually found stretching across the top of Web sites.

Medium rectangle: 300 x 250 — usually found in the side rail of a site next to content.

Rectangle: 180 x 150 — the small size allows it to appear in multiple places throughout a site.

Wide skyscraper: 160 x 600 — This vertical ad usually runs on the side of a site next to content.

Universal internet ad sizes

Gather your content

Once you’ve sold an ad, you need to gather all of the pieces that you will use to build it. First, download the project files.

Logo/fonts: Some advertisers will have electronic files that you can use in your ads. Some may only have bad black and white print-outs (We’ll tackle this in our exercise).

Creative Commons license: There is a ton of art on the internet that can be used for free for commercial purposes. You can search on flickr or creativecommons.org. WARNING: Double-check that any Creative Commons art that you find is legitimate. Copyrighted work is sometimes posted by someone who doesn’t own it.

Royalty-Free: You can purchase stock photos for a few dollars each from several companies. Two good resources are iStockPhoto and BigStockPhoto.

Take photos: If you make a sale at the advertiser’s business, pull out a camera and take some detail photos. Avoid photos of a store front. They are hard to read at small sizes.

Working with a template

Open the template file

Go to the File menu and select Open. Navigate to the AdDesignFiles folder. Then the IAB templates folder. Open the file called 300x250IMU.psd and hit OK. This file has three layers named “Main message”, “CLICK MSG” and “300 x 250 IAB Universal Medium rectangle.”

open template in photoshop

Place a background photo

hide-layers

Go to file and select Save As. Call it La-Val’s-Pizza-300×250.psd. Click Save. A dialog box about Maximum compatibility may pop up.  Keep the box checked.

In PhotoShop, look in the Layers palette. By default it should be visible on the lower right corner of your screen. If you don’t see it, go to the Windows menu and select Layers to activate it.

You will see a layer named “Main message” and another named “CLICK MSG.” Click on the eyeball icon on the far left of each layer to make them invisible.

Go to the File menu and select Open. Go to the Pizza folder and open PizzaBackground.psd.

open pizza background

line space

Go to the Select menu and choose All. (Command + A) Go to the Edit menu and select Copy. (Command + C). Go to the Window menu, go to the very bottom and select La-Val’s-Pizza-300×250.psd to return to your ad.

Look at the Layers palette. You will see a layer called “300 x 250 IAB Universal Medium rectangle.” Click once on that layer to select it. Go to the Edit menu and select Paste. (Command + V). This will paste the layer directly above the selected layer.

We’ll put the logo on top of this image later. But first…

Add a shape layer

Let’s build a shape where smaller text can be easily read.

line space

draw a box shape

Go to the vertical Tool Bar on the left side of your screen and click on the Rectangle Tool (two tools below the Text Tool). If you see a circle or some other shape, click and hold down and a sub-menu will appear. Select the rectangle.

Draw a box over the lower 2/5 of the ad. This will create a new layer directly above the pizza photograph.

The new layer will appear in the Layers palette and will have a box representing your rectangle’s color. Double click on the on box in the layer to open the color picker. Change the color to red and hit OK.

change shape layer color

Working with a scanned logo

Very often, businesses will have electronic versions of their logos that you can use in your ads. When that’s the case, you can usually open them directly in photoshop. But the smaller a business is, the more likely you will only receive printouts or scans of previous ads.

For our exercise, we’re going to turn a poor quality black and white scan into an attractive logo.

Go to the File menu and select Open. Navigate to the Pizza folder, select LaVal’sPizzaLogo.psd and click Open.

open lavals logo

Go to the Select menu and choose All. (Command + A) Then go to the Edit menu and select Copy. (Command + C). Click on the Window menu, scroll to the very bottom and select La-Val’s-Pizza-300×250.psd to return to your ad.

center logo on image

Go to the Edit menu and select Paste. (Command + V) Wow! That doesn’t look very good. But don’t worry. We’ll fix it.

First, go to the vertical tool bar and make sure the Move Tool is selected. It’s at the very top. Click and move the logo to the center of the visible pizza photo.

Next let’s turn the logo white. Go to the Image menu, select the Adjustments submenu and then select Invert (Command + I).

change blending mode to lighten

And now let’s get rid of the black areas. In the Layers Palette, change the Blending Mode from Normal to Lighten and…

Shazzam! Not bad for very little work. You could have cut out the logo but it would have been time consuming and probably would not have looked as nice.

Make a shadow for the logo

duplicate layer

Shadows are an effective way of making a logo stand out against a photo background. PhotoShop has some great filters set up inside the layers palette but they won’t work in this case. Even though we cannot see the black areas of the logo image, they are there and will cast a shadow. Here’s another way:

Make sure the logo layer is selected and click on the top-right corner of the Layers Palette menu bar and choose Duplicate Layer.

Change the name to Logo Shadow and hit OK.

Click once on the Logo Shadow layer and drag it below the original logo layer.

Go to the Image menu, select the Adjustments submenu and then select Invert (Command + I)

In the Layers Palette, change the Blending Mode from Lighten to Multiply.

Hit the down arrow keys to nudge the shadow down and to the right.

Pretty neat, huh? This is kind of the old-school way of creating shadows in PhotoShop and it’s useful in some situations.

Organize your layers

It’s very easy for the layers palette to get out of control. So a little organization goes a long way.

1. Click once on the very bottom layer.

2. Hold down shift and click on the layer that is fifth from the bottom. That should turn blue all of the layers that you have worked on so far.

3. Click on the top-right corner of the Layers Palette menu bar and choose New Group from Layers.

4. Change the name to Background and hit OK.

You have just created a folder in your layers palette that contains all the layers we worked on. If you click the small triangle to the left of the folder, it will open to show those layers. You can edit them if you decide to. Now that we are done with them, click on the triangle again to close the folder so they are out of our way.

Edit your ad text

Now it’s time to add our advertiser’s message. First, look in the Layers palette and click on the eyeball icon to make the CLICK MSG layer visible.

Edit your CLICK MESSAGE text

In the Layers Palette, click once on the CLICK MSG layer. Double-click the large T to the right of the eyeball to select the text.

There is a dynamic menu that runs horizontally across the top of the program that has all your type information. Click on the gray box. The “Select text color” dialog box will appear.

photoshop text menu

edit click text

If you move your cursor out of the box and over the pizza image, the cursor will change to an Eyedropper. Click on the image to select a bright yellow hue and hit OK.

Type “CLICK FOR MENU” in all caps. Click on the Move tool at the top of the tool bar.  Drag the text to the bottom right corner.

Edit your MAIN MSG text

edit your main message

Look in the Layers palette and click on the eyeball icon to make the Main Message layer visible. Click in the Layers Palette and select the Main Message layer. Double-click the large T to the right of the eyeball to select the text.

On the Horizontal Dynamic menu, click on the gray box to change the color. The “Select text color” dialog box will appear. Drag your cursor to the top left of the color field to make the text white and hit OK.

Type “Pizza, subs and salads.” Hit return and type “Berkeley’s best delivery.” Click on the Move tool at the top of the tool bar.  Drag the text to position it in the red bar above “CLICK FOR MENU.”

If you were going to make a static ad, one that does not animate, you could stop right here and save. But we want to animate our ad.

Make your SECONDARY MSG text.

edit secondary message

Click the Main Message layer in the Layers Palette.

Click on the top-right corner of the Layers Palette menu bar and choose Duplicate Layer.

Change the name to SECONDARY TEXT and hit OK. Double-click the large T to the right of the eyeball to select the text. In the horizontal text menu bar, change the types size to 40. Type “(510) 555-5555.”

Click on the Move tool at the top of the tool bar.  Move “(510) 555-5555″ so that it is positioned over “Pizza, Subs and Salads” and “Berkeley’s best delivery.” The text will appear to overlap.  This is okay for now.

Animate your message

 

change layer opacity

Now we want to animate. First, make sure all layers are visible then go to the Window menu and select Animation. This will open a palette on the bottom of the screen.

1. Set up the first frame

The first frame is selected by default. Click on the “secondary msg” layer in the Layers palette and change the opacity to 0.

2. Create second frame

Click on the top-right corner of the Animation palette (shown below) and select New Frame.

create new frame

Frame 2 will appear in the Animation palette and will be selected by default. Now edit the appearance of the second frame.

Click on the Main Message layer and change the opacity to 0. Click on the Secondary Message and change the opacity to 100.

tween with previous frame

3. Create a “tween”

Most animation programs have a way to calculate the appearance of the steps between an animation start and end. Photoshop’s Animation palette included this ability in CS4. Click on the top-right corner of the Animation palette and select Tween. Make sure the setting are the same as in the image at right. Click OK.

4. Adjust the timing

If you click on the play button at the bottom of the animation palette, you’ll see the ad animate very fast. Since we don’t want to induce seizures, lets make some adjustments:

Click on on the bottom of Frame 1 where it says 0 seconds. Change the time to 2 seconds.

Click on Frame 2 and Frame 3 and change the times to 0.1 seconds.

Click on Frame 4 and change the time to 2 seconds. Click play to see a much improved animation.

Save an animated GIF

Now you are ready to save your animated ad. Click on the Edit menu and chose “Save for Web & Devices…” The following box will appear. Make sure to chose the following:

export as animated GIF

 

Click the preview button. It will open your ad in a browser window so you can see it in action. Ignore the code on the page.

Click save.

Tips for PhotoShop Elements

PhotoShop Elements is a cheaper option to PhotoShop. It will perform most of the tasks journalists require and only costs $79. The layers are built the same way, but the animation is done in the Layers palette.

photoshop elements layers

Make each frame into a layer

Merge all the layers except the main and secondary text by selecting them all (hold down the shift key). Then click on the top right corner of the Layers palette and select Merge Layers.

You will need 4 copies of this new layer (one for each frame). Click on the top right corner of the Layers palette and select Duplicate.  Repeat this step two more times.

Make a duplicate of the Main Message layer, keep the opacity at 100 and drag it down to just above the bottom layer. Shift-select the two layers and merge them. Rename the layer as Frame 1

Make a duplicate of the Main Message layer, set the opacity to 65 and drag it down until it’s third from the bottom. Make a duplicate of the Secondary Msg layer, set the opacity to 35 and drag it down until it’s fourth from the bottom. Shift-select the layers that are second, third and fourth from the bottom and merge them. Rename the layer as Frame 2.

Select the remaining Main Message layer, set the opacity to 35 and drag it down until it’s fourth from the bottom. Make a duplicate of the Secondary Msg layer, set the opacity to 65 and drag it down until it’s fifth from the bottom. Shift-select the layers that are third, fourth and fifth from the bottom and merge them. Rename the layer as Frame 3.

Select the remaining Secondary Msg layer, keep the opacity at 100. Shift-select the top two layers and merge them. Rename the layer as Frame 4. When you are done your layers should look like the ones below.

elements ad frames

You are now ready to animate. Go to the file menu and select Save for Web. select all the options below.

elements save for web settings

Animation delay: Use the play button to advance to each frame and set the delay for each frame.

There is a bug in the Mac version that prevents this from working. To get the delay, you will need to add layers (frames). For example, if you want a 2 second delay on Frame 1, you will need to duplicate the layer nine times. This will work but may make your ad very large when it’s saved.

About this Tutorial

This tutorial was first taught as part of Web Publishing for Independent Journalists Workshop on
March 21-26, 2010.

Republishing Policy

This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.