Layout of Banner Poster -ui Design: Several Popular Types of Banner Processing

How does poster design create banner? 1. Organize the requirements and collect information: understand the core requirements and prepare for the design direction. Slogan: Chuanwu (work name) Copywriting: The power of Fu You, reversing life and death. There are many comic works and the content style is complex, so the first thing to do after getting the demand is to "investigate" the works. Through reading comic works, we can understand the content, story and painting style, so as to determine the direction of design. Only in this way can we accurately grasp the tonality of our works in the design process, design the banner that best fits the content of cooperative style, and pass on the essence of our works to users. For example, the above works, SLOGAN's "martial arts" is what we should focus on designing and displaying. The subtitle "The Power of Fu You, Reversing Life and Death" is also very important, which often conveys the selling point and tonality of the works. Let's take a look at the material we got, a simple single material. It looks monotonous, and there seems to be no place to cut in. At this time, it shows the importance of "investigating" the works first! 2. Determine the design direction: define the design direction and accurately show the tonality of the work. Through reading, we know that this work is a bloody, ancient and fantastic work, with a general story content, combined with our subtitle "The Power of Fu You, Reversing Life and Death". I'm starting to get a picture in my head. "Fu You" probably expresses a scene, while "Power" and "Reversing Life and Death" convey a magnificent scene. This laid an accurate direction for our design direction. First of all, pull our material and copy into the box to make a general layout and find the feeling. The first left and right typesetting is too conventional, and it is a bit weak in scene and momentum. The second one added a comic box and wanted to cut into some story content and show it together. However, some emphasize the existence of comic boxes, and the magnificent scenes are not displayed. But pay attention to the right part, it seems a good choice to arrange the main title on both sides of the character! Let's start here. I tried it again and found that this layout seems to be the feeling we want! Now that the framework has been determined, we will continue to strengthen the sense of "momentum" and "strength" in this direction. We take people as the center, and imagine that there is power in the picture to "generate" outward from behind the characters, then our fonts can be designed to have some trends inside and grow outward around an arc. Create a sense of "power" and give off light vision from the back of the characters. 3. Color selection: follow the previously determined design direction and refine color selection and collocation. My method generally starts from the material itself and extends the desired color matching according to the desired visual style. In this way, the colors are more integrated, and the character materials can be better integrated into the background atmosphere, which is also convenient for later adjustment. Observing the material, we found that its colors are all gray. Without contrast, it will look "dull" and it is difficult to create the feeling we want. Therefore, starting from the color of the character material itself, we can extract the same color and improve the saturation. Combining the visual needs conducive to operation and promotion is "eye-catching". Finally, a set of colors with stronger contrast is obtained. 4. Deep characterization: The most important thing in the picture is definitely our slogan and characters, which is the object we should focus on. The rest of the subtitles and background atmosphere followed. There should be differences not only in typesetting, but also in visual experience. Only in this way can we have a sense of distance and realism and increase the sense of space. We hope that the picture will have a certain texture and increase its impact. Therefore, when we describe the background, we can choose some better scenes in comics or the background material of the title page as the base map. Overlay some texture materials, then polish the background layer by layer, and use layer attributes such as "Overlay", "Soft Light" and "Color Filter" to gradually improve the brightness, and finally achieve the desired effect. Tip 1: When the same light source reaches different objects, its visual performance is different. It's not what color the light source is, but what color it will be where it shines. Let's compare the actual effects of two colors, which can be said to be very intuitive! Tip 2: In order to blend the material into the background more perfectly, we can artificially add a circle of highlights/outlines to the material in the later stage. This makes the picture more harmonious, and also makes our role more three-dimensional! . Let's compare the feeling without contour light: there is indeed a lack of some flavor and details. Haha, in fact, many times, we can carry out secondary processing on our own materials to improve their quality and achieve better visual effects with the picture. 5. Advertising language design: The main copy is extracted on the basis of our sketch and combined with the trend of the overall picture. (Increase brush strokes and optimize brush strokes). There are mainly three layers for processing: color layer (text layer): mainly giving a basic color; Material layer: because these two words account for a large proportion, you can add some texture details to make the picture richer and more attractive; Thickness layer: let the light source behind form a circle of highlights on our text, which can highlight our text. Add some halo effect, and then paste the finished slogan to see the effect, it seems not bad. Some students may wonder why the font should be made thick here. Let's take a look at the effect first: we can see that the texture and weight are less, and the lightweight style is ok, but it is worse in our current picture, so we made a thick layer to emphasize the visual impact of light. After that, we mainly do some floating elements that conform to our picture atmosphere to enrich the picture. It would be great if you knew some hand-drawing skills! That's it. At this point, we have almost achieved the desired effect, and the feelings of "momentum" and "strength" are basically expressed in such "unpretentious" materials. Still quite satisfied, almost ready to contribute! Finally, observe the overall situation, look at it again, and check for missing and missing. I found that our picture seems a little dry, and the saturation of red and yellow is slightly higher. The overall feeling is not clear enough. Finally, make an adjustment. Reduce the saturation of some red and yellow, and add some purple in the dark (the dark of the master copy and the dark around the picture). It would be much better to increase the contrast between cold and warm. Tip 3: Stamp the whole layer-find something else in the filter-Gao Fancha keeps it, and the value is adjusted according to the picture. Isn't it amazing to get such a layer? Don't panic, change the attribute of this layer to linear light, the picture is much clearer and more textured! Finally, look at the process evolution diagram: summary 1) to sort out the demand content: by reading comic works, deeply understand the content and collect and sort out the information; 2) Refine keyword expansion: try a variety of feasible schemes and finally determine the design direction; 3)slogan design: it must conform to the tonality of the picture and the work, and achieve the effect of matching the picture; 4) control details: after completion, look back at the overall situation, check for leaks and fill gaps, and strive to be the best! How much effort, how much reward you can get!

