How to make a banner for the site yourself

Sooner or later, every novice web designer or site owner comes to the conclusion that he needs high-quality and beautiful website advertising. There are many opportunities and tools for this. But perhaps the most traditional and effective way of such advertising (promotion) of a site is through 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 willing to pay freelancers for the banner. It turns out that making a banner for a site is not such a complicated matter and 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 will need the Photoshop program, and there is no need to chase the most modern versions, for our purpose Photoshop 6 is also quite suitable. By the way, who does not know how to make a background image for the site, as well as a header for your site, can also use this program for these purposes.

In order to answer the question of how to make a banner for the site, you must open the program to create our banner more precisely its basis. It should be remembered that standard banners have several sizes. As a rule, the websites use banners 468x60, 120x120, 100x100, as well as 88x31. Consider the option of making a banner with a size of 468x60.

After opening the program, click on the tab β€œfile” - β€œnew”. After that, in the window that opens, specify the dimensions (height 60 and width 468), while making sure that the units are pixels. Set the resolution to 150 pixels per inch, and select a transparent background.

Next, you need to place a picture and text on our banner. But first, 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 top color box and in the palette that opens, select the color you need). And now you can use the fill to paint over the banner background in the selected color.

Now place the picture on the banner. To do this, first decide on the picture that you will post. It is desirable that she represents a not complicated figure and if not a logo, then as much as possible similar to it (although much depends on the tasks that the banner faces). After choosing a picture, by the way, it should have the extension either jpg or gif, open it in Photoshop. After that, we adjust the image size to our banner. To do this, in the main menu, select the tab "image" - "image size". After that, in the window that opens, you must set the image height to 60 pixels, and a checkmark must be checked 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 a transparent background. After adjusting the size by selecting the move tool, drag the image onto our banner and place it in the place we need.

Now we need text. To do this, select the β€œtext” tool, enter the phrase we need and place it by simply dragging and dropping over the picture as we need. After that, it remains to select "save for web" in the menu (save as) and select jpg image format when saving.

But for many, a banner with text is hardly desirable if it were 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 host your banner (this can also be done in the html editor of the Dreamweaver type) <and href = "URL of YOUR PAGE"> <img sr = "URL of BANNER"> </ a>. 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 are not asking 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 give it a look like beautiful flash sites.

Source: https://habr.com/ru/post/C8405/


All Articles