Website Visual Design: Web page color of the natural range of children

Intermediary trading http://www.aliyun.com/zixun/aggregation/6858.html"> SEO diagnostic Taobao customer hosting technology hall

This article does not bite the words of the place, just a skill sharing, is very simple, easy to cry.

The visual aspects of the web page are mainly composed of forms (or layouts), colors, pictures and text messages. Designers are usually more concerned with the formal aspects because the visual impact, design differences or innovations mostly depend on the form, while the colors Mainly affect the overall perception, design quality and audience mood, many times we designed a good form but failed to make the proper quality of this manuscript, will not be too pity?

Forms need to think and create, picture material needs to learn processing, text need to sort out the layout, but the page color is not necessarily a natural color sense, rich theory and many years of experience precipitation can be used freely?

of course not!

About page color

Page color matching articles on the network a lot, and even some flooding, a little concerned students should know the "color wheel", "color card" and other auxiliary color matching tools, but more from the print medium on the color system extension Out, not entirely suitable for the web, and even cause a lot of limitations, such as you will be more true through the color wheel to choose web color? Another example through the color combinations provided below, you are free to deal with one after another type of phase If the web design needs?

Due to the different CMYK and RGB color modes, the number of colors on the web pages should be much larger, and the selection should be more free. However, the color design often encounters major problems such as dirty design, gray hair, and fancy design, which has to be solved .

Web case analysis

"Color pages should not be more than three."

Truth, this is true, but more from the hue (red orange yellow green purple and so on different colors) on.

Hue obvious differences, the main color selection is easier to handle, there are common contrasting colors, near color, warm and cold colors complement each other, you can simply set, or directly from the successful works from the primary and secondary color ratio can be, such as the common Vermilion dotted dark blue, bright yellow dotted dark green and so on.

But often, the design needs we face have more problems with color distribution:

(Because I am engaged in the visual design of the game webpage, so the case are illustrated by the game page, other webpage types can be extended or only for reference)

As shown above, according to the amount of information on the webpage, there will be more color area and text information level differentiation needs. Therefore, under the principle of "no more than three web colors", only the same color Department of color to improve the design, that is, in the "saturation" and "lightness" on an issue.

This is the "natural" color matching technique that this article needs to share in order to solve this problem.

Jiao soft color technology to share (here is the body, above all nonsense)

This method is very simple and does not need to know the trigonometric functions, the four arithmetic, without understanding the color index and histogram, and even without understanding the tone curve and brightness ... Even you can have no perception of color.

★ Only need to understand three key words: overlay, soft light and transparency (fill).

If these three keywords are not clear, then remember where they are (below):

Note: Transparency is slightly different from padding, padding does not affect the effect of "blending options", and transparency is applied to the entire layer.

By the way, take a few minutes to understand the principle of this color matching technique:

That is, with the perfect white (#ffffff) and pure black (# 000000) colors, the best matching color is obtained on any one of the colors by blending modes of "overlay" and "soft light" (the effects are similar to adjusting the saturation and the lightness) By adjusting the transparency to select the most suitable color).

(In the example above, the different transparency of the black-and-white patches in the stack / soft mode (taking 10% to 100% integer values ​​as an example) can be used to obtain the more obvious 40 colors. By this technique, each The colors are easy to get endless "natural color", and is "0 mistakes!")

★ This color matching method does not work for pure black and pure white because the overlay and soft modes have no adjustment to the highest part of the image and the most shaded part.

Design combat demo:

Do not be as complicated as the picture above looks?

No, just understand the above method, you can forget the icon, free to play in your design work!

Simple three steps:

① a black or white, or black and white gradient (which can be point, line, surface ... even fonts)

② mixed mode selection overlay or soft light

③ adjust the transparency (1% -100% casual, peace of mind is the direct input of an integer value, such as: light sense pages can choose 20% -40%, heavy sense of feeling can type 60% or more)

As shown below:

(Whichever main color you use, with black and white color overlay or soft light, you can easily get the perfect match for the entire color system)

This does not apply only to the color gamut or the extraction of several secondary colors, as shown below: font color, detail lines, button gradient, corner highlights, stroked shadows ... can be swayed with black and white! p # subtitle # e #

Method Extension (Details)

If this method is applied to a button ...

Five layers of pixel-level detail are freely framed by "shadows, glows, strokes (not overlapping), internal glow, and glow" in the mix options (of course, one to three layers are usually depicted in actual use Can be).

And regardless of shape, color changes, these details are go hand in hand, the color changes with change ~ Can save a lot of re-tune the details or blindly choose the color of the time!

Details, quality and efficiency, one stone three birds, both with it!

(I recently saw the design circle discussing the issue of "web carving is not desirable." If we make the details a habit and make the sense of aesthetics become intuition, carving is just an ordinary design act.)

Case history:

postscript:

Stacking soft color matching method: no trick wins trick ~ can not grasp the feeling to the sophisticated computer, scientifically carry out your design.

Shorter time, higher quality, you deserve ... ~

Another: the method is dead, people are living, with the level, curve, color balance, etc., so that your page color more freedom ......