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.
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.
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.
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.
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%.
Add a new layer to your file, and using the Type tool (T), create your button CTA (Call to Action).
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.
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.
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%.
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%.
Create a new frame, and shift the messaging text to its final placement. Increase the Opacity entirely to 100%.
Create a fifth frame, and make your button and button-text layers visible.
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.
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.
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:
Images used in this post:
If you liked this post, check out our blog on how to choose effective images for your ads!