让你的网页闪闪发“光”

everybody! 我是永灿的一名设计师。半年前我加入到这个团队，几个月后当我融入到这个团队的时候，我发现自己进步了。工作状态和设计水平较之以前有了很大改善。进步的过程是痛苦的但是结果是另人愉悦的。
之前参加过一次设计师培训至今仍然印象深刻。那次培训的主题是：如何在你的网页中正确运用光影效果。培训之后小做尝试后一发不可收拾，屡试不爽。经过长时间的积累经验，今天就跟大家一起分享一下自己的收获。
光和影在我们的日常声活中无处不在。我们看到的每一样东西都是通过光影的反射形成它的形态。所以如果能很好的把光和影运用到网页设计中就会使你的网页更加自然，有动感而且真实直观，还能让你的设计更加精致，从众多的页面中脱影而出。下面是我找的一张图片，跟大家剖析一下光和影的原理（虽然大家都知道随便看一看吧）。

一．怎样使用光源
光的位置决定了高光和阴影的位置（不过我们做网页的时候可以打破这个规则）。在Photoshop中，我们可以利用图层样式中的“全局光照”保证创造的所有光影效果的光源都在一个位置。
控制好光源位置能够为你的页面设计创造独特气氛（即使仅仅是一个简单的线性或径向渐变也能达到效果）。光影效果还能引导视觉中心的转移。
下面的图片是我从搜集的网页素材中找出来的，设计师利用几条辐射的光晕，使整个画面增加了空间感。

下面的作品设计是运用直光照射，使整个网站的头部看起来更加生动给人一种潜入水下的感觉。所以不同的光运用不同的表现方式和不同的颜色搭配就有不同的视觉效果。这就是它的神奇之处。

当然我们不止可以使用一处光源，还可以使用多处，一般用于台灯的光照效果，如下图：

 
二．渐变的应用
利用渐变是创造深度和真实性的好方法。但是做渐变有一个要害就是不要做的太过，太过的话就会显得不自然了。

渐变在网页中的应用一般用在导航或者色块当中

三．高光的应用
高光一般应用在细节部分。例如网页的LOGO和一些按钮上面，这样可以提高网页的质量更能使应用到的部分显得更加的精致，同样高光的应用跟渐变一样不能太过否则就会适得其反。

四. 投影
投影是被设计师们广泛应用的一个效果,当我们正确使用的时候能为设计稿增加视觉的深度和质感,同样跟渐变高光一样,不能做的太过。这里就不再举例了。

看看，连GOOGLE都用了投影，你还在等什么?
综上所述，总结一下：虽然光和影都是很平常的事物，结合光影原理和设计软件要想把他们用好不是一件简单事情，需要长时间的积累经验。说实话到现在我也没做出设计主管那样的水平，所以举例用的全都是从网络上搜集下来的图片。继续努力有朝一日也……

最后找了一个集光、影、高光、渐变的作品于大家分享一下。