home Calculators How to make a beautiful banner. Banner moderation and advertising campaign launch

How to make a beautiful banner. Banner moderation and advertising campaign launch

11/12/14 30.9K

Advertising is a necessary thing for any website. Only the cost of advertising tools is higher than the income from it. That's when many begin to be wiser in order to save at least a little. For such "tricky" we will tell you how to make a banner.

What are banners

A banner on the Internet is a rectangular advertising image with static or dynamic (animated) content. A banner can include both text and graphics. The banner, as a rule, is provided with a link that is activated after clicking on it with the mouse button.

Modern growth in the effectiveness of banner advertising is associated with the use of contextual targeting. At the same time, only those goods and services that are “consonant” with the theme of the resource are advertised on the site’s banners:
It would be nice to know how you can make a banner for the site. But first you need to understand the existing types of banners. There are the following types:

Static banners - consist of a static image. They are pictures in JPEG or PNG format. They are characterized by low weight, which does not affect the page loading speed.
Animated banners - animations created using GIF. Consists of several pictures replacing each other with a given frequency. The weight of a banner depends on the number of images used in it.
Flash - in such a banner, the animation is based on Flash. It can respond to user actions.

Interactive content can be presented in the form of a game or questionnaire with the addition of sound. Drawings for animation are created using vector graphics.

There are many different banner sizes for the site. But the most popular ones are:

Signs of an effective banner ad

The effectiveness of an advertising banner placed on the site depends not only on the popularity of the site. To a greater extent, its effectiveness depends on the level of implementation of the advertisement itself. A high-quality banner must meet several basic criteria:

Attract the user's attention - but this does not mean that the banner should be too bright and blinking. Such advertising will irritate the visitor, not attention. The content of the banner should unobtrusively "hint" the user about its presence. Therefore, when selecting an image and text for it, the psychological factor should always be taken into account;
Arouse interest - banners for the site should arouse the user's interest in the object of advertising. A product or service must be presented not only with taste, but also in an original way. The use of light wit and humor is encouraged:

The incentive to click on the banner link is achieved due to the effect of some mystery and understatement,
embedded in the banner content.
The motivation to order a service or purchase - first of all, depends on the content of banner advertising. It should show the most the best sides object of advertising or the benefit that the user can receive from its acquisition.
If the banner is intended to increase brand awareness and increase its image, then the advertising content should inspire a sense of trust in the consumer. But do not cause negative associations.

Patterns that should be considered before placing a banner on the site:

The larger the banner, the higher the probability of a user clicking on it. The most effective size is considered to be 240 by 400 pixels;
Banner ads placed at the top (in the header) have the greatest effect. It can also be placed on the side or bottom of the page, but the efficiency here is somewhat lower;
Animated banners are able to quickly attract the user's attention - the human eye intuitively reacts to movement.

Creation and placement of an advertising banner

Before you insert a banner on the site, you need to decide on the location of its placement. In this case, you need to take into account the size of the banner and the available free space on the pages. Having decided on the location of the ad unit, you can insert the banner code into the html page.

The code of most banners matches the template:

a href="/link to the advertiser's site" - the address of the resource to which the user clicks on the banner;
title="title" – the text displayed in the tooltip when hovering over the banner area;
target="_blank" - sets the rules for displaying the advertiser's site after clicking on the banner link ("_blank" - opens in a new window);
- prohibits search engines from processing this link;
img src="https://www.website/wp-content/uploads/image path" - sets the path to the image displayed in the banner;
alt="alternative text" - the text that will be displayed in the banner if its image is not loaded.

But it is not necessary to develop a banner yourself. To do this, you can use special online generators. To generate a banner code on such a service, you need to fill in several fields and click on the button:

Or you can order the creation of a banner in a professional studio. Then it will cost more ... Here are the approximate prices:

Development of a regular GIF banner - from $25;
Creating a banner based on Flash - $70-150;
Resize - about 50% of its original price.

But if you're a little smarter, you can create a simple banner yourself. This is what a miracle turns out after ten minutes of manipulations with html code and an image in Coreldraw :

Banner code:

If you tinker with the code a little more and add a couple of event handlers, you will get a banner with a changing picture. The image in the banner changes when you hover over it with the cursor.

Here's what happened:

Example code:

Create animated and video banners

Let's take an example of how to make an animated banner using the Ulead GIF Animator program.

