Greetings friends on the blog ""! Today's article discusses the manufacture of an advertising banner with your own hands using free programs.

How to make your own banner ad

In the Infobusiness, to make money through the Internet, you can’t do without advertising, including banner ads. Advertising banners are installed on their own and other people's blogs, as well as on various banner advertising sites. For these purposes, advertising banners of various sizes and various designs are used.

If you are earning from affiliate programs, on reselling, then, as a rule, advertising banners of various sizes come with these products, and the blogger only has to install an advertising banner on the site, or place them on the exchanges of advertising platforms. But if you want to advertise your product, you can't do without your own banner. Where to get it? There are two ways:

  • buy (order) a banner on the freelance exchange;
  • creating an advertising banner yourself.

Of course, it’s easy to buy with money, but it costs money, and on the initial path of work they don’t exist anyway, first you need to earn money. Not everyone undertakes to create an advertising banner on their own, the fear of the unknown, the lack of the necessary knowledge, scares them - although it is very simple.

There were cases with me when it was necessary to place advertising banners of an affiliate program on the Rotaban exchange, but I could not do this due to the lack of the required sizes of advertising banners (banners of other sizes were applied in the materials). Work on the Rotaban exchange was written in the article "". It turns out that in order to make money on affiliate programs, you also need your own advertising banners.

Let me remind you that advertising banners on the site are static and animated. A static banner is a simple image, which usually has some kind of inscription, while the animated one speaks for itself. So, making a static banner is easier than ever for any beginner, and in this article we will deal with it. There are a lot of options for making static banners, but we will use an example to consider a fairly simple option, and with the use of free programs.

So, to make an advertising simple static banner, we need a graphic editor, it can be a simple type of standard Paint programs to the well-known Photoshop. In our case, we will create an advertising banner in graphics editor Pixlr, I like this program, it's basically online Photoshop but much easier to use.

So let's get started! First we need to decide what banner size we need. Next, we go to online program Pixlr (how to do this is shown in detail in the article ““. We go inside the program and click “Create a new picture.” In the form that opens, set the size of the future banner, in our case 468x60 and click “Yes”.

Now the field of the future banner can be filled with the color we need and make inscriptions. How to do this was discussed in detail in the previous article "", where we made pictures for blog articles.

In this article, we will complicate our task, instead of the usual filling of the banner field, we use the “Gradient” mode, the filling will be done with a variable color intensity, the image will look prettier. To do this, in the left toolbar of the Pixlr program, select the “Gradient” mode (see the screenshot) - step 1. The “Gradient” bar appears in the upper part of the window, click on it - step 2, the color selection window opens, select the color gradation we need - action 3.

Now, with the mouse, set the cursor in the middle part of the future banner and move it up, down or right, left. Experimentally, we obtain the desired color gradation.

Now you can overlay an image, as well as write text in any color and size (as shown in the article "").

In order to place an advertising banner on your own or someone else's blog, you need to create another html code received banner. This is done very simply, just like placing a picture on a blog (for example, in a sidebar). So let's use the code template:

target="_blank"> Blog banner image address» width="468" height="60" border="0">

where width is the width of the created banner;

height - height;

It is not necessary to specify these parameters, but it is better to specify them, otherwise the banner elements may not be displayed correctly if it fails. To avoid showing a blue border around the banner, you need to display border="0" .

Now, in the above template, we insert the link where it should lead the visitor. In my example, this is .

Now we need to get the address of the image on the blog. To do this, we place the resulting banner, and this is a picture, on the blog in the media files folder and take a link from there. If you don’t know how to do this, I recommend that you look at the article “”, everything is shown in detail there - posting a picture and getting a link.

target="_blank">

As you can see, the process of making advertising banners is easy and simple, any beginner can do this work, and when you get rich, you can order freelance. An advertising banner of any size is made in 5-10 minutes. If you are promoting an affiliate program, and there is no banner of a suitable size, this method is quite suitable both for making a new one and for reworking an existing advertising banner of a different size.

By the way, affiliate products are advertised by dozens or even hundreds of people, and everyone advertises the affiliate program with the same banners, believe me, there is very little return on such banners. To increase earnings, it is better to have unique advertising banners. You can watch the process of making an advertising banner in a short video, see here:

