Where can I get HTML5 banners created

Everything you need to know about HTML5 banner creation


Who one On-line-Advertising banners wants to create, the question arises whether the banner animated orstatichis or maybe even interactive Should own elements. Once you have answered these questions for yourself, there are four possible file formats:GIFs for animated, jpeg and png for static images and html5-Banners for complex animations and interactive elements. Flash doesn't have much to look for these days, as it is no longer well supported on the one hand and can create security gaps on the other.

In the following article we will explain what to consider when creating a banner. We use this to show how a small animation and a hover effect can be built into a banner.

The formats GIF, JPEG, PNG and HTML5



Roughly speaking, you use GIFs for animation and JPEGs and PNGs for static advertising media. Such banners are usually created via Adobe Photoshopor similar programs. Since advertising banners should not be larger than 150kB, GIFs quickly reach their limits with more complex animations. It is then advisable to go on HTML5 Set banners.

In the past, however, the creation of such a banner was not possible for every layperson, as you had to have advanced knowledge of HTML5, CSS and JavaScript in order to be able to create a proper banner. But for some time there have been various tools, such as the Google Web Designer, which offers an optical surface that significantly simplifies the manufacturing process. However, are Basic knowledge of HTML and CSS Recommended in any case, as you may want to intervene in the source text at some points or adjust the styling individually.

What makes a good banner?

A good advertising banner creates attention and invites the viewer to click. In order to achieve that, he should above all stand out. An eye-catcher could work well for this. But animated banners are also well suited, as you are unconsciously made aware of the movement in the corner of your eye.

The company behind the advertisement should be recognized straight away. Just as little information should make it clear what the company is doing and what the advertising is aimed at. To convey this well, a clear writing be chosen that is easy to read. Too many fonts and font styles may seem very individual, but only cause chaos. Also color the banner should not appear overloaded. If a banner is too colorful, it may not be taken seriously and ignored. Those to be conveyed should also be reduced to the essentials information to give the reader an instant insight.

Thoughts before creating the banner

General considerations

First you should think about what you want to achieve with the banner and what that concrete goal is that is aimed at with the creation. In addition, it is important to find out about the target group to be clear. As with any other advertising format, the more precisely you define your target group, the more precisely you can address and pick them up. This has an impact on the entire design - font, colors, arrangement.

From a design point of view, only a few points then need to be considered. If you already have a feeling for compositions, this is definitely an advantage. You should also think about which format the banner should have. There are a few here Formatsrecommended by Google. These can be found in Google's Guide to Ad Sizes.

According to Google, the most popular and proven formats include:

  • 728 × 90px leaderboard (e.g. city salad)

  • 300 × 600px half page

  • 300 × 250px medium rectangle

  • 336 × 280px large rectangle (e.g. Apollo)

  • 320x200px Large mobile banner

What does a good advertising banner need?

In order to be able to assign the statements, it is essential Brandingor that Company logo be seen on the banner. Then the banner needs a statement or a promise to be conveyed. Also a must not be missingCall-to-Actionthat prompts the viewer to click. This is usually in the form of a Buttons built-in, which animates the viewer to click.

Creation of an HTML5 banner

If you are clear about your target group and message, you can decide whether the banner static or animated should be.

In the following we will explain the creation of an HTML5 banner, in which a small animation is used and the call-to-action button gets a hover effect. A Hover effect is an action (e.g. an animation) that is triggered when you move the mouse over the corresponding area. It is advisable to create a design in Photoshop before working in Google Web Designer. From this, the individual elements can be saved in the correct size and the arrangement can be determined.

The banner to be animated should look like this at the end:

This banner will initially be in Web designer copied, whereby one should make sure that the individual picture elements were saved as small as possible beforehand.

You open the Google Web Designer and click on Create new file. Then enter the name and location of the banner and select the appropriate format under “Dimensions”. We leave the environment as it is DoubleClick and press OK

In the first step we drag our picture elements by Drag and drop in the Asset area under Library. Now we can all picture elements position in the appropriate places. This also works via drag-and-drop. Size adjustments you do with that Selection tool, for which the edit mode must be selected. Adjustments to individual elements can be made under properties make.

After all the elements have been placed, you can move on to the first Build in animation. To do this, you open the extended timeline and you can get to exact times Keyframes, labels and events be set.

Heart animation

In the example above, we want make the heart pound. For this we set 5 keyframes, whereby the 5th keyframe is also the first of the next knock. To make the heart beating clearer, we use the second and third keyframes. Between these, the heart should stop growing. As shown here, we've adjusted the size of the heart.

Subsequently let's activate the repetition and set this to 4 times. In this example we would have the repetition on too Unlimited but we will now show you how to do one Loop with help of a Labels and one Event puts.

To do this, we click in the Event column Right-click on the beginning of our timeline and choose Add label ..., we call this label begin. We add an event at the height of the last keyframe of the heart animation. We can select an action by double-clicking on the event. Under Timeline we choose GotoAndPlay, the recipient is on page1 and is the label we created earlier. If you now on preview if you click you can see that the animation is played in a loop.

Hover effect

We'd like one for the call-to-action button Hover effect give. To do this, we select all the elements in the timeline that belong to the button and create a group (Edit> Create Group). You can now edit the group by right-clicking on it.

The background of the button should fill with the TrafficDesign turquoise when hovering and turn green again when the mouse is removed again. Here it is now a little more extensive. There will be a total of 3 labels, 3 events and 6 keyframes set.

Thereforelet's duplicate the backgroundd of the button with a right click on the corresponding element in the time axis. In the properties we give the new rectangle the desired color.

Keyframes, labels and events

First we set 4 keyframes for this rectangle. One each comes to 1.5s, 1.9s, 2.6s and 3s. Then we select the first keyframe and reduce the opacity in the properties to 0. We also transform the rectangle so that it is only 1 pixel wide on the left. We repeat this with the fourth keyframe, whereby the 1 pixel wide rectangle should now be on the right edge. Now we add a keyframe at 1.6s and 2.9s and set the opacity to 1.

It is important that the keyframe, which is set to 0s, has also been selected and the opacity has been set to 0.

Then the labels and events are set in the time axis. The events are set to 1.3s, 1.9s and 3s. The first two events get the action Timeline> pause. For the 3rd event, a label must first be set to 1.3s. We call thisini. The 3rd event then gets the timeline action gotoAndPause. The recipient is on this group and is called ini.

Now a label on 1.5s is missing, which we domouse-in call and a label on 2.6s that we mouse-out call. We will address these in the next step.

In order to link the animations with the mouse movements, you have to go out of the group editing again and in the view window at the bottom left on Div click.

Linking the animation with the mouse movements

Then an interaction area from the components is dragged onto the button in the view window. The size can be adjusted accordingly. Events can be added by right-clicking on the area. The first event is Mouse> mouseover. As an action at Zeitachste gotoAndPlay selected. The recipient is with the button group and is called mouse-in. With OK the whole thing is confirmed. A second event is added. This time we choose the event Mouse> mouseout and the label we want to address is mouse-out.


So that's the Banner ready. Of course, all objects can be animated and that always works via the Keyframes. Saving is called Publish and offers different possibilities. You can publish the finished HTML5 banner locally, in Google Drive or in DoubleClick Studio.