Back to Table of Contents
Create your first banner

Tutorial: Create your first banner

In this tutorial we'll create a banner very close to the sample banner bundled with the software. Follow this tutorial will give you a good overview of the features of Banner-Effect.

First step, choose the size of the banner

Banner creation
For this tutorial we will create a fairly large banner of 500x350 pixels. To do this, run Banner Effect, then click the first icon in the toolbar (New Banner).

As our banner is no "standard" size, click the "Custom format" and enter the following values:

Width: 500
Height: 350

Then click "Create new banner."

We will create a banner made up of five slides. The idea is to have a first welcome slide, and three slides extolling the virtues of our favorite software, and finally a slide that allows to visit the Banner Effect website or to start again the animation.

Creating the background and the border

Background

We first choose the background image for our banner. So click on the Background tab. Then choose a background you like (nothing too dark as we will use black texts). I chose the "orange splash" at the bottom of the list.

Switch to the Border tab and choose the border you want. In our case we chose one of the "grunge" background.





First slide

First slide

We will now add two texts and an image on this first slide. Click the Main tab and then click on the top icon with 2 "T" (number 1 on the image): this is the icon to add text to the slide.

Place the text a bit at the top of the screen and give him a slight slope using the rotation handle (number 2 on the image).

Then it goes in the Object Properties on the right of the screen: Change the text to "Create banners in an instant", choose a font and an appropriate style (in our case the Century Gothic Bold font size 28).

Set the color to black.

Finally, we will add a "start effect". In Effects/Start Effect choose Zoom (2).

We will now add a new text: press again on the icon with the 2T on the top of the screen to create a new text object.

First slide with objects

As you can see, this text is directly created with the style defined before, this way, it is faster to create multiple text with the same style.

For this new text, simply change the text to: "with", then move it slightly to the right of the screen and turn it so that it is horizontal (for this you can either right click on it and choose "Rotation/Horizontal" or use the rotation handle holding the CTRL key to rotate the object by jumping by 45 degrees steps)

Then the idea is to make it appear a bit after the main text and make it come from the bottom-left. To do this, in the Effects section we choose Start Effect: Follow Path, then click "Edit" button: The main tab will switch to "edit trajectory" mode.

Use left click to add control points and right click to delete a chosen point.

Create the trajectory you want, then right click anywhere on the main edit tab to display the contextual menu and set the Effect Duration to 3 seconds to make the effect faster. You can also change the Trajectory: in this example we will choose Bounce to make the word bounce at the end of the trajectory.