In the near future, we will consider the production of more attractive animated banners. Subscribe to blog updates and do not miss the news. There will be questions - contact. Good luck to you!

Get new blog articles straight to your inbox. Fill out the form, click the "Subscribe" button

Sooner or later, every novice web designer or site owner comes to the conclusion that he needs high-quality and beautiful site advertising. There are many possibilities and tools for this. But perhaps the most traditional and in an efficient way such advertising (promotion) of the site is - banner advertising. But here the question arises, how to make a banner for the site yourself, since at the initial stage the budget of the site is very limited, and therefore not every owner is ready to pay freelancers for making a banner. It turns out that making a banner for a site is not such a difficult thing and is very similar in technology to such a process as making a header for a site, while we are talking about a static banner.

So, let's start how to make a banner for the site. To do this, we need the Photoshop program, and there is no need to chase the most modern versions, Photoshop 6th version is quite suitable for our purpose. By the way, who does not know how to do background image for the site, as well as a header for your site, you can also use this program for these purposes.

In order to answer the question for the site, you need to open the program to create our banner or rather its basis. It should be remembered that standard banners have several standard sizes. As a rule, banners 468x60, 120x120, 100x100, as well as 88x31 are used on sites. Consider the option of manufacturing a banner with a size of 468x60.

After opening the program, click the "file" - "new" tab. After that, in the window that opens, we prescribe the dimensions (height 60 and width 468), while making sure that the units of measurement are pixels. Set the resolution to 150 pixels per inch, and select a transparent background.

Next, you need to place an image and text on our banner. But first, let's fill our banner with the color you need. To do this, select the fill tool on the left in the toolbar, but before that, be sure to select the desired color (left-click on the upper color square and select the color you need in the palette that opens). And now you can use the fill to paint over the background of the banner in the selected color.

Now let's place the image on the banner. To do this, first decide on the picture that you will post. It is desirable that it would not represent a complex figure and be, if not a logo, then as similar as possible to it (although a lot depends on the tasks that the banner faces). After the picture has been chosen, by the way, it must have the extension either jpg or gif, open it in Photoshop. After that, we adjust the size of the image to fit our banner. To do this, in the main menu, select the "image" - "image size" tab. After that, in the window that opens, you need to set the height of the image to 60 pixels, while there must be a checkmark in the "keep aspect ratio" field. If the image has its own background, then it must first be cut and pasted into a new image with transparent background. After adjusting the size by selecting the move tool, we drag the image onto our banner and place it there in the place we need.

Now we need text. To do this, by selecting the “text” tool, we enter the phrase we need and place it by simply dragging it over the picture as we need. After that, it remains to select "save for web" (save as) from the menu and select the format when saving jpg images.

But for many a banner with text is not desirable that it be a banner link. How to make a link for your banner and link them. To do this, you need to write the following code on the site that will place your banner (this can also be done in the dreamweaver type)< а href="URL ВАШЕЙ СТРАНИЧКИ">< img srс=" URL БАННЕРА " >< /а>. in order to determine the " BANNER URL " you need to know how to add a banner to the site and where.

That's all, your banner is ready and now you don't ask yourself a stupid question how to make a banner for the site. By the way, using banners, but not static, but based on flash technology, you can significantly diversify the pages of your site and make it look like beautiful flash sites.

Working on the Internet often requires knowledge in the field of design. It is easier for those who have photoshop on "You". But what about the rest? The correct answer is learning. But learning the art of working with Photoshop in one day will not work, and pictures and images are needed today.

There is another option - to order this work to a professional. But the professional must be given clear instructions on what should happen in the end. To find out what the terms of reference for a designer should be, at first you will have to get into this unfamiliar area for a while yourself.

How to make a banner yourself?

I know that there are a lot of programs and services on the Internet that can solve this problem. From the abundance of these resources, I chose one worthy of my entry level. She helped me out quite well at first and helped me navigate and determine what images I need on my site.

It's called artbanner.com. Be sure to bookmark this resource, as the help of professional designers is always in demand. If you do not have a familiar designer, then you already have one recommendation. With this resource you can:

1. Make your own banner

2. Edit photo

3. Make a favicon

4. Order a banner

Since I was only recently interested in one question: where to find an easy and accessible program for me that I can understand, I think that my advice will help beginners quickly and easily make an image.

