How To Create An Animated Banner Ad

Andrei Florea

Last updated: June 2018

There comes a time in every designer’s life when they have to create an animated banner ad. 

Working in an overcrowded online marketplace, we all want a creative banner ad that will help our business stand out. And of course, we want it delivered ASAP.

Let’s see what an animated banner is, what are the benefits of using animated instead of static banners and learn how to create one in minutes with Bannersnack.

1. What are animated banner ads? 

Back in the days when Flash (not the movie) was on the rise, there were also flash banner ads. At that time, flash banners were considered the coolest thing since the invention of the internet.

But in recent years, flash banners have been replaced by HTML5 animated banner ads. These new type of banners employ simple or complex animations effects and some of them allow also sound incorporation. They’re better, more functional, look stunning and plus, they’re adapted to the new everchanging technologies.

That’s why marketers quickly forgot Flash and fully embraced the new HTML5 banners. Moreover,  Google Adwords gave advertisers the possibility to convert their advertisements from flash to HTML5 and also Adobe Flash said that creators can export their design directly to HTML5 within the app. 

But, as amazing as HTML5 banners may be, they’re not easy to create. Not when you use the traditional design software or follow the agency route. To be honest, as marketers, we don’t have the time to study Adobe and create a banner. That’s why we delegate this task to a designer or to a design agency. But then, we have to go through the standard tedious process: writing the brief, receiving the banner, requesting the amendments, getting the new design, second round of amendments. You know the back and forth process that goes on and on.

There may even be times when your marketing budget is so tight, you cannot afford to pay someone to do it. That’s why working with an all-in-one brilliant online design tool like Bannersnack can help you make a difference in your overall budget, workflow as well in the end result, the design itself.

 

2. Why are animated banners used in online advertising? 

Many advertisers use animated web banners instead of static banners in their campaigns to grab the viewers’ attention and offer them more reasons to click on the ad.  With animated ads, you can say more about your product (because you can use more slides), offer an emotionally rewarding experience and stand out on a static page. 

Using animated banner ads as part of the advertising strategy can consolidate brand awareness, increase leads and sales.

 

3. Why Bannersnack’s animated banners will take you to the next level. 

Using the Bannersnack set of tools will not only save you time and money, but you will have better looking and more functional animated banners for your advertising campaigns. With Bannersnack you get access to a massive stock of premium photos, popular fonts, dozens of animation effects and slide transitions. Working inside the editor is really a dream came true for any designer or person in need of advertising materials.

Why is Bannersnack the ultimate animated banner maker?

I will simply answer this question in bullet points. And you conclude.

 

3. How to design animated banners in Bannersnack. 

Step 1:

You have to sign up (or login if you have a Bannersnack account).

 

Step 2:

Then, click the Single Banner and this will take you to select the size of your animated banners.

I used the Main Banner (468 x 60) size.

 

Step 3:

I will select the template icons in the left sidebar and go to animated.

Then I select one of the templates I’d like to edit.  

 

Step 5:

After selecting the template, I will edit the text, colors and I will also add the information I want to promote.

 

How do you edit text in Bannersnack?

You only have to click on the text that already exists and you are ready to write your text, delete the existing one or justify the paragraph.

 

How to add a transition (animation) in Bannersnack?

 

Now here is the magic, how to do animated banner ads without writing one simple line of code?

You can use the Bannersnack predefined animation options.

Just select the layer of the content you want to animate in the Timeline view. Click the small triangle icon and select which animation you’d like to use for this element.  You can choose between Fade, Soft Blur, Hard Blur, Scale Up, Scale Down, Slide right, left, up or down, Blow, Bounce, Grow, Run, Glide and so on.

With Bannersnack you can edit the duration of the animation, if you want to transit from left to right, right to left or random, the delay and also the tween type and ease type.

Step 6: 

You can add layers to your banner ads and slides that can be edited as well. This is a very simple way to animate banner ads within minutes.

 

Step 7: 

After you finished working on the design of your animated banner ad, just click the Save button, name it and you’re done!

You can download it as JPG or PNG (just one slide, without the animation), GIF or MP4 (with all slides) and HTML5 (as a zip file).

 

Embed animated banner ads: 

If you want to embed your animated banners to your website you can use the copy/paste function and place the code in a HTML5 box inside your website.

Use Bannersnack’s Analytics report to track and optimize your animated banner ad.

Here are a few animated banner templates I recommend you should check out.

These are ready-made animated banner ad templates created by professional designers.

 

Conclusion

I hope this step-by-step guide will help you to create lots of dynamic banner ads in Bannersnack.

Let me know in the comments section below if you tried our banner design app and what you think about it.

Exit mobile version