banner design:Banner design skills-Font Tutorial免费ppt模版下载-道格办公

Banner design skills

Source: WeChat public account PingMianDesigner (graphic design)


According to customer needs, determine the banner size, copy quantity and product shape, and find a suitable layout. Banner layout is divided into:


① Left-right typesetting adopts the method of left text and right picture, or left picture and right text. The layout is clear and the copywriting and pictures are clearly divided. The left and right layout is suitable for highlighting copywriting, and the proportion of pictures and texts meets the golden ratio of 40 to 60. It is often used to express financial reading products with vague concepts.


②Centered typesetting adopts the method of centering the copy (center alignment), spreading the pictures to the surroundings, and can also arrange the left and right layout, or the pictures are centered and the copy is left and right. Centered layout is suitable for highlighting pictures and copywriting. The highlighted copywriting or pictures are placed in the middle of the screen. It is often used for e-commerce and catering products with clear intentions. In addition, if there are no pictures in the banner but only copywriting, a centered composition is usually used.


The current mainstream design style of fonts is flat style. The selection criterion for fonts in banner design is that the addition of text can create a sense of harmony on the screen.



Fonts are divided into two categories: serif fonts and sans-serif fonts. Different fonts express different emotions: serif fonts give people a classic and classic feel, such as the Song font with a square and large mark, and the English font Didot, which is similar to Song font. They are often used to express women's products, cosmetics, literary freshness, etc. Purpose main title; sans serif font gives a modern, minimalist feel.


Sans serif fonts will also bring different emotions to people depending on the combination of stroke thickness:

Bold sans-serif fonts give people a strong, heavy, promotional, and cheap feel, such as bold, Founder Lanting bold black and other fonts, which are often used to express male products or home appliances, industrial products, etc.


Thin sans-serif fonts give people a sense of softness and quality, such as Founder Lanting Ultra-Fine Black Simplified and other fonts, combined with appropriate white space effects, often used to express large brands, luxury goods, and smart products with a sense of quality. Tech products or products for women.

The combination of thick and thin sans serifs gives people a strong and promotional feeling, and is often combined with text tilt to enhance the sense of promotion and hot sales.


For the fonts in Banner, in addition to using special fonts, you can also design your own fonts. First, determine the basic font according to the theme expression, then collect deformation inspiration to draw deformed fonts, and make small-scale text changes to small parts of the text to ensure high recognition of the text, such as common stroke connections, substitution methods, broken fingers, and staggered Placement method, etc.


After determining the copywriting font according to the needs of screen expression, the text layout rules of the Banner start from the height ratio: the total height of the main and deputy copywriting accounts for about 40~50% of the Banner; the main copywriting, The difference in the size level of the sub copy is usually 2 times. For example, the main copy is 60px, and the sub copy is about 30px. When the number of words in the sub copy is small, the size of the sub copy can be larger, but the difference is at least 10px.


There are three main types of pictures in Banner: illustration type, model product type (also called model type) and product type (also called picture type). Here we take the image type as an example.


① Vertical and horizontal style, product pictures are arranged horizontally and orderly. All accompanying pictures are perfectly displayed, giving users a formal and sense of security.

②Triangle: The product adopts an equilateral triangle composition, which creates a strong three-dimensional sense. Each product has a different proportion of pictures. This composition method is stable and natural, strengthens the sense of space, and brings a strong sense of space to users. A sense of security and reliability.


③ Using diagonal lines, the proportion of product images is relatively balanced, and the picture is lively, dynamic and highly stable.

④Gradual arrangement, with a strong sense of spatial display. The proportion of pictures of each product is from large to small, stable and orderly, and the perspective guides the advertising slogan, giving users a sense of stability, naturalness, and rich and reliable products. .


⑤ Radiating style, it also has a strong sense of space display. The proportion of pictures of each product is from large to small. The pictures are orderly, and the perspective guides to the advertising slogans, giving users a lively and dynamic feeling, and the products are rich and reliable.


⑥The frame composition is stable and has a good focusing effect, making users feel that the product is stable and credible.

When illustrating banners, use multi-level illustrations to convey information at multiple points, give users more choices, and use high-priced products to promote low-priced products.


The rational use of embellishments in Banner can better highlight the theme and make the entire picture more layered. Banner embellishment is usually achieved by using background gradients, auxiliary shapes, products, label refinement, and adding textures.



① Using adjacent colors as a soft gradient background in Banner design can add design details and enrich the picture effect. It not only conforms to the lighting principles of real life, but also plays a role in guiding the user's reading direction.


② Banner product embellishment can focus the user's visual attention. Commonly used auxiliary embellishment shapes include ellipse, double ellipse fusion, long rounded rectangle, circle and their variations.

③ The auxiliary embellishment shape uses very few elements, such as the size, direction, and color changes of the shape, and is repeated in the layout to create a sense of space and balance and achieve rich visual effects.


④Use label refinement in Banner to highlight weak sub-copywriting, and use labels to highlight selling points.

⑤Banner uses textures such as grid texture, dot texture, and noise texture to enrich the picture, but the use of textures cannot affect the visual effect of the main copy. Weaken the texture effect by appropriately lowering the opacity and using masks to gradient the edges.

Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Banner-she-ji-ji-qiao.html

Like (810)
Reward 支付宝扫一扫 支付宝扫一扫
single-end

Related Suggestion