Ui design: several popular types of banner processing. Banner is the most common work in brand making and content promotion after our contact with work, and its display plays a very important guiding role. The first vision of an interface is often attracted by excellent banner. These two days, I took the time to sort out and analyze some common types, and I want friends who have a headache in designing banner to take a closer look ~

Generally speaking, a good banner should first ensure the accuracy of information transmission, and then ensure the sense of harmony and atmosphere of the picture. It can be seen that a banner is not just composed of points or lines, but points, lines and surfaces are combined and balanced with each other, and finally a banner map with rich layout is formed.

The following materials are partly from students' works and partly from petals (thanks to the designers for sharing, please contact and delete if you see your own works ~)

Color block segmentation

The above Banner uses different proportions of color blocks to form the background of banner, plus text and copywriting, which is suitable for highlighting products, such as home, clothing, electronic products and so on. The interface is simple but not white, which can quickly extract valuable information. Pay attention to the overall color sense when choosing colors.

Geometric boundary

Simplicity often gives people a cold, clean and modern feeling. The shapes and elements used in the design are simple; The colors used are unified and integrated, and the colors are restrained. The texture is more delicate; Structurally, blank space, short/accurate/common use of core value and "temperament", border is the key point, geometry is the eternal decoration ~ ~

2.5D

The style of space geometry has a strong sense of space substitution by building a space body and using geometry to create an atmosphere. This kind of work can be studied a little. The key is the expression of creativity, which requires great efforts.

2.5D style is very popular in e-commerce design, which is novel and practical, can accommodate a lot of content, both dynamic and static, and can connect two screens and three screens well. Favored by some large-scale promotional activities, you can often see this style of first-screen posters.

Plane illustration

Concise but not simple, it removes the tedious decorative effect and shows the core expression of the theme. Use graphics or characters other than words to help banner bring a more intuitive feeling. Adding graphics or characters to text can make banner more energetic and feel. This type of banner is widely used in finance, education and tourism. Of course, if the illustration ability is ok, it is not a problem for all industries to use it.

Color superposition

More popular and changeable, the overall vision will be relatively young, and the elements used will be relatively more direct, clear and straightforward; The whole has a clean, clear and harmonious feeling. Highlight the text and decorate the atmosphere with simple graphics. You can use solid colors and gradients to superimpose background colors. Pay attention when choosing a big picture. The overall artistic conception depends on hue and light and shade. Of course, the simplest thing is to choose a clean and tidy basemap.

Colors are emotional, and different colors will bring people completely different feelings. Therefore, when making pictures, we need to match colors according to the theme, which is both reasonable and comfortable, and makes the banner picture harmonious as a whole. So we need to consider what kind of emotion we want to express, what kind of feeling we want users to feel when they watch it, and whether the expressed emotion is consistent with the theme. It is more purposeful to make color matching according to these points.

Gradual texture

Subtle gradients have returned to the design trend. Gradient background, even the superposition of gradients, can make your banner design stylized. With pictures, textures and words, gradient can give people a variety of experiences. Rich colors are its characteristics.

Different from UI design, in the design of e-commerce and advertising Banner, texture has always existed, even a very common element. Texture can improve the information content and overall texture of the whole banner. Of course, when using textures, don't let them take the lead.

When we make banners, if there are no special requirements, we actually have many directions to choose from. First, ask yourself what information you want to highlight. Is it a prominent commodity? Or highlight the text? Or highlight the overall atmosphere? Or emphasize the overall sense of coordination? Or emphasize the brand? This can be judged by understanding the user's psychology.

Ok, that's all for today. When did you have so many friends?

How to design a tall page or banner? A good page or poster usually has several similarities:

1, color matching

A good layout will have a basic color tone, and all other colors are extended from the basic color, and the number of colors should not exceed three.

2. Graphic layout

No matter which composition method is adopted, the priority should be clear, the content should be layered, and in addition, the contrast between the layout space or the two ends of the page should be avoided, otherwise it will be uncomfortable visually.

Step 3 unify the style

The overall style of layout must be unified. For example, if you design a poster with Chinese style, you should also choose the one with Chinese style in color selection and graphic selection. Don't mix and match with other styles casually, it will look inferior.

No matter how it is matched, in short, the past must be comfortable at first sight, focused and distinct. Basically, this layout or poster will not look very low.

Polaris talks about design, focusing on the spread and sharing of graphic design, visual merchandising and other contents. Welcome to follow me! If you agree with me, please share it for more people in need. Thank you.