Attention to the details of the use of the liner: do not use a strong gradient

Before very want to write such a very boring technical article, I this piece only in the technology also not be a code live, rely on is meticulous also has many innate esthetic ability, as well as indomitable patience and composure.

Can't say a lot of nonsense, below to see some of my relatively superficial summary

This is a set of button implementation, if the HTML has knowledge, should know the active and hover pseudo class, and in the Web page embodiment, they also played a great role, so involved in the present is the design is not just a button style so simple, Also consider the effects of acitve and hover, just like the artwork that is implemented below

In this view, of course, there is nothing, but do design, or in short, even if you are doing art, you should enlarge the small picture two or three times times to see, you will find some of the details you may ignore:

This is the line that I want to refer to now, this button mainly uses the lining line, or is around the circle, does not use the gradient mask.

The text actually also uses the layer effect to replace 1.1 points to depict the lining line, this technology previously in the station cool to see a designer summed up, this is the original link, I do not have more words to decorate.

I always ask you, why do you like to use Shadow, with the shadow feel added to the effect of the good? There is a shadow, then where is your light source, both with the same angle of the shadow, then how many light source? Does this shaded setting match the light source?

This is the designer to ask their own questions, designers to do the design of the draft is a reason, not arbitrary.

The following is a design drawing with a more detailed edge line.

Let's take a look at its original artwork:

Then look at the enlarged button next to the thin line, a superficial look is two two-color lines show the effect of engraved, carefully magnified only to find that four lines.

At the same time, the button is no longer a simple lap line, the liner uses a mask, so there is an excess, the upper and lower lining lines are obvious, but the middle lining is slowly masked by the mask, and the text uses a shadow, which conforms to the background of the dark green to reflect the white font above.

The middle made a relatively light gradient, very friendly to reflect the three-dimensional.

The edge of the page body is also lined, to find it carefully

Then below is the use of the upper lining line, with shadows instead of the three-dimensional button design

Use a gradient mask with the top and bottom two lines

Only use the bottom line, gradient to the above slowly reduce the effect of light

More complex use of lines to embody light sense

Why the lining is generated

This is the impact of art optics, learning to sketch, the beginning of the teacher will say, where the line to aggravate, where there is reflection, where there is shadow, in order to reflect the object in the 2D effect on the three-dimensional, we can only more skilled use of light to reflect. To find their own virtual out of the light to bring the high light, light, middle color, dark, projection, shading line. Again, why not let everyone use too strong gradient, whether it is color upward or brightness or saturation is not too strong, some special cases. Because such a strong excess does not bring a sense of reality, give a person a very uncomfortable feeling. I always adhere to design close to life, from life.

Article Source: Hydrangea land