Banner design: Master taught you how to design banners? Of course, there are not many variations of banner total characters here, but more different typesetting of different characters. How to typeset a paragraph of text, how to highlight the copy, and how to do it without deformation!

According to the focus of the article:

1. Thinking about the theme orientation.

Positioning is very important. I once stole the content of the whole page. From the previous articles about the gender and types of words, I have a preliminary understanding of positioning. The next step is to try and make progress in practice!

Two: understand that words are dominant in Banner.

Text has always been the focus, and the more conservative approach is text+background. But the text should distinguish between the main title and the subtitle, so how to highlight the typesetting on the text is the most important!

Third, build auxiliary vision.

It's practical here. There are three typesetting methods:

1 text+background. It seems easy to do, but it has never been done well.

2 text+theme. 1 is the best one, and the second one is easy to paste the whole interface. Do more and try more!

3 theme+background+text. This is a common method, but it is often not done well.

Fourth, the artistic expression of theme creativity.

I like the third picture here. It's really good. Although the person on the right is not very good at digging his head, the idea and creativity of this picture are very good.

Banner is a small picture, but it is very skillful. Try more and make more progress!

How to compose a banner picture of a web page and a banner picture of a website?

Composition is the most important and basic part in website construction and design. We need to typeset the banner picture of the website first, and then make sure the overall effect of the banner before filling in the creative whole. The purpose of this is to enrich the banner style. In fact, the most fundamental thing about Banner is that it is illustrated with pictures and texts. We can design banners in the following ways: left word and right picture, left picture and right word, left middle and right composition, up and down composition, text as the main body and irregular composition. According to this typesetting method, we can make banners with richer effects and contents.

2. The font effect in the banner.

Font plays an irreplaceable role in Banner, because the temperament, style and image quality of font directly determine the quality of Banner design. If the font in banner is particularly ugly, it will be greatly discounted in the eyes of users. Therefore, when choosing fonts, it is necessary to adopt two forms: Songti and thin bold, so that the designed Banner looks more in line with the whole website and the harmony of the whole website.

3. Banner color matching

Banner color matching is usually based on the content of the website and the overall style of the website. The advantage of this is that you can adjust the saturation and brightness of the colors in the banner picture of the website. For example, when we design the website Banner, we can use the combination of yellow, black and white, which will make the effect more vivid and the visual effect more impactful in color contrast. Recommended reading: skills to optimize the design of carousel map on the homepage of website

4. Banner decoration

No matter what website you do, you need to decorate the content, colors and pictures, and so does the website Banner. We add some small elements and decorations to the banner to make it more design-oriented, and play a role in embellishing and enriching the picture.

When we redesign Banner, we need to combine points, lines and surfaces to balance each other, and the designed Banner diagram is more colorful. In addition, the selection and design of fonts, the analysis of color matching and the application of decoration all show that Banner is different.

Explain the design skills of APPBanner and determine the style.

Typesetting/typesetting

colour

1- 1. We first expound the first aspect of text font processing:

Text cutting, this processing method is generally to cut a certain part/joint of the font, or add some elements at the cutting place; The advantage of this treatment is that the font is more artistic and the picture is more spatial, which adds a bit of literary or mysterious atmosphere to banner as a whole;

Distortion the font; Let's look at the picture 1-3, where the font is distorted. In figure 1-5, the designer handles the endpoint details of the font. Or change the font thickness and stroke shape, so I won't give an example here. This treatment makes the text "live" and more suitable for the semantics of the copy;

Blur/erase/transparency/color difference processing is generally used to blur or transparent the strokes of a font, or erase a part with a brush, or change the color of the strokes. In short, there are many ways to deal with it, but they are all similar. This processing method makes the font look more stereoscopic or more suitable for the background;

Add Highlight/Drop Shadow to the font. This processing method is to add some highlight elements to the font, or add some linear or planar "projection" elements behind the font to make the font look more stereoscopic and fit the background very well.

1-2. Above, we have completed several common font processing forms. Let's talk about several common typesetting styles of banner copywriting;

Horizontal layout is a common typesetting style. Generally, font size/thickness/type/color is used to distinguish the main content from the secondary content. This kind of typesetting has distinct layers and is clear at a glance.

Inclined typesetting is generally used for pages with strong impact, which is more dynamic and energetic.

Vertical layout, suitable for typesetting with less copywriting content, is mostly used for classic and fresh pages of literature and art;

Staggered typesetting, which looks more beautiful and imposing, is also limited to Banner with less copywriting content.

Wave typesetting, which is rare. Let's stop here. This kind of typesetting is mostly used in holiday activity pages, which is more lively and enhances the atmosphere.

2. The word processing and typesetting are mentioned above, so let's talk about graphic copy, common graphic copy.

Illustration with pictures, this kind of requirement for designers is relatively high, and you need to draw your own illustrations, and of course you can also find materials;

Physical picture matching generally uses a picture of a product/person/scene directly, but this kind of picture requires higher clarity and composition;

The picture is transformed into a hand-drawn picture. This way of matching pictures is to transform pictures into hand-painted styles, which solves the problems of unclear pictures and insufficient integration with background pictures, and is more design-oriented.

3. Let's briefly talk about banner's background. There are four common background types: solid color background, gradient background, texture background and picture background. The first two are easy to understand. Texture background is usually paper or stone/ground texture or variegated texture, and the picture background requires clear and beautiful picture.

4. Decorations are divided into background decoration and copywriting decoration.

4- 1 Common background decoration with a little line geometry and illuminator.

4-2 copywriting decoration, common copywriting decoration line geometry, brushes and graphics added according to copywriting semantic environment.