If someone does not know what is banner on the Internet, then read the definition: this is an advertising or information carrier of a graphical form. These media can be completely different: static and animated, with and without various effects. Everything will depend on what audience the banners are designed for and what tasks they meet.

Let's see how you can use the "Banner Generator." The first thing I saw was the very accessible written rules that must be followed when working with an online program. Below is the generator itself.

As you can see, the program has several sections: Layout, Text, Frame, Effects, Save. We will do the very first actions in the "Layout" section. Let's choose the size of the banner. For example, we need to make a title for our blog. In this case, the size of 728 x 90 is suitable. We mark and proceed to the choice of background. It is easy to guess that by clicking on the box with the color, you can select the color you are interested in. It is also possible for the background to upload your picture from the computer.

If you need an image with text in 3 lines, then you will need to work in three fields. In the first one, we write the title, for example, Piggy Bank of Tips. We can also make the font in different colors. By clicking on the word Example in the picture, we get font samples where we can choose the one we like.

There are few options, but you must admit that they can still help out. Next, select the font size, here you will have to experiment, based on the size of your banner - is there a place to roam, or not. You can also play with the arrangement of letters, with shadows, and do the same in the other two fields, that is, the lines of your banner.

In the Frame section, you can set the size and color of the future frame. If you don't need a frame, set the Frame Size to 0 in the right field.

In the effects section, you can use the suggested effects. After all the steps, you can safely click the "Update" button.

If you do not like the result, you can open the sections one by one and change the desired values. It will take time and the selection of the font, and the choice of the appropriate size of letters and background. In the "Text" section, the arrangement of lines can be adjusted with the sliders located on the left of the page and at the very bottom.

Only after you like what you drew, you can go to the Save section, where you will be prompted to generate an HTML code and a URL link.

Mark what is important to you and click "Save Banner" and "Generate Code".

Here is the final version. I think that for some temporary option is quite suitable. And the HTML code obtained in this wonderful program will be very useful in further work on a website or blog. By installing the code in the widget, we can inform visitors about a new article or important news and events.

You can also create a GIF banner on the "Banner Maker" page at artbanner.com.ua/konstruktor-bannerov. It's easy to make by following the instructions. Attracting the attention of visitors is guaranteed.

In this program, you can generate the HTML code for the images you already have that you want to use as titles or covers for your books.

In any case, you, dear readers, have another resource where you can independently and for free, without the help of specialists, make a banner, the main task of which is to evoke positive emotions among visitors.

So, step by step, working on the Internet teaches us the basics of different professions. Of course, becoming a professional is not easy, but amateurs, studying at successful examples can master the necessary primary skills for independent work. Master knowledge, be successful and efficient in your business!

In time, you'll be as good as this boy who parks his car smartly.

11/12/14 30.9K

Advertising - necessary thing for any site. 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. The banner can include both text and graphic drawing. 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 deal with existing types banners. There are the following types:
  • Static banners - consist of static image. They are drawings in JPEG format or png. 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:

  • 88 by 31 pixels;
  • 120 by 60 pixels;
  • 120 by 90 pixels;
  • 120 by 240 pixels;
  • 125 by 125 pixels;
  • 120 by 600 pixels;
  • 160 by 600 pixels;
  • 180 by 150 pixels;
  • 234 by 60 pixels;
  • 240 by 400 pixels;
  • 250 by 250 pixels;
  • 300 by 600 pixels;
  • 300 by 250 pixels;
  • 336 by 280 pixels;
  • 150 by 150 pixels;
  • 468 by 60 pixels;
  • 728 by 90 pixels.

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. Welcome lung use wit and humour:
  • 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 best aspects of the object of advertising or the benefits that the user can get from acquiring it.
  • If the banner is intended to increase brand awareness and enhance 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 vacancies 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. Here's what happens after ten minutes of manipulating the html code and 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 look at an example of how to do animated banner using Ulead GIF Animator.

2 votes

Good day, dear readers of my blog. We continue to talk about how to make your site work. Recently I wrote about contextual advertising in general and in particular. This method is a little more suitable for young projects than Yandex Direct.

Today I will talk a little about a different method of banner advertising. It's not about the context, but something approximate. This way of earning is elementary to disgrace and more profitable.

You will be able to receive money even if you just opened your site yesterday and only 5 people visit it. I will tell you how to make a banner on the site and give a chance to a young project to bring many times more money.

