Five simple tips for adding light and shade to your design

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

There is no time in real life where there is no light or shadow. Everything you see is shaped by the reflection of light and shadow. Visually, light and shadow help us to discern things, to perceive their materials, scales and perspectives.

So if we want to make our web page design more natural, dynamic and intuitive, it becomes very important to understand the lighting effect correctly. Here are five tips to help you make better use of light and light, and use them to make your design more sophisticated and stand out from a multitude of pages.

Quick analysis of the principle of illumination and shadow

In the figure below, the light source is from the left. Highlights are the strongest part of the light, and shadows lie farthest from the light source. The presence of light and shadow helps us to perceive a large amount of information about the surface material of the object.

But you might ask, what does this have to do with web design?

If you're going to create rich, textured interfaces and websites, light and light can help. As with the use of light in painting by many traditional artists, you can also use illumination to give your design depth and visual interest.

1. Using light source

It should be said that using light to understand the light source is the most important basic problem. The light position determines the position of the high light and shadow (though you can break these rules in web design). In Photoshop, you can use the "global illumination" in the layer style to make sure that all the light and lighting effects you create are in one place.

Controlling the location of the light can create a unique atmosphere for your page design (even if it is just a simple linear or radial gradient). The lighting effect can also lead to the transfer of the visual center.

Examples on the web

Campaign Monitor uses divergent light sources to create a sunrise effect.

ICEBRRG uses light to make the page dive into the water.

Mike Precious uses more than one light source, adds visual interest, and uses the lighting effects of desktop lamps everywhere.

Deaxon after the logo has a faint light source, so that the focus of the page on the logo.

2. Gradient

In the real world, nothing is always flat-toned. Light and light are attached to all things. Using gradients is a good way to create depth and authenticity.

The key to using gradients is not to go too far. When you draw a gradient in Photoshop, make a gradient overlay in the layer style, which ensures that your gradient is editable, and that the gradient can be scaled without compromising as the layer is scaled.

Examples on the web

Nclud's web site uses a weak but effective gradient to differentiate and organize content.

At first glance, CSS Ninjas seems to use a flat color. But in fact, each color area has a faint gradient, creating a fascinating material effect.

3. High Light

Highlights balance shadows and should be positioned near the edge of the light source. High light is largely overlooked because, if used well, you almost never feel it. However, not all scenarios are suitable for the existence of high light, a small high light can cause a large difference in the surface polishing of the object. The more "sharp", the more shiny the surface of the object.

To appreciate the high light, we need to enlarge these details. When you do a high light design, it's a good idea to magnify your design by more than one time, because you may not be able to figure out what you're doing when you show it in the original proportions.

Examples on the web

Both the Icon dock and the newism use translucent white to make a high light effect on the top edge of the page. Although very humble, but for the design provides a strong sense of luster.

Apple's website should be familiar. But you probably didn't notice the subtle high light at the bottom of the navigation menu. It is this high light that gives the menu a sense of protrusion.

4. Basic Shading

Like gradients, projections are widely used by web designers. When used correctly, the projection does add visual depth and texture to the design. The key is not to overdo it or abuse it.

The depth of the shadow depends on the light direction and intensity, and the distance between the object and the projection plane. The stronger the light, the sharper the shadow, the darker the light, the weaker the projection.

Examples on the web

There are so many examples of projections on the web.

LinkedIn adds a very subtle projection to the bottom of the sidebar, creating a sense of depth.

Google-is probably the most difficult page to design on the Internet-still uses subtle projections on the search page.

5. Advanced Shading

To give an object three-dimensional, you have a lot of options in addition to simple projections. Long shadows can greatly alter the spatial relationship of objects in a page.

In the following example, the same cola can, given different shades and dark parts, the entire space position will look completely differently.

Examples on the web

Emotions by Mike cleverly uses shadows (and lighting) to convert a flat page into a floor.

Superkix uses projections to keep sneakers afloat on the page. When you scale the page, the projection can move, just as the light source is moving.

Sofa in the pure white background, through the very good light and shade use, the creation of a floor.

About the author

Rob Morris is an Australian designer who works in Japan. As a freelance designer, his alias is Digitalmash, with clients all over the world. You can focus on his adventures on Twitter.