Finally, switch off the edition mode by clicking again on the Edit button on the properties and change on Time Settings/Display value to 1 second (so the text will be displayed one second after slide's apparition.

Finally, we will add the logo (image) of the software. Click on the top icon (the one with the photo) to add a picture in the slide. Then double-click the image to select an image from your computer (you can also drag files from Windows Explorer to add images).

Then place the image at the bottom of the screen. We are going to add the start effect: Blur (3) and a delay of 3 seconds to display it after the text.

Here, you can click Preview in the toolbar to see the banner in action.

Last thing for this slide, we will modify the display time to 7 seconds (Advance Slide Property) and choose the transition (transition tab) Fade. It's the transition that will be applied when the banner will switch to next slide.

The Initial Transition tab is used to display a transition from the beginning when the banner has completed loading, but we do not use this feature in this tutorial.

Second slide

Duplicate a slide

We will now create the second slide. So click on the thumbnail of the first slide with the right mouse button and choose Duplicate this slide to create a new one. Then delete the "with" text and the image (select items on the screen then press DEL or the Delete selected object button).

It is also possible to create a new slide with the Add Slide button in the tool bar, but in our case it is easier to duplicate in order to keep the same background and transition effects.

Change the text for remaining "Do you want to create ..." and place it on the top of the slide.

We will then add a "bullet point" text to explain why this software is fantastic. So create a new text object.

second slide

Then change the settings of this text:

Finally switch to the Background tab and on the bottom of the screen, under Background Image choose another alignment for the image: this is a quick way to make a variation of the same background.

Third slide

third slide



The third slide is almost identical to the second. So duplicate the slide number 2 and change the text to brag (again) the merits of the software. We will change the Start Effect for the text to Horizontal Particles (2) and choose a slide display time slightly longer of 12 seconds (Advancer Slide Properties)

Again, switch to the Background tab and on the bottom of the screen, under Background Image choose a new alignment for the image.

Then duplicate this slide to create the fourth slide.











Fourth slide

fourth slide

For this slide, we will change a little bit the template. Open the Background tab and choose another background (we chose a colored background near the previous "orange splash" in the list). Then go to the Border tab and choose a rounded black border.

Then, delete the bulleted text and change the title to "banners visible everywhere". Change the color for a light brown and set the Outline to 4 with a dark brown color to make it pretty.

Now we will display several pictures one by one to demonstrate this excellent software is capable of producing banner on every supports.

Add 5 pictures and double-click on each image to select an image from your computer. Then dispose the 5 images from left to right as shown.

Then we will bring up successively each element from the right. To do this we will use the start effect "From Right (2)" for all images and we will set display time as follow:

First image (left) - Display: 1 second
Second image - Display: 2 seconds
Third image - Display: 3 seconds
Fourth image - Display: 4 seconds
Fifth image - Display: 5 seconds

Finally, we add explanatory text at the bottom of the screen.

Fifth and last slide

fifth slide

Duplicate the fourth slide.

For this slide, again, we will change a little bit the template. Open the Background tab and choose another background (we chose a dark brown background). Then go to the Border tab and choose a "photo" border.

Then, remove pictures and keep texts.

In this slide we will create two interactive objects: one link and one button. First we'll add a link to the product's website.

Select the text line "www.banner-effect.com" and, in properties, go down to the Click target: here we associate a behavior to an object.





You can associate different types of behavior to an object:

Open a page (new window): Clicking on this object will open a web page in a new window (popup)
Open a page (same window): Clicking on this object will open a web page in the current window
Call Javascript function: A click will call a Javascript function of the web page (more information here)
Open a slide: a click will display a different slide in the banner.

button creator

So select Open a page (new window) and click the "..." button on the right. A window will open. In this window, type the address (URL) of the web page you want to open.

Then create a new Button object, select the template you like and change the text to "click here to restart", then click OK to close the Button Editor.

select the button and, in the properties, select Open a slide, click the "..." button and select the slide number 1.

Well, our banner is complete. You can click Preview to see the result. You can also use the Transitions tab to change the transitions between slides at your convenience.

Now that our banner is made, we will see the various options available to us to publish this banner on a website.

Publication of the banner

banner export

To use your banner in the "real world", you must use the File/Create a Flash/HTML5 banner... menu.

This menu will open a wizard that will help you step by step in exporting this banner.

Choice of format

The first thing is to choose the export format. You can generate your banner in Flash and/or HTML5/Javascript. In our case, as we want our banner to be visible everywhere we will generate every formats (The most suited format will be automatically displayed.)

Quality of export

Then, you choose visual quality of the banner. Use sliders to change quality of texts and images.

In our case we will generate the highest quality banner.

Location of files

banner export finished

Here you will choose if you want to generate your banner locally (on your computer), copy it directly to your Web server (via FTP) or on Banner-Effect servers.

In this tutorial we will send the banner to Banner-Effect's servers.

Banner name

Type a name for your banner, for example "tutorial".

Sending files

This section will send the files on the server. Wait a few seconds, then Click Next button.

Success!

Well, this time the banner is generated, you can see the results by clicking the Preview in Browser button and/or by copying the HTML code on the target web page.

Conclusion

So, your first banner is created. You have trained a wide range of software features, now do your own experiences and visit other sections of this manual to become a real expert in creating banners!