How to make a banner with your own hands on the street. Free online banner maker

Working on the Internet often requires knowledge in the field of design. It’s easier for those with Photoshop on “You”. What should the rest of us do? The correct answer is to study. But you won’t be able to learn the art of working with Photoshop in one day, and pictures and images are needed today.

There is another option - 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 delve briefly into this unfamiliar area yourself.

How to make a banner yourself?

I know that there are tons of programs and services on the Internet that can solve this problem. From the abundance of these resources, I chose one that is worthy of my entry level. She helped me out quite a bit at first and helped me navigate and determine what images I needed 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 don’t know a designer, then you already have one recommendation. Using this resource you can:

1. Make your own banner

2. Edit photos

3. Make a favicon

4. Order a banner

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

If anyone doesn't know what it is banner on the Internet, then read the definition: it is an advertising or information carrier of a graphic type. These media can be completely different: static and animated, with or without various effects. Everything will depend on what audience the banners are intended for and what tasks they meet.

Let's see how you can use the “Banner Generator” section. The first thing I saw was very clearly written rules that must be followed when working with the 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 steps in the “Layout” section. Select the banner size. For example, we need to make a title for our blog. In this case, the size 728 x 90 is suitable. Mark and proceed to selecting the background. It is not difficult to guess that by clicking on the color square, you can select the color you are interested in. It is also possible to upload your own picture from your computer for the background.

If you need an image with 3 lines of text, then you will need to work in three fields. In the first we write a title, for example Piggy Bank of Advice. 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, choose the font size, here you will have to experiment, based on the size of your banner - whether there is room to roam or not. You can also play with the placement 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 a frame is not needed, set the Frame Size field to 0 in the right field.

In the effects section you can use the proposed effects. After all the steps, you can safely click the “Update” button.

If you don’t like the result, you can open the sections one by one and change the desired values. It will take time to select the font and choose the appropriate size of letters and background. In the “Text” section, the position of the lines can be adjusted using the sliders located on the left of the page and at the very bottom.

Only after you like what you have drawn, you can go to the Save section, where you will be asked to generate HTML code and a URL link.

Mark what is important to you and click “Save banner” and “Generate code”.

This is the final option. I think that for some temporary option it will be 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 Designer” page artbanner.com.ua/konstruktor-bannerov. It's easy to make if you follow the instructions. Attracting the attention of visitors is guaranteed.

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

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

This is how, step by step, working on the Internet teaches us the basics of different professions. Of course, it is not easy to become a professional, but even amateurs, learning from successful examples, can master the necessary primary skills for conducting independent work. Master knowledge, be successful and effective in your business!

Over time, you will do no worse than this boy who parks his car recklessly.

The first advantage of the banner builder is that it is available online and does not require the installation of additional software. As you can see in the screenshot, the service itself is small and not overloaded with menu links, control buttons and various settings. On home page There are only 4 of them. We need the My Projects and Inspiration section. After authorization via Facebook or regular registration (email + password), we can begin creating a banner, poster or invitation.

How to make a banner

The service has everything necessary tools to make a banner quickly and efficiently and download in the format we need. Several image formats for ready-made banners are available: JPG, PNG and PDF.

To make a banner, you just need to start. Go to the designer's website.

  1. We can choose a ready-made design from the proposed library of ready-made designs. In fact, if we are satisfied with the picture and design, we can only replace the text with our own;
  2. Or, you can start creating from scratch by setting right size or by choosing from the proposed formats (for Facebook, Instagram, Poster, etc.) and uploading your picture to the service.

Having selected the desired size from the template or specified your own dimensions, go to the banner creation page. The menu on the left will change and look like the screenshot. Now we can add photos, backgrounds or patterns to the background from the gallery or upload our own. In the remaining sections we can find Lines, Frames, Shapes and more.

Each added element can be repainted in different colors, changed in size, location and transparency. The text is added separately and you can also do all the modifications listed above with it. Russian fonts are available in the service.

The finished project will be stored in your account and you can return to editing whenever you need. You can download the finished banner or poster at any time in image or PDF format. If something doesn’t work out for you, watch the video below (the sound is quiet, alas, it turned out that way), where we will try to make a banner, something simple, and download it.