Hello! A banner is an animated picture of small size, the images of which, as a rule, change one by one. Most often, a banner consists of 3-4 images, each of which is shown for several seconds.

Animated (gif, flash) banners perfectly attract the attention of site visitors, which means that traffic can be redirected from one resource to another.

About how to create a banner for the site, how to set it up, as well as what programs to use, I will tell you in this article.

Programs for creating a banner

There are several popular programs that allow you to make a banner for the site. And although there are not as many of them as we would like, they are still free. I recommend using the following programs to create an animated picture:

Ulead Gif Animator
Banner Maker Pro 7.0.5
BannerdesignerPro5.0
Easy GIF Animator

Each of them has its own advantages and disadvantages, which it makes no sense to describe. I recommend trying all of them (they are small - each takes about 25 MB), and stop at the most convenient one, in your opinion.

Easy GIF Animator

I will describe the creation of a banner using Easy GIF Animator, since I often use it myself. This program is suitable when you need to quickly create a simple and uncomplicated banner, consisting of 2-3 changing inscriptions. The interface of the program is very convenient, which allows you to instantly figure it out. But the graphics leave much to be desired.

First of all, you will need to download this program on the Internet - choose the desired version, the appropriate language, download and start working (I, for example, use the Russified version of "5 PRO").

After launching the program, you will be taken to the main page, where you will have to choose what to create (animation, banner, button, etc.). We choose an animated banner.

The next step is choosing a color. You can choose a monotone color, or you can choose a gradient. A huge palette of colors is available, so there will be no problems with this. Let's move on to the next step again.

The third stage is the creation of inscriptions, which will be broadcast. There are many options here that you can adjust. Change the size of the inscriptions, their animation, position on the banner, etc. You can experiment with the font, as well as the colors of the inscriptions. In total, you can create up to three text messages, unfortunately, you won’t be able to create more =).

When you complete all the work, the program will offer you to save only the created banner.

Here's what I came up with (it only took a minute to create):

Creating a banner in Photoshop

Photoshop is a powerful program that allows you to create enchanting graphic elements, but it takes a long time to master this program. And not everyone has it on their computer. But if you still want to make a banner in Photoshop, but you don’t have it, then use online Photoshop (search in Google). Its functionality is limited in many ways, but it's better than nothing.

I must say right away that Photoshop is a very powerful program, and you can use it to create both very simple and uncomplicated pictures, and very bright animated banners.

I found two very interesting articles describing different options for creating beautiful logos. I recommend that you take a look at them.

Both articles describe the process of creating banners in great detail, so there should be no problems with their perception. That's how you can. If you have any questions, write in the comments.

However, if you're looking for a really high-quality banner, then it's better to go to someone who has been doing this for several years and has good reviews. I recommend a designer named Dmitry, be sure to look at his work, you can go to his website and order a banner using the button below.

How to create a banner for a website? This is a very popular question these days. The way is very much. I have described only the lightest and most tested. Everyone can

Hello! If you are a webmaster of the Internet and have your own website, then you are probably interested in the issue of promotion. So, a banner for a site is a key part of a full-fledged and functional promotion.

More than 500 people are interested in this issue every month. Recently, I myself was interested in this issue.

But let's first learn how to create a banner using programs.

Programs for creating banners

1. Sothink_SWF_Easy.A program that can be safely put in the first place. Reviews about this program are only good. Big choice different templates. You can create any banner with different sizes. All you need to know is just the basic knowledge of the visual editor. There are also over 100 ready-made banners. All you have to do is change the name of the banner and download it to your computer. However, I recommend using this program if you are a beginner. If you have any questions, write in the comments.

2. Atani_4. Software, which is still very popular among webmasters of Runet. Creating banners with this program will not be difficult. When creating a banner with Atani You can use pictures of any format. The editor in the program is very twisted. You can create whatever you want. I recommend to use only professionals. For beginners, this program will be difficult.

3. AleoFlash_Intro_Banner_Maker. The program that I put in third place. Why? AleoFlash even a student can use it. Easy to use. The downside of the program is only a small selection of templates and effects.

To be honest, from these three programs I use only this one. For me, it is very convenient in terms of work. I can be proud of my work. Rate

I created this banner in just 5-10 minutes. As for me, it is very beautiful. Download and create your first banner right now.

How to create a banner for a website online

