what is a Banner and how to design a Banner graph?

1. First of all, we should know what the size of the banner graph is and what the theme style of the banner graph should look like, because this involves the main visual effect of the banner graph, including its structure and color.

2. After determining the theme style, we will collect the materials, including background patterns, element collection, and copywriting.

3. determine the overall layout of the banner diagram, including the structure of the layout of the main elements, the size of the text, the proportion of each small element, and the confirmation of the position.

4. Edit the element. Most of the time, the elements we collected can't be used directly. At this time, we need to edit the elements first, including the matting of the picture elements. Of course, there are other simple methods, depending on our specific operations.

5. Combine the elements and edit the special effects, which includes the steps of color gradient and editing the layer blending options.

6, according to the purpose of the banner, save it in the corresponding format, and display it in the network environment. Generally, you will choose to save it in jpg format, but at the same time, Xiaobian suggests saving a source file for later modification. What are banner's citation fields?

1) People often see the advertisement banner or focus map on various websites, which are large and small, long and short, but their common function is to guide you to click and render the atmosphere in various ways.

2) You can usually see it in various game websites, real estate websites and special pages of various activities, which is often referred to as the headline. This type of banner usually does not guide users to trigger clicks, but serves the content and renders the atmosphere for the whole page.

banner consists of three parts

1. Text (dominant)

Everyone knows that our ability to interpret information from graphics is greater than that of simply reading text, but in the design of banner, in most cases, we understand information through text, and the knowledge of pictures plays a foil role, and the processing of glyphs may take up 51% or even more time in the time allocation for doing Banner.

1) It is necessary to deal with the content of the copy negatively

to make the content more in line with the information transmission. If the main subject is too long and the demander is unwilling to delete the text, it is necessary to emphasize the important keywords in the main subject, highlight the main information and weaken the non-keywords. The whole text is too short, and the picture is empty. You can use some auxiliary information to enrich the picture. Such as adding English, domain name, channel name, etc.

2) It needs to be considered that the font

text mainly contains the title and auxiliary text. The title part generally needs some design processing to improve the artistic sense and attraction of the picture. Pen-writing is a clever method in font design, but it is very effective. Stroke connection, when doing stroke connection, only the strokes that need to be connected are arranged reasonably, and some simple modeling treatment is done at the stroke ending and edge, then a better visual effect will come out. It is recommended to use some non-serif fonts with uniform stroke thickness when connecting strokes.

shape substitution: a method of designing glyphs according to the specific meaning of words. For example, replace the word "time" in the copy of selling watches with clocks and watches. Selling clothes, changing the bottom of the word "Zhuang" into a group of clothes, etc., often brings novel visual effects.

3D design: if you want to highlight the text in banner, making the text into 3D effect is the most "rude" solution, and you can achieve good results as long as you handle it properly. You can make a simple three-dimensional effect by moving multiple text copies or repeating deformation.

introductory texts or secondary information parts are generally treated in a low-key manner, and some common fonts are generally used. Just two kinds of fonts are disgusting, too many will make the picture lose. If you use some commercial fonts, you need to pay attention to the issue of licensing to avoid some legal disputes.

ordinary fonts can be revitalized in some simple ways.

Font processing:

1) Add background to words, so as to highlight the text and open the level of the background of words.

2) If the font is tilted, the overall look will be much more lively.

3) It can be said that the oblique cutting of the text can break the boring layout, which can be said that it is not easy to try.

2. Main visual diagram

The main visual part generally contains product drawings, task models, etc. The selection of product drawings should be in line with the meaning of the topic, but most of them will be provided with materials, so we don't need to spend too much energy. It should be noted that when using supplementary materials, it is necessary to ensure that the pictures are clear. When some pictures are unclear, you can use a flower filter to deal with them. Some deduction of pictures and adjustment of picture color lamp operation are all common techniques.

3. Background

The background part can set off the overall atmosphere.

Three types of backgrounds:

The first one uses a solid background, which usually makes the whole picture look fresh and concise.

The second type is gradual, which can increase the design effect and make the whole picture more beautiful. It can be used by some sci-fi classes in general.

The third type is a complex background, which is generally used in special topics to highlight the characteristics of the theme.

the choice of background needs to be determined according to the style of the website and theme. For example, the historical feature channel will choose complex background pictures to set off the atmosphere. A website with a fresh and modern style may choose a light background. When the contrast is insufficient, you can blur the background after the text and lighten the background color. About the banner design

A complete banner includes five components: copywriting, model merchandise, background, embellishment elements, and logo

embellishment elements

1. The function of embellishment elements:

(1) Visually, it enriches the picture, making it no longer monotonous or more harmonious

(2) from the marketing point of view. Increase users' clicks

2. Existing forms of embellishment elements

(1) The commodity itself is both the main body and the embellishment elements

(2) Hand-drawn graphics are used as embellishment elements

(3) Light spots are used as embellishment elements

(4) Color blocks are used as embellishment elements

(5) Various liquids and powders are used as embellishment elements (such as splashed ink and powder) Various texture patterns are used as embellishment elements

(8) People are used as embellishment elements

(9)logo or characters are used as embellishment elements

3. How to obtain embellishment elements

(1) Element extraction method

The products and materials echo each other, or the elements related to the product materials are used as embellishment elements

(2) Association divergence method

From the title. In terms of artistic conception, the lovely banner often uses hand-drawn stick figures to embellish elements

4. Precautions for embellishment elements

The number of embellishment elements should be moderate

Figure 1 is equivalent to a banner without embellishment elements or with embellishment elements similar to the background. Figure 2 is equivalent to adding an appropriate amount of embellishment elements close to or related to the main body. By contrast, it is found that Figure 1 is monotonous and Figure 2 is more full.

The visual experience brought by different processing methods for the same amount and color of embellishment elements is different.

The number of embellishment elements in Figure 2/ Figure 3/ Figure 4 is the same, but after using processing methods such as Gaussian blur or dynamic blur for embellishment elements, the picture begins to have a sense of spatial layering and is more agile.

some articles about banner

1.

6 tricks to make use of embellishment elements.