How to Make a Banner

How to make a new banner project

A new banner project is created each time you start the Banner Maker, you can also create a new project from Menu>New project.
When you create a new project you can choose a banner size through the 'Choose size wizard' (if you don't find your desired banner size choose any size, you can edit banner size later - Banner dimensions)

How to save and load a banner project

HTML5 Banner Maker allows you to save/load the current project on your computer so you can resume work online later. You can find Save and Load project under top menu.

How to make banners save locally

You can save your HTML banners on your computer from Top Menu>Preview>Download banner.

How to make a banner integrate within a website

1. Make a banner online then download it to your computer (you will download a zip archive Ex: banner.zip).
2. Make a folder on your server, name it as you want, let's say you name it 'banner_728x90'.
3. Unzip the downloaded banner.zip and upload all content to the folder you have just created.
4. Now you should see a preview of your banner if you access it through the browser (Ex: http://yourserver.com/banner_728x90/ )
5. You can add the banner to your website or someone else website just by adding an iFrame tag to the HTML of the site. Ex: Find the place you want to add the banner and add the following code:

<iframe width='728'; height='90'; style='border:none;' src='http://yourserver.com/banner_728x90/' />

Please note that you should specify the width and height of the banner to the iframe.

How to use the timeline whilst making a banner

You can find the timeline at the bottom of HTML Banner Maker, for each image or text that you add to your banner a new layer will be created on the timeline. The timeline has a 100 seconds length, you can drag layers (drag from the middle rectangle) back and forth as you want the object to show up in time. You can also adjust the time for the show and leave effect by dragging the corners of the yellow rectangles.

how to use the timeline

How to add transitions to text and images

You can make incoming and outgoing transitions for each object from the left side contextual menu.
The available incoming transitions are: None, Fade in, Slide from left, Slide from right, Slide from bottom, Slide from top.
The available outgoing transitions are: None, Fade out, Slide to left, Slide to right, Slide to bottom, Slide to top.
Additionally you can assign an animation effect to each transition:
(swing, easeInQuad, easeOutQuad, easeInOutBounce, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce)

How to make a banner link

In order to make a banner link click on the background/stage, a contextual menu will show up to the left side, replace the current URL with your URL within the field below 'repeat banner'.
Please note that if you leave the banner link field empty, than the banner will not have a link attached.

How to make a banner link

How the banner duration works

The maximum length of timeline is 100 seconds, the banner length in seconds will be at the end of the last object in which case the banner will stop or the banner will repeat (if the 'Repeat banner' option is on).

How to make a banner with custom dimensions

In order to make a change to the banner dimensions click on the background/stage, a contextual menu will show up to the left side, edit the current Banner width and Banner height with your own.


Now you know how to make banners - have a go and make a banner now: Banner Maker App