There are many such sites on the Internet. I chose bannerfans. I really liked him. As for me, the main thing in it is the presence of the Russian language. Creating a banner with this service is quite easy. Also, with the help of this service, you can create a favicon and logo for yourself. Which may well be useful for your site.

Creating a banner can be divided into five stages:

Choosing a banner background
Choose banner size
We write the text
Working with special effects on text
And finally, working with shadows, frames and the like

The service gives us the opportunity to save the banner in various formats (.PNG, .GIF and .JPG).

That's all dear friends. I hope that creating a banner with the help of these programs will not be difficult for you. But still, if you have any questions, unsubscribe in the comments.

Thank you for your attention! See you soon!

We have released a new book "Content Marketing in social networks: How to get into the head of subscribers and fall in love with your brand.

As a rule, any web project is created in order to earn money on it. Otherwise, all activity on the Internet loses its meaning. One way to make money is to advertise on your website. The advertiser develops and places his advertisement on someone else's web resource for a fee in order to promote a product or service.

What is an advertising banner on the site

This is a rectangular block with a fixed or animated picture (text). Usually, after clicking on it, the user is sent to the advertiser's web page.

A bit of history

For the first time, the Internet banner saw the light in 1994: it migrated to the Web from the print media. In the future, this marketing technique began to develop: entire pages were created, filled from top to bottom with aggressive advertising. Over time, the visitor got used to not paying attention to its abundance - overfilling of websites with advertising began to be considered bad taste.

How does a banner ad work on a website?

New clients and buyers

In this case, it is not the number of people who have switched, but the quality of the target audience that matters. For example, an online store of down scarves needs not just curious visitors, but buyers. And it is more logical to place ads on women's web projects, forums, news resources. Scarves will be especially in demand in winter time and before holidays. Therefore, the seasonality of media advertising in this case is the autumn-winter period.

Traffic growth

Sometimes web resources exchange thematic media materials in order to attract new visitors. The administrator can place banners with links to the pages of his own site. This is done in order to capture the visitor's attention to some important text.

Benefits of this marketing technique

The price for creating and placing banners is much lower than the cost of watching a video on TV.
It does not require a huge staff to create material.
Adjustments under target audience, easy changes to the advertising campaign.
Banner (display) advertising + targeting (targeting a specific target audience) is one of the most effective techniques in marketing.

Types of internet banners

By display type

Static - one picture.
Dynamic - changing images, moving elements.
Video - the video is played when hovering with the mouse or when clicked.

By format

A simple static picture in raster graphics (JPG, GIF, PNG, etc.).
GIF-animation - drawings replacing each other in raster graphics.
Flash animation - vector graphics are used, smooth change of elements, interesting effects, sound can be superimposed.

Too “heavy” images significantly slow down the loading of a web page, which negatively affects visitor behavior and trust search engines. GIF-animation and Flash have more weight than a static image, so it is not recommended to oversaturate the page with such media materials. But visitors almost do not pay attention to a “light” static image and do not click on it, considering the image as one of the colorful elements of the page.

By size

The size of the banner for the site can be any. The main thing is that it should dynamically fit into the design and not be intrusive. If an Internet user has a filter for displaying ads, then it is necessary to provide for the insertion of a special stub image of the same size. But there are standard sizes in pixels, which we'll look at below.

728x90 - "Honor Board".
468x60 - "Horizontal".
336x280, 300x250, 300x600, 240x400, 180x50 - “Rectangular”.
300x600, 120x240 - "Vertical".
120x600, 160x600 - "Skyscraper".
250x250 - "Square".
125x125, 120x90, 120x60 - "Buttons".
88x31 - "Strip".

Almost all of the above sizes are available for placement in Yandex.Direct and Google Adwords.

How to make display advertising effective

Any clumsy block on a web resource is not yet an Internet banner. The designer must place in a small rectangle the main essence of the product or service and at the same time encourage a person to click.

Signs of a quality internet banner

Loads fast. The user does not have to wait long.
Attracts attention. In this case, it is not the color saturation or the variety of frames that matters. The picture should encourage the visitor to further familiarize themselves with the material.
Original. Similar to each other images are replete with the entire Internet. Therefore, it is important to interest a sophisticated user with your TiUs.
Stimulates to make a purchase (perform an action). That's what it is the main objective any promotion.
Inspires confidence. Especially important for a little-known company. When developing, it is necessary to take into account the psychology of colors and phrases.

Where should the ad block be placed?

The placement and size of media materials is also important.

