It’s nearly impossible to go two clicks into the Internet without being hit with a slew of animated ads vying for your attention. While the online-advertising market is crowded, display advertising continues to be a popular tactic for both gaining brand exposure and generating traffic.

Static banner ads work just fine, but with a bit of extra effort, you can create an animated banner that will pop off the page. Here’s how to do it using Photoshop in a few simple steps.

animated banner ad

Step 1

Open a new Photoshop document that’s 300 pixels wide and 250 pixels high. These are the dimensions of a standard banner ad. Because the banner will only be used online, we can keep the resolution at 72.

making a banner ad in photoshop

Step 2

For this example, I’ll be creating an ad for an online ticket reseller using Shutterstock image 129152783. Your image should have bold colors, and some negative space where you can incorporate text and a button. Place an image of the product or service you’re selling on the banner. If needed, use the Transform (control + T) function to size your image up or down.

how to animate a banner ad in photoshop

Step 3

Use the Eyedropper Tool (I) to match a bold color from your image, then use the Rounded Rectangle Tool (U) to create a button near the bottom of your ad.

making animated banner ads

Step 4

In the Layers panel, the new shape layer should be highlighted. Select the fx dropdown menu and choose Bevel and Emboss. Set the Style to Inner Bevel and the Depth to 50%.

animated banner in photoshop

Step 5

Add a new layer to your file, and using the Type tool (T), create your button CTA (Call to Action).

web banner photoshop

Step 6

Next, create another new layer, and use the Type tool again to create the main message for your banner. Bear in mind that you’ll only have a couple of seconds to catch users’ eyes while they’re browsing online, so be sure to keep this text short and to the point.

how do you create a banner ad

Step 7

Go to Window > Animation to open the Animation panel at the bottom of your screen. Now we’re going to create some simple animations to allow your banner to come to life. With the first animation frame selected, toggle your button layer and both text layers to be invisible.

animated web banners

Step 8

Create a new frame in the Animation panel. In your banner ad, make your main message layer visible again. Shift the text up so you can only see the last line. In the Layers panel, set the Opacity of this layer to 40%.

creating banner ads

Step 9

Create a third frame, shift the text down further so most or all of the text is visible, and increase the layer Opacity to 70%.

photoshop banner ad tutorial

Step 10

Create a new frame, and shift the messaging text to its final placement. Increase the Opacity entirely to 100%.

animating a banner in photoshop

Step 11

Create a fifth frame, and make your button and button-text layers visible.

framing banner ads in photoshop

Step 12

You’ll see that each of your frames says “0 sec” below the thumbnail image. Using the dropdown menu, set Frames #1-3 to 0.1 second; Frame #4 to 0.5 seconds, and Frame #5 to 2 seconds. Click the “play” icon in the animation panel to watch your banner ad in action, and adjust any timing as necessary.

playing animation in photoshop

Step 13

To complete your banner ad, go to File > Save for Web & Devices. In the second dropdown menu from the top, select GIF as your file type, and click Save.

gif banner ad in photoshop

After you master these basics, you can apply the same technique to varying ad sizes and additional elements within ads as well. Check out some variations below:

animated banner

animated web banner

animated gif banner ad

Explore icons and graphics for your own animated banners in the lightbox below »

tutorial images

Top image: Navigation elements and icons vector by Darko1981

Images used in this post:

If you liked this post, check out our blog on how to choose effective images for your ads!