Focus on the details of the liner usage

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 formerly in the station cool to see a designer to summarize, this is the original link, I do not have much to say the text to decorate: http://www.zcool.com.cn/article/ZMTQ2NDA=.html

I always ask everybody, why like to use Shadow, with shadow feel added effect is good-looking? There is a shadow, then where is your light source, both add angle of the same shadow, then how many light source? Does the shading setting match the light source?

This is the designer to ask their own questions, designers to do the design manuscript is justified, not arbitrary.

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

Let's look at its original image:

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.

Source Address: http://lazymaru.co.cc/?p=98