The larger the image, the more likely it is to click on it.
The best block size is 240x400.
The top left corner and header of the website is where the visitor's eye begins to slide across the page.
The top of the site is the most effective place.
Animation blocks attract attention, even if they are placed at the very bottom.

Red is the color of determination, motivation. But its overabundance can cause aggression to TiU. Its shades (purple, burgundy, pink) are less aggressive, but also successfully applied. Red in combination with black allows you to emphasize the importance of something.
Orange - good mood, a call to action. It is considered the most effective in advertising, but is poorly suited for the background.
Yellow - joy, tunes in to sociability, goes well with black.
Green - freshness, tone, health. Perfect for the background, used more often in medical T&U.
Blue - peace and tenderness.
Violet - the sacrament and solemnity of any event. Emphasizes the originality of TiU.
Gray is the most moderate color, it does not cause rejection in anyone.
White - purity. If a non-aggressive banner has a white background, then it does not evoke emotions.
Black - not suitable for the background, but indispensable as a font color.

Text Send Rules

The picture only "catches" attention. It is the text that matters on the media block, so consider the following recommendations:

Reach out to your target audience.
Come up with an interesting headline.
The text should hint at possible solutions to the problem.
It should intrigue, arouse curiosity.
Should describe an interesting plot, as in any commercial.
Should have a connection with the graphics on the frames.
The words "Enter" or "Press" encourage action.
The word "Free" intrigues everyone.
The text should take up to 20% of the rectangle space.
Any number is credible.

If you have a logo, don't forget about it.
Font design in the form of underlined blue text encourages the user to click on the link.
Use design elements from Windows - such banners are clicked on more often.
Do not use flashing, black or red backgrounds.
Changing images should not be too fast. A person needs to have time to understand your message.
If the background of the rectangle is white, draw a border around it.
Forget cursive, small print, and words in flashy capital letters.
Advertising material should repeat the style of the advertised Internet project.
Erotic context always increases click-through rate (not applicable for all advertisers).
Images of people attract attention.
Create no more than 4 frames in an animated block.
The total animation scroll time is no more than 5-6 seconds.
If media advertising pops up and is imposed, then the user closes it.
Advertising material should lead to a page that more fully reveals its essence.

Programs for creating banners for the site

Depending on the format, the appropriate software is used to create the material. If any graphics editor is suitable for developing statics, then specialized software is needed to develop animation.

Summary

The quality of an Internet banner is determined not by how it looks, but by its clickability. Advertising may not be perfect, but if people follow it to your site, then you did everything right!

Instruction

On the Start panel, select All Programs, then Accessories. Click the Paint program to open it.

To load the selected picture into the Paint editor, click on the icon in the upper left corner, then select "Open".

In the file browser tab that opens, find the selected image, select it and click "Open" (or just double-click on it).

To crop the selected area, click "Image" - "Crop".

Resize the image: "Image" - "Resize".

In the resizing window, set the desired size in pixels for the width and height. To set arbitrary parameters, uncheck the box next to "Keep aspect ratio".

Click on the icon in the upper left corner - "Save As" - "Gif Image".

In the window that opens, in the "File type" line, the GIF (*gif) format will be set. Give the file a name and save it by clicking Save.

To insert text information on the banner, activate the Text tool.

On the text input toolbar, select the font size, font, color, font type, and location you want. Stretch the text box to the length and width you want, and enter your text.

You can add any additional elements to the banner. Or, for example, frame it: "Shapes" - "Rectangle" - select the thickness and color of the frame - use the mouse cursor to stretch the frame along the edges of the image. Then save the file again, but with a different name.

Now we need to create another file with different text. Open the first saved file (without text information) and apply new text and other elements to it in the manner described above. Alternatively, simply erase the previous text with an eraser to bring in a new one (if the background is white). If the background is a different color, click on it with the eyedropper and paint over the text with that color. Save the finished banner as described above.

So, you have at hand two identical files with different text. These will be the two layers that need to be merged so that the banner text is constantly changing. This operation can be easily done in a small program for creating animated GIFs MS GIF Animator.

After installing the program on your computer, double-click to open it.

In the Gif Animator toolbar, click the Open icon (or Ctrl+O), in the "Folder" field, select your folder with the created GIFs. Then double-click on the file that will become the second layer of your banner, so that the other file (the first layer) will lie on top, because. in this program, the animation is created in reverse order.