To work with the designer, it is better to use the Chrome browser, since I noticed that when saving, Mozile does not fit the .png extension - this can be solved by simply renaming the file and adding the desired (in which it was downloaded) dot and name (png or jpg). Look like that's it.

Entrepreneurs often contact me with questions about how to create an effective advertising banner. To answer this question for the general public, I decided to write this article, combining the 10 best business design techniques in my opinion.

Firstly, it all depends on the difficulty of creating banners you are willing to face. The easiest way to create a good banner is to use the services of automatic online banner design programs. The best three of them are located at:

http://www.animationonline.com;

http://www.zyris.com;

http://www.quickbanner.com.

Personally, I use Paint Shop Pro to make banners, a free demo version of which can be downloaded at http://www.jask.com. It is the best easy-to-use graphic design program available on the web today.

However, having the right program does not mean that you will be able to create a banner that will work effectively for you. When developing your own banner, you need to be guided by certain principles, 10 of the most significant of which I intend to outline below.

1. Use the words “Click Here” and “Login” when designing your banner. Of course, your first thought in this case will be that these words are already stuck in the teeth of Internet users. However, research clearly shows that the use of these words alone helps to increase the effectiveness of the banner by 20 - 30%. It is these words that, as a rule, become the decisive factor in the user’s action, provided that he is interested in the title.

2. Make animated banners. Banner animation increases its efficiency by 30 - 40%.

The most important thing in this case is that the animation should not be too complicated, because... firstly, a long animation distracts the user’s attention, and secondly, the banner becomes “heavy” to load, as a result of which banner networks will not accept it, and other webmasters will refuse to place it on their pages.

3. Banners should load quickly. The maximum size of a good banner is 10 - 12 kb. Of course, it is difficult to fit into such a volume all the necessary advertising information in combination with good design, but it is absolutely necessary. Most of the banners that I have seen weighed approximately 15 - 20 kb, which accordingly affects their loading time and the attitude of users towards them. Most the best option so that the banner weighs less than 10 kb, then it will be much more effective and attractive both for banner networks and for other webmasters and, of course, for visitors.

The best and easiest way to achieve the desired result is to use animation of two or three frames. Plus, when preparing graphic images for frames, use color management, because... in some cases, the frame can be made in a palette of 16 colors, and this helps to save 3 - 4 kb.

4. Use scary headlines. Don't expect that by making a beautiful banner you will automatically get the user to click on it. The secret to effective banner advertising is using a good headline. The best technique in this case is to use the same title as the title of the page to which the banner link leads. When the user clicks on the banner and opens a page with the same title, his attention to your site will increase.

5. The best word that must be used in the title is “FREE”. In this case, in no case should this word be placed without explanatory text. Explain to users exactly what they will get from you for free. Practice shows that using the word "FREE" with good explanatory text helps to significantly increase click-through rates.

6. Underlined blue text can increase clicks. Seeing the blue underlined text, any Internet user will immediately unconsciously think about the link. By placing text on the banner in the specified format, you will help create an unconscious motivation for the user to click, which will significantly increase the effectiveness of the banner.

7. The most best color for the banner frame - blue. It is much better than all other colors that can be used in this capacity. Research has clearly shown that this seemingly insignificant detail can greatly help you achieve the desired result.

8. Use the address of your website, as well as the logo and company name in the banner text. Do not reduce the content of the banner to the company logo, its name and website address, but they must be present. And the main point in the banner should be the benefits that you promise to users. This technique creates in the user’s mind the effect of a recognizable trademark and can have a significant impact on the number of clicks on your banner.

9. Use certain tricks when designing your banner. The most common of these “tricks” is to design banners as Windows controls, in particular buttons, drop-down menus, scroll bars, etc. Oddly enough, many people fall for these tricks, wanting to select one or another “menu” item, scroll further through the text, etc.

10. Change banners more often. Research has shown that even the best banners, made according to all the rules, after the third viewing by the user, begin to rapidly lose their effectiveness. If during these three views the user does not click on the banner, he will never do so again. And if you implement paid campaigns with banner advertising and buy millions of impressions, you should have in stock a large number of various banners.

