http://www.woaicss.com/article/photoshop/ps00.htm
Everywhere there is light and shadows in real life no. You see everything is forming its image by reflecting light. Visually, light and shadow to help us identify things, awareness of their materials, scale and perspective.
So if you want our web design is more natural, intuitive dynamic and true, correct understanding of light and shadow effects become very important. The following are five tips to help you make better use of light and shadow, make good use of them, can make your design more sophisticated, stand out from the page.
Principle of light and shadow rapid analysis
in the figure, light from the left. Highlights are the strongest part of the light, the light source is located farthest from the shadow areas. The presence of light and shadow help us a lot about the perception of the surface material of the object. 
But you might want to ask, and web design have anything to do?
If you intend to create a rich, textured interface and site lighting can help you. Like many traditional artists in painting on the use of lighting, you can also use light to your design depth and visual interest.
1. The light source
should be said to know when using the illumination light source where the most important basic issues. The light source position determines the position of highlights and shadows (though in web design you can break the rules). In Photoshop, you can use the layer style in the "global illumination" to ensure that all sources of light and shadow effects you create in one place.
Control the position of the light source to create a unique atmosphere for your page design (even if only a simple linear or radial gradient can achieve the desired effect). Lighting effects but also to guide the transfer of the visual center.
Examples of the network
Campaign Monitor by using divergent light, creating a sunrise effect. 
Icebrrg use of light make the page submerged. 
Mike Precious use more than one source, adding visual interest, but everywhere are using a desktop lamp lighting effects. 
Deaxon After the logo has a weak light source, the focal point is focused on the page logo. 
2. Gradient
real world, things are always little flat tone. Light attached to everything. Use gradient is a good way to create depth and authenticity.
The key is do not go using gradient too far. When drawing gradients in Photoshop, please do in the Gradient Overlay layer style inside, so you can guarantee editable gradients, and with the scaling layers, gradients can follow lossless zoom. 
Examples of the network
nclud 'sites using a weak but effective gradient, to distinguish and organize the content. 
At first glance, CSS Ninjas seems to be using a flat color. But in fact, each region has a faint color gradient, creating a fascinating material effects. 
3. Highlight
high energy balance of the shadow, the object should be located near the edge of the light source. Most high light when they are ignored, because if used judiciously, you hardly feel it's there. However, not all situations are suitable for the presence of high light, a subtle light can cause huge high degree of different polishing surfaces. Highlight more "sharp", the stronger the glossy surface of the object.
To appreciate high light, we need to enlarge these details. High-gloss design do when your design is issued more than doubled amplification is a good idea, because by the time display of original proportions, you may never find out what the law in his own fiddle.
Examples of the network
Icon Dock and Newism both edges using a translucent white page in the manufacture of high light effect. Although very much, but it is designed to provide a strong luster. 
Apple's Web site it should be very familiar with. But you probably did not notice the subtle highlights the bottom of the navigation menu. It is this high-gloss, to give a sense of protrusion menu.
4. Basic shadow
with a gradient like projection is also widely used web designers. When properly used, the projection can indeed increase the visual depth and texture design. The key is not to over-do or abuse.
Shadow depth depending on the light intensity and direction, and the distance of the object and the projection surface. The light intensity, the sharper the darker shadows; weaker light, the weaker the projection. 
Examples of the network
on the network example of projection is too much.
LinkedIn at the bottom of the sidebar to add a very subtle projection to create a sense of depth. 
Google - may be the most difficult to design a page on the Internet - and still use a slight projection on the search page. 
5. Advanced shadows
To give a sense of three-dimensional objects, in addition to simple projection, you have many options. Long shadows can dramatically change the spatial relationships of objects in the page.
The following example, the same Coke, after being given different shades and shadows, the position of the entire space becomes completely different. 
Examples on the network
Emotions by Mike shrewd use of shadows (and light), just converted to a floor plane of the page. 
Superkix using the projector, make sneakers to float on the page. When you zoom a page, the projection can move, just as the light source is also moving the same. 
Sofa on a white background, through the excellent use of light and shadow, life and create a floor. 
More resources
following in English:
Photoshop Cafe
create a shadow in Photoshop tutorials
Advanced Shadow Techniques
in Photoshop processing shadow
PSDtop Blog
understood projection
Peachpit
in Photoshop treatment of light and shadow
Aviva
create realistic shadows
PSDtuts
given text to life with light and shadow
Build Internet
Light and shadow: Advanced Photoshop gradient of
PSDtuts
made with simple lighting effects ... and a coffee mug!
Also recommended set of instances: 35 excellent use of light and shadow effect of the site (in English)
About the Author
Australian designer Rob Morris is working in Japan. As a freelance designer, his alias is Digitalmash , customers around the world. You can follow his adventures on Twitter.
Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/01/29/2880800.html