Application of layer overlay blending mode in Web page design

Source: Internet
Author: User

Many readers often ask me how the light effect of a button like the one above is done. Actually very simple, new layer, brush or oval paint white, Gaussian blur, and then change the layer blending mode to layer overlay on it. But in this article we don't discuss specific techniques, and take a look like the above button through the white overlay to create a button of the high light, we have to understand the layer overlay mode in the Web design application, and then through a variety of examples to understand the depth of the layer overlay blending mode of the basic effect, Apply it more freely to our design.

Case one icon design to increase the saturation of color and contrast of light and shade

This leads to the problem of discussing layer overlay blending mode. is because I personally according to the online tutorial in doing icon design exercises, I found that the designers consciously use the layer overlay to increase the contrast of light and shade, create a very good color effect, and if not understand the principle of superposition blending mode, It's hard to think of a way to finish the design. Here's what I'm going to do in practice, a vintage round golden seat:

In the process of creating the seat back of the chair, the designer first uses a gradient overlay of the angle to create the metal texture of the back of the chair.

Next, he copies the layer onto the top of the original layer, and change the layer blending mode to overlay, here is what we should pay attention to, because of this step, we can see that the chair back increased the overall color saturation, opened the highlights and shadow part of the brightness, so that the gold texture more prominent. Of course, you can easily adjust the gradient overlay directly to achieve the effect of the following diagram, skip the layer stacking this step, but in the initial adjustment of color is not satisfied with the situation, you should know through the layer overlay method can also be achieved.

In creating a lap around the seat of the high light effect, I also used the above mentioned white layer overlay method, where the use of a soft brush to achieve the design effect.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.