Get Flashy with Animated Banner Ads – Part 1

We’ve all seen them while browsing the Internet: colourful, flashing pictures that beg for attention on almost every website. Animated banner ads are everywhere. Whether you find them annoying or interesting, they’ve undoubtedly become an important online marketing tactic. If done professionally, animated banner ads can increase your brand recognition and product or service sales. If you’ve ever wondered how to make your own animated banner ads, read on!

Making Animated Banner Ads: The Easy Way

One of the easiest ways to create simple animated banner ads is in good ol’ Photoshop. This method works well if:

• You want to show different static frames one after the other
• You have an eye-catching static ad design and want to show text or a call-to-action button fading in

Step 1: Set the stage

Create a new document in Photoshop and choose your ad dimensions. Google has a very helpful guide on all the different sizes of static and animated banner ads. It also includes information on the top performing ad sizes. For this example, I’ll use the 300px (wide) by 600px (high) ad size.

Step 2: Create your graphic

It might be helpful to start by designing your animated banner ads as if they are static. Make the background, call-to-action button, and all graphics and text visible. Now you can think of interesting ways in which the text and graphics can appear. In this example, I’ve created the last frame of the ad where all the objects are visible.

Step 3: Make it move

I would like the animation to start with the Grenade logo being invisible. It should then gradually grow from a tiny logo to its final size.

To open the Animation panel, navigate to Window > Animation if you are using Photoshop CS5 or below. If you are using Photoshop CS6 or Creative Cloud, navigate to Window > Timeline and choose “Create Frame Animation” in the Timeline panel. This panel allows you to see and create frames and control what appears on each frame of your animation.

The first and only frame so far consists of the graphic that I’ve created. Selecting this frame and clicking on the folded paper icon in the Timeline panel will duplicate the frame. Now there are 2 frames that look exactly the same.

You control what appears on each frame by showing and hiding layers. If I want the Grenade logo to be invisible on the first frame, I can simply click on the frame and hide the Grenade logo layer in the Layers panel. If I click on the second frame, the logo will still be visible.

The animation should be relatively smooth, so I will create 5 frames. The first frame will have no logo and the last frame will have the large logo. Now I have to animate 3 states in between. Each state needs a separate layer for the logo so that each logo can be shown and hidden independently. In other words, there will be four layers containing the same logo. They will each be a different size, starting from small and gradually increasing to the final size.

To set a delay for each frame, click on the arrow next to the label that says “0 sec”. Here I set the last frame to delay for 5 seconds before it starts looping again. The controls in the Timeline panel allow you to preview what your animated banner ads will look like.

Step 4: Save it

The final step is to save the banner as an Animated GIF by selecting “Save for Web” option. Make sure the format is set to ‘GIF’ and click “Save”. Open the file in any browser and the animation should play automatically.

This is what the banner looks like:

This example demonstrates the basic way in which you can create animated banner ads in Photoshop. Photoshop also allows automatic key frame tweening and other settings to make animation easier. For more information on animation in Photoshop, visit Adobe’s Creating frame animations help page.

Pros:

• It’s easy to learn how to make simple animated banner ads that can still be eye-catching
• You don’t need any coding knowledge
• You can create animated banner pretty quickly

Cons:

• More complex animated banner ads can be hard or impossible to implement in Photoshop

A Little Trickier

Google Web Designer is a free software program made by Google for Windows, OS X, and Linux. It has a fairly simple visual interface that allows you to create HTML5-based animations without coding knowledge. It specifically supports the creation of animated banner ads with different ad-size templates. It also offers integration with AdWords and DoubleClick.

Google Web Designer shows a visual representation of the timeline. Each object has its own layer on the timeline and can be controlled separately.

You can insert key frames by right-clicking on the timeline. A key frame indicates a place where something significant happens during the motion of an object. You would put a key frame where an object should start moving and then another key frame where the motion should end. On the key frame where the motion ends, you can move or resize the object to its final state. Google Web Designer automatically adds the frames in between the two key frames, making the object appear as if its moving. This is called inbetweening or just tweening for short.

You can modify the easing of the animation by right-clicking in the space between two key frames. Easing refers to how the animation accelerates or decelerates. For example, “ease-in” means that the motion will start slowly but speed up towards the end.

This is a great tool to play around with if you’re interested in learning the basics of animation. You can download the free Google Web Designer Beta software here. Check out the Google Web Designer Help Center for more information on getting started.

Pros:

• The interface is fairly easy to learn how to use
• You don’t need coding knowledge but you can edit the HTML and CSS if required
• Generates HTML5 code that works on a wide variety of devices, including iPhones and iPads
• It’s free!

Cons:

• Since it’s a beta version, the software can be a bit buggy (e.g. objects sometimes return to their original position after being moved)
• It might take longer to create animated banner ads using this method

More Advanced

If you want the freedom and flexibility to animate almost anything in different ways, then Adobe Flash is definitely the way to go. Flash also allows you to add interactivity to your animated banner ads. It provides a visual timeline and uses key frames and tweening similar to Google Web Designer. One big downside is that Flash is a more sophisticated program with a steeper learning curve.

There has been some controversy surrounding Apple’s refusal to support Flash on iPhones and iPads and many other platforms have recently dropped Flash support. However, it is now possible to export Flash files as HTML5, not just as SWF files and animated GIFs. This means that animations made in Flash will work on most platforms so you don’t have to worry about iOS users not seeing your animated banner ads.

You can download the free 30-day trial of Flash Professional here. If you would like to learn more about Flash, you can visit Adobe’s What is Flash Professional? page. It also has links to additional tutorials.

Pros:

• Flash is very versatile and allows you to be extremely creative
• Animated banner ads can be exported to different file formats

Cons:

• Flash is not free – you have to subscribe through Adobe’s Creative Cloud service
• Learning how to use the Flash interface can be time consuming
• You need to know ActionScript (Adobe’s proprietary programming language which is similar to JavaScript) to unlock the real power of Flash

These are by no means the only ways to create animated banners. Software such as Adobe Edge Animate also has a visual interface and generates HTML5 code. You can also create animated banners by coding in HTML5, CSS3 and/or JavaScript. In this way, you have more control over every single object movement.

Part 2 of this article looks at how to get your animated banners online for the world so see. Stay tuned!