Light and shadow exist everywhere in real life. Everything you see is reflected by light and shadow. Visually, light and shadow help us identify things and recognize their material , scale and perspective .
Therefore, if we want to make our web design more natural, dynamic, real and intuitive, it is very important to correctly understand the light and shadow effects. Here are five tips to help you make better use of light and shadow. Using them well can make your design more refined and stand out from other pages.
A quick analysis of the principles of lighting and shadows
In the picture below, the light source comes from the left. Highlights are the most illuminated parts, and shadows are located farthest from the light source. The existence of light and shadow helps us perceive a large amount of information about the material of the surface of an object . But you may ask, what does this have to do with web design?
If you plan to create rich, textured interfaces and websites, light and shadow can help you. Just as many traditional artists use light in paintings, you can also use light to give your designs depth and visual interest.
1. Use light source
It should be said that when using lighting, knowing where the light source is is the most important basic issue. The position of the light source determines the placement of highlights and shadows (although in web design you can break these rules). In Photoshop, you can use "Global Illumination" in layer styles to ensure that the light sources of all light and shadow effects you create are in the same position.
Controlling the position of the light source can create a unique atmosphere for your page design (even a simple linear or radial gradient can achieve the effect). Light and shadow effects can also guide the shift of the visual center.
Campaign Monitor uses divergent light sources to create a sunrise effect.
Icebrrg uses lighting to make the page underwater.
Mike Precious used more than one light source to add visual interest, and used table lamp lighting throughout.
Deaxon has a faint light source behind the logo, which brings the focus of the page to the logo.
2. Gradient
In the real world, nothing is always flat. Light and shadow cling to everything. Using gradients is a great way to create depth and authenticity.
The key to using gradients is not to overdo it . When drawing gradients in Photoshop, please do gradient overlay in the layer style. This will ensure that your gradient is editable, and as the layer is scaled, the gradient can also be scaled losslessly.
nclud's website uses subtle but effective gradients to differentiate and organize content.
At first glance, CSS Ninjas seems to use flat colors. However, each color area actually has a faint gradient, creating a fascinating material effect.
3. Highlights
Highlights balance shadows and should be located on the edges of objects close to the light source . Highlights are mostly ignored because if used well, you barely notice it's there. However, not all situations are suitable for the existence of highlights. A subtle highlight can cause a huge difference in the surface polish of an object. The "sharper" the highlight, the stronger the glossiness of the object's surface.
To appreciate the highlights, we need to zoom in on these details. When doing high-gloss designs, it's a good idea to more than double the size of your design, because you may not be able to figure out what you're doing when it's displayed at its original scale.
Both Icon Dock and Newism use translucent white on the upper edge of the page to create a highlight effect. Although very inconspicuous, it provides a strong luster to the design.
Everyone should be familiar with Apple's website. But you probably didn’t notice the subtle highlight at the bottom of the navigation menu. It is this highlight that gives the menu a prominent feel.
4. Basic shadows
Like gradients, drop shadows are also widely used by web designers. When used correctly, drop shadows can really add visual depth and texture to a design. The key is not to overdo it or abuse it.
Shadow depth depends on the direction and intensity of the light, as well as the distance of the object from the projection surface. The stronger the light, the sharper and darker the shadow; the weaker the light, the weaker the shadow.
There are too many examples of projection on the Internet.
LinkedIn adds an extremely subtle drop shadow at the bottom of the sidebar to create a sense of depth.
Google—perhaps the most difficult page to design on the Internet—still uses a subtle drop shadow on its search page.
5. Advanced Shadows
To give an object a three-dimensional feel, you have many options besides simple projection. Long shadows can dramatically change the spatial relationships of objects on the page.
In the example below, after the same Coke can is given different shadows and dark parts, the entire spatial position appears completely different .
Emotions by Mike uses shadows (and lighting) cleverly to literally transform a flat page into a floor.
Superkix uses drop shadows to make the sneakers float above the page. When you zoom the page, the shadow can also move, just like the light source is also shifting. Sofa creates a floor on a pure white background through excellent use of light and shadow. More resources The following content is in English:
About the authorRob Morris is an Australian designer working in Japan. As a freelance designer, he goes by Digitalmash and has clients all over the world. You can follow his adventures on Twitter. |