Yang Yang-Xhm: In the process of color matching, many students tend to feel clueless and helpless when facing the color picker panel. And if direct imitation master match color, the final effect is often very different. Is there a scientific and effective color matching method, can let inspiration flow, and the effect is amazing? Today, share two skills that can be used directly after learning, with basic knowledge of color, convenient for beginners to learn.
First, the basic theory of color
- Hue: The appearance of colors. For example: red, yellow, blue, orange, green, purple.
- Saturation/Saturation: the vividness of colors. For example, color ~ black and white.
- Brightness/Brightness: Depth of colour. For example: light blue to dark blue, light red to dark red.
Review images
Two, basic skills of color picker
After understanding the three elements of color, we will understand the color picker. The color picker on the right of the figure above is a normal interface for us. It can be seen from the above that there are four color modes for the color picker, and the most commonly used one is HSB mode, which is also the hue/saturation/brightness mentioned before. Through this mode, you can not only accurately call out all the colors you need, but also through the corresponding data, to determine the corresponding relationship between colors.
Review images
1. Click the circular button on the right of H, S and B to switch the color mode. 2. Adjust the color state by sliding the rectangle parameter strip up and down. 3, through the corresponding data, rational judgment of the difference between the colors (saturation, brightness).
(PS: Students who have a weak sense of color can also directly determine the hue of the color through the hue bar of the hue mode.)
Some of you may ask, what is the big square color picker on the left for?
I usually only use the square panel for two things:
- Determine the general color direction.
- Look at the color of the approximate shade, pure gray state.
The basic content is almost these, next we use the above method to do a small exercise, deepen the understanding of the knowledge point, this kind of exercise, can exercise our color perception and judgment ability. You can practice it yourself. It’s fun.
Review images
Above explained the basis, the following is to talk about common skills:
Tip 1: Copy reality
Simply put, all the colors we can see today are extracted from nature, so the largest library of colors is actually our real life.
Principle 1: color has light, without light, the world is dark.
As mentioned above, light and color are integrated. If we want to create a very harmonious color match, we must learn the knowledge of light and shadow. In the previous article “Hand in hand to teach you to use PS to draw a clever 3D fairy ball with light and shadow”, I simply talked about the influence of light and shadow on color:
- Highlight: The color closest to the primary light source, slightly brighter than the natural color.
- Inherent color (bright gray) : The transition between the light and dark areas, closest to the color of the object itself.
- Dark part: The backlit part of an object, slightly darker than its natural color.
- Reflective: in the dark part, it is through the object and environmental light repeatedly refraction of the light, slightly brighter than the dark part of the color.
- Body surface ambient light: light generated by repeated refraction of object and ambient light on the surface of the object, brighter or darker than the inherent color.
- Projection: the shadow produced after the light source is blocked by the object. The color is gray and dark. It is affected by the ambient light and the inherent color.
Review images
In short, in general, the object in the picture of the highest color saturation is the inherent color, highlights, dark parts will become bright or dark on the basis of the inherent color, at the same time will become gray, so we do not blind point on the palette, it may be difficult to choose the right color.
Once you understand how light and shadow affect color, you can try copying the works below to deepen your understanding of the principle.
Students who need source files directly send me a private message [color matching practice source files], automatically reply to your address.
Review images
Principle two: everything has its inherent color characteristics.
For example, when we think of the sun, we think of red, we think of sea – blue, dusk – orange, lemon – yellow, grassland – green, so many things are characteristic of its unique elements. We only need these accord with the color that most people approbation is refined come out, try to apply, also can match a lot of match color that makes a person comfortable.
Review images
△ Screenshots of fan comments
This is a question from a fan, let’s analyze his work. left
Review images
1. The main tonality of the work conforms to the color tonality of the four periods of sunrise, morning, dusk and night in real life. 2. The complementary colors of the works are in contrast with the main colors. 3. The auxiliary color and the same frequency color of the work determine the ground highlight part of the picture and increase the communication level of color information. 4. The embellishment colors of the work determine the brightest and darkest colors of the picture in a small range, as well as the colors of the lighthouse in the middle layer. 5. Each color of the work conforms to the principle of the influence of light and shadow on color.
So like this kind of design color matching, you can first determine the main color, and then through the light and shadow relationship, the inherent characteristics of the color of things, to deduce the color of the picture, rather than randomly on the color picker. As for how to determine if the main color is appropriate, beginners can find a photo that meets your requirements and draw color from the photo. This makes it easy to get the right color.
(PS: In this set of works, the sky and other parts of the gradient used gradient, as for the pull gradient technique, I won’t go into details, here I recommend a series of articles, you can study)
- Part I: A Comprehensive and Systematic Self-study Guide to Gradients
- Part II: How to Use Gradient to Draw high-style Backgrounds + Spheres
- Part 2: Gradient Learning Guide for Non-professional Designers
At this point, [copy reality] has all been said, I hope that when learning the color of other people’s works in the future, we should consider the level of communication of color information, its structure and shape, and the position and scope that color highlights in the picture.
Most of the time, we think this set of color matching is very beautiful in his works, but when we apply it to our own works, the taste changes. In fact, people directly use it without thinking clearly about their color principle.
Tip 2: Look at demand
Look at the demand, that is, the teacher Liang Jinghong said “color function color method”, this is one of my most commonly used color matching ideas, color matching ideas and the above [copy reality] ideas are different, it is from the point of view of design needs to choose the color.
“Color function color method” three laws:
Balance law: simply speaking, is to use the contrast principle, such as light and shadow contrast, virtual contrast, pure gray contrast, depth contrast, cold and warm contrast. Finally, the balance of the picture is achieved by using the principle of contrast.
Review images
△ Law of balance – Case from the Internet
The Law of Focus: This is about using some basic color matching principles to focus and shift the user’s eye as they browse the information. Commonly used focusing techniques are: complementary color color focus, cold and warm color color focus, dark light color focus, color and color focus, color area size of color focus and so on.
Review images
△ Law of focus – Case from the Internet
Same frequency rule: this refers to the use of similar colors, similar tones, color echo, rhythm, rhythm, order and other ways to make color management, organizing the information of the picture, and finally accurately express the hierarchical relationship of the information transmission of the picture, as well as the relationship between the color communities.
Review images
△ Same frequency rule – Case from the Internet
About [color function color method] because the content involves more knowledge, here I can only briefly summarize, if you are interested in you can go to understand. After I finish reading the teacher’s book, I will take time to write a reading note, and then carefully sort out the knowledge points to share with you.
I’m almost done with the basic color matching techniques. The rest requires us to strengthen the understanding and control of color, each color has its unique character, mood and use, there is no skill at all, we need to spend time to accumulate. However, I have seen a series of articles on the Internet, he has carefully analyzed every color, it is very worth your time to read.
This content is over here, want to know more quality tutorial, welcome to pay attention to the excellent basic training camp, and I
Review images
[Yushi.com original article submission email: [email protected]]
= = = = = = = = = = = = = = = = nets about optimal set = = = = = = = = = = = = = = = = “optimal set uisdc.com” is the most popular web designers learning platform, dedicated to share web pages design, wireless terminal design and PS tutorials. 100 Books designers Need to Read: The most comprehensive Guide to Designer books ever: hao.uisdc.com/book/. Design micro blog: with 1.5 million fans of the popular micro blog @excellent web design, welcome to pay attention to get web design resources, download the top design materials. Design navigation: the world’s top design website recommended, designers must navigation: hao.uisdc.com