Shall we start?

Service for creating banners

Online service bannerovich perfect for a beginner. It's a little tricky, not in terms of technology, but the process of getting the banner itself for the first time. Nevertheless, the result that you get in the end is very good, and this article will help you deal with all the nuances.

The great thing is that you can use it completely free and. It will allow you to create even animated advertising, much more easier than photoshop and more than perfect for a beginner.

Well, let's get started.

The first thing you need to do is go to the Bannerovich website and go to the banner maker. Be careful, not the editor, but the constructor.

Now enter the name of the project. Set the width and height of the banner, either by using the sliders above the "Create Banner" button, or by entering numbers in the sides of the visual thumbnail. Please note that it is not presented here in full size, but only with the preservation of proportions. My result will be several times greater.

This is what the editor panel looks like. Here you can add background, image, button, text or animation.

It all starts with the background, as it is located at the very bottom. After you click on this button, you will see a lot of options from which you have to choose the most suitable one.

Images are stored in the category of the same name and "Miscellaneous". There are all sorts of pictures with gifts, vector men, arrows and so on. Select and drag with the mouse Right place. I added a man. If you change your mind about using an element, click on it and in the right upper corner picture, a Delete button will appear.

Now you can add a button. Click this item, I will tell you more details about its functions.

With the basic settings, I think that there will be no problems. Surely you yourself will figure out what is the top and bottom color, rounding corners and text. I want to talk about Open Link Tab. Since the button itself is not animated, only images change at a given time, I recommend that you do not put a link on it, but use a link for the entire image.

In this case, there will be no difference if the visitor of the project clicks exactly on the button or in any other place of the picture, he will get exactly where you need. Just don't touch anything in this box.

Now you can add text. There is nothing complicated here either.

If you want to make the banner animated, then click on "Add Animation", completely or partially change the image, and then click on "Add Animation" again. Another frame will appear. You can add many frames, they will replace one another.

Now you need to click on "Get Banner".

A simple form will appear. Enter your address Email and click "Get banner" Wait for the letter to arrive in the mail, for some reason it constantly went to spam for me. Enter this code and "Get banner" again.

Now another letter should automatically come to your mail with congratulations that you have made your first advertising banner, as well as a password from personal account and login. Enter them, and go to "My Account".

Please note that if you have a value for this site, you will have to disable it, otherwise you will not see your project. Turn it off, then click on "My Account" again.

Below you will see a project and html code that you will need to add to the site. Copy it.

How to add a banner to all pages

Open and go to the tab " Appearance- Widgets.

Here you will see the Text widget available, move it to the main column, content or footer area. Depends on this in the sidebar, bottom or main banner will be located. Try different options.

By the way, where exactly you place this widget is where it will be located visually. If above the "Search", like me, then the picture will rise above this panel. If under "Headings", then ... well, you understand.

Paste the copied text into "Content" and change the information in quotes after "a href" there should be a link where your banner will lead to. Change also the text in quotes after the title. This will add your hint. Now it will look like "Banner made by Bannerovich".

This is what I ended up with after all the changes.

I now have this picture on all pages of the site.

Adding a banner to a post

If you want to insert an image into a specific article, then open the Posts category, and then select the one you want to add an image to or create a new one.

Open the "Text" tab in the upper right part of the information entry field, insert the html code, change the link and title. If after that you open "Visual" again, you will see a picture. You can surround it with the text you want.

Ready. Here is my banner.

I hope you managed to do everything yourself and there were no problems during registration. If so, leave your comments on this article. Let's figure it out together. By the way, in my blog you can read more for the site. They will be a little less beautiful, but only html.

By the way, the creation of banners is already good way make money. I can offer you a course How to make money by creating banners ". This hobby can bring from 30,000 rubles a month. The main thing is to find good customer and know some nuances that allow you to increase the number of clicks on the picture.

Well, if you still don’t know what to sell or want to find new, more profitable channels, I can offer you webinar recording about affiliate programs . Here you will find two effective strategies, a formula to increase earnings, as well as learn how to copy sales pages and make money from almost nothing.


Subscribe to my blog newsletter and very soon I will teach you how to quickly and profitably work in Photoshop, give you 10 tips to help you create projects that sell twice as often and tell you a few secrets of top designers.

Until we meet again and good luck in your endeavors.