真人街机捕鱼

Your Position: Home > News > Taoyuan Website

Pure dry goods! Application of poster vision in web design

Date: 2017-2-13 9:23:55 Popularity: label:
share to:
When you browse the web, you can often see excellent poster designs. These designs can often catch the viewer's attention through its excellent color processing, scene creation, atmosphere rendering, typographic layout, word processing, and clever creativity. So can we absorb these excellent poster visions to help us design things in other fields? Design is interlinked, and the answer is naturally yes. So today we will share with you some excellent poster design applications in web pages.

We mainly explain to you through three aspects: level, color and creativity.

01

level

The layered sense of the picture, to put it plainly, is that the content of the picture is divided into primary and secondary, there is a sense of space and distance, there is a sense of reality, and the light and shadow are clear. This kind of picture looks real, rich, and through some special processing The technique can further open up the layers of different elements in the picture, making the subject more prominent. (Because the explanation in this section does not involve color knowledge, in order to make it easier for everyone to observe, the poster has been decolorized.)

-Near-far relationship-



In the above two pictures, the direction from near to far is shown in the direction of the arrow, the picture has a strong sense of depth, the far and near scene levels are obvious, and the picture is very strong. Used in web design as follows:









Through the above example, we can see that the clear and distant levels of the picture, combined with the content on the web page, can make the page look more breathable. While browsing the content, it can also convey a strong sense of substitution through the scene.

-False and Real Relationship-



The top left picture changes from real to imaginary in the direction shown by the arrow, which meets the principles of near real and far virtual under normal circumstances, and has a strong sense of hierarchy; in the right picture above, everyone can understand the real and distant virtual scenes. , But why are the people below us closest to us also false? It may be easier to understand the picture below.



This poster is actually closer to the real-life shooting in our lives, and it is the kind of beautiful subject with obvious focus, no doubt with a bamboo pole in the picture. At this time, although the foreground flowers and plants are closer to us, but because they deviate from our focus (our vision does not go directly to these flowers and plants), so we also blur the foreground flowers and plants at this time. Sometimes the blur is more noticeable than in a distant scene. This needs to be understood. Then let's look at the application of the virtual relationship between the poster and the web page.







Through the above example, we can see that by grasping the level of reality and reality in the picture and combining the content of the web page, the page can look closer to the real scene, and the visual experience is more realistic.

-Atmosphere Relationship-





Figure 1 Use smoke to pull away the layers between the heroine and the distant robot. The smoke weakens the distant robot and highlights the heroine at the same time, so that the two have a clear hierarchical relationship. The figure itself is darker in color and has a background. It is also dark. At this time, if you place the character directly, the character will be integrated into the background. Here, the artificial elements such as light effects and fragments are used to highlight the outline of the character. The backlight effect separates the character from the darkness. Figure 3 is the same, but it uses light and shadow and smoke to distinguish the hierarchical relationship between many characters. Then the atmosphere relationship is applied to web design as follows:







Through the above example, we can see that the reasonable use of rendering of some atmospheric elements, such as light, smoke, clouds and other materials, can not only play a role in accentuating the atmosphere of the page, but also highlight the subject, while weakening other elements outside the subject, successfully Open up the hierarchical relationship between the subject and other non-subject elements.

02

tone

The hue of the picture is an effective way to convey the emotions to be expressed in the picture. Different colors can bring people different experiences. It is precisely because of different colors that our designs are richer.

-Tone uniform-



In the above two pictures, the uniform warm tone on the left shows the enthusiasm of the picture, while the uniform cool tone on the right shows the coldness of the picture. When processing, keep in mind that all elements in the screen must be processed in a uniform environment color, which is used in web design as follows:







In the above several examples, in order to further integrate into the large environment, the designers have performed secondary processing on the original material's hue, and the style of the entire web page remains uniform in hue.

-Cold and warm contrast-





In the three pictures above, the form of cold and warm contrast is used in the tone processing to make the details of the picture richer. At the same time, the contrast of warm and cold can express a strong resistance. Used in web design as follows:







Through the above example, it can be seen that the contrast between warm and cold can be used to express the themes of "confrontation" and "combat" in the process of creating the scene of the webpage. In addition, some warm tones are appropriately added to the entire cold scene. , Can also play a role in highlighting the subject.

03

Creative

Rich poster ideas can not only catch the eye, but also express the theme subtly. From the overall form to the detailed processing of text or material, you can learn and apply it to web design.

-Formal innovation-



The picture on the left shows the mystery of the picture through the characters hiding in a cracked corner of the wall, while the picture on the right reflects some characters or scenes related to the male lead through the broken glass, which is used in web design as follows:





-Material processing-



The picture on the left shows a silhouette-like treatment of the compound heroes in the middle, while the picture on the right has a granular treatment of the edges of the characters, which is applied to the web design as follows:





-Text accent-



The picture on the left handles the calligraphy “Martial Art” as the main visual of the screen, while the picture on the right directly puts Deadpool sitting on the movie name similar to the 3d processing, which is well integrated into the picture. Used in web design as follows:





04

Examples





Here, by reprocessing the original painting, the contrast of the picture is strengthened, and the contrast between warm and cold is further strengthened. People at different distances are further distinguished at different levels by blurring, color matching, adding smoke and fire light, and adding Rain and artillery elements. Some content elements of the page are processed before and after relative to the characters, which further strengthens the overall level of the page.

summary

Posters can bring a lot of inspiration to our design. In fact, not only posters, but the design itself is interlinked, so many other areas of design can also let us learn. The explanation in this article focuses more on games, and due to my limited level, the knowledge involved in the explanation is not comprehensive, and I hope you can understand it. Finally, I give you a sentence: Design comes from life, we should learn to draw inspiration from life.
0
0
0
0
0
0
0
0
Name
Verification Code
Can't see clearly, change another Already Comment information, click to view comments
Comments from users
Next: No information