The popularity of any site depends on its promotion on the Internet. Attendance is determined not only by positions in search engines, but also by advertising campaigns. One of the most popular types of advertising, which originated long before the advent of the Internet, was the banner - a graphic poster with some image. The World Wide Web borrowed this idea, and now banners are often found on virtual spaces of the network - websites.

Banner is one of the most common types of advertising, but to launch advertising company it still needs to be created. This article will discuss how to make a regular or animated banner for a website online (using website builders) or using programs.

Banner (English banner - banner) – a graphic image of an advertising nature. In the Internet sphere, a banner is a special advertising format containing a hyperlink to the advertised site.

It is a misconception to consider the only task of a banner to attract users. Banner advertising has another role - to form a recognizable brand, to create positive image. And an excellent example of this is the Internet banners of popular operators cellular communications. Many types of advertising use their logos, which are actively promoted by advertising. But banners make a greater contribution to this matter.

The use of banners is very useful for advertising any paid goods or services, which will help the owner of an online store.

1.1 Banner formats

First of all, the question arises about the geometric dimensions of the banner. After all, it is planned to be posted on various Internet sites. In fact, you can use any size at your discretion, and then find sites that are willing to place such a banner. However, standardization helps to greatly simplify this matter. For example, many web resources initially contain static areas intended for banner advertising (of certain sizes).

Most often the following standard banner sizes are used on the Internet (the grid is taken from advertising campaign Google Adsense):


Note: Dimensions (horizontal X vertical) are indicated in pixels (px).

You can see what banners of these formats look like.

1.2 Types of banners

In addition to the format, one more feature should be taken into account. A banner, according to the method of its implementation, is classified into one of three types:

  • Static banner- the simplest option. In this case, the banner is one static picture (an unchanging image). Advantages: ease of implementation, low file weight. Disadvantage: minimum expressiveness; Such banners are usually less effective than other types.
  • Animated banner represents several images that alternately change over time. The format of such a file is “.gif”. Advantages: high efficiency, good expressiveness. The disadvantage is that the banner is quite heavy compared to the previous version.
  • Flash banner (Java banner)– the most difficult option in terms of implementation. Created using Adobe Flash technology. Due to its features (using vector graphics instead of raster graphics), the file size is significantly reduced, but additional opportunities appear ( sound effects, smooth change of frames, etc.). Some banners provide the opportunity to perform interactive actions (press buttons on the banner, play mini-games, etc.). And the advertising is inside and is not visible to the user. In essence, this banner is a program. Advantages – highest efficiency, excellent expressiveness, small size file. Disadvantage: additional requirements for sites (Java support is required) and browsers (may not work on older versions of browsers that do not support Flash animation).

2. How to make a banner online

One way to make an animated banner online is the bannerfans.com service. Its advantage is that the banner creation functionality is superior to similar resources. It is possible to change the language (Russian is supported).

Before you start creating a banner, you can download several suitable templates, on the basis of which the layout will be designed. The fact is that it is very difficult to create beautiful banners on your own without being a web designer. And the templates are completely ready to use; you just need to add text to them (and, possibly, edit the color scheme).

Some beautiful templates banners can be taken. And to work in Photoshop, you can use these.

Using this service, you can create not only banners, but also logos, favicons and, possibly, your own unique ones for the site.

Now let's talk about how to create a banner for a website using bannerfans. This is done in 5 steps.

2.1 Step one: creating a layout

So, first you need to go to the online banner maker - here is the link. Having switched the interface language to Russian (upper right corner of the site), select the “ Layout» ( first area on the screen ). Here the background for the future banner is created.

After this, you need to select the image size (your own, fixed or template). If you use a template, then select the first item ( second area).

Now you can select the background of the image ( third region). You can upload your image by selecting the third option. If you don’t have a template, select the first option (solid color) or the second (gradient fill). The screenshot shows the option with a gradient.

In the fourth area The initial color of the gradient and the final color are selected.

In the fifth area the type (mode) of the gradient is selected.

2.2 Step two: creating an inscription

At this stage, you can create up to 6 different inscriptions. But first you need to go to the “ Text" In the screenshot below, the area is divided into seven parts.


First area– preview, where you can see what the banner will look like. This area is notable for the fact that you can “move” the inscriptions right on it, changing their position on the background. The disadvantage of the service for creating banners is that all the changes that you will make do not occur online (to do this you have to click on the “ Change banner»).

Second area– directly the inscriptions. You can create up to 6 different options. But the length of the inscription should be such that it fits against the background of the banner.

Third area– selecting the font of the inscription. You should be careful here - the choice is huge, but not all fonts support Cyrillic.

Fourth area - font size.

Fifth region– color of the inscription. Quite a large selection available.

Sixth region– inclination of the inscription (relative to the horizontal).

Seventh region– “change banner” button. Used to display changes made.

At this stage, you can create effects that lead to the appearance of shadows from the inscriptions. This helps create banners that are more expressive. First you need to go to the “ Impact».


Shadow– selecting the position of the shadow (right, left, top, bottom, etc.)

Distance– distance of the shadow from the main inscription.

Color– select the shadow color (gray is selected by default).

Brightness– select shadow brightness.

Plan text– selecting the thickness of the inscription frame (when creating, the text is outlined in an additional color, which makes the inscription three-dimensional).

Sketches of flowers– select the frame color.

This stage is very simple. Here you can make a frame for your future banner if necessary.

The screenshot below shows the frame options (absent, solid, dotted, double solid and double dotted).

Under the frames there are other settings - color, size, distance from the background borders and line brightness.

2.5 Step five: saving the banner

The final stage. All that remains is to select the format in which the image will be saved, and then download the finished banner.


. PNG– a format that guarantees high quality image, but its size will be large.

. GIF– the “lightest” format. Low quality, but also small file size.

. JPG- something in between the two previous options.

3. Programs for creating a banner

There are many programs that allow you to create simple animated banners for your website yourself. There is no point in considering all of them, but one should be examined in more detail.

3.1 Easy GIF Animator

A very convenient program for creating banners is Easy GIF Animator, which can be downloaded for free from this link (about 4 MB). Although the program itself is paid (costs about $30), the first 20 runs are free (trial). The program creates simple animated GIF banners for the site.

After installing the program and launching it, select “ Create an animated banner».


After this, a window will appear to create a background image. You can specify standard size banner from those offered by the program, or you can specify a non-standard one - your own (thanks to which you can even create your own animated one). It is also possible to determine the dimensions of the banner template for further processing.

In the next window, you define the banner color parameters. You can upload your own template, or you can choose a simple color or gradient.

Next comes the label creation window. Texts (no more than 3 pieces) will follow one after another with the selected delay. For the inscription you can choose the font, size and color. Alignment and fading/disappearing effects of texts are also specified.

This is the last step of creating an animated banner for a website using this program. The banner, of course, turns out to be simple, but for a start this will do. Here's what you might end up with:


3.2 Other programs for creating banners

  1. Banner Maker Pro– another small program (about 6 MB), which makes it possible to create animated simple banners, mini-logos or buttons. It is very simple and easy to use, but its capabilities are limited.

What if you are not ready to pay for the services of a studio, agency, or freelancer? What if your budget was spent on other important business tasks? Or perhaps you haven’t found the responsible people to whom you entrusted this task? Not every entrepreneur, businessman, blogger is ready to spend their money on studio or freelance work. It may not always be rational to spend on expensive services. For this purpose, Bannerovich’s team has created an online banner designer so that every Internet user can create a banner, an animated postcard, or a website banner on their own and without paying for the expensive services of an agency or studio. By making banners from Bannerovich, the user saves his money and time.

Our Bannerovich team offers you services for making banners, you make a banner on the Internet on a web resource, without downloading software and on your own. The banner designer makes it possible to make a banner easily, quickly and economically!

You need to use your creative part, which is in every person, and make a banner for your needs. Bannerovich has produced more than 500 banners to date. After looking at examples of banners made, you can imagine what can be done with this banner designer! We are sure that your banner made by you will be much better!

Just go ahead and make banners! If you want to do it well, do it yourself!