现实生活中无时无处不存在着光照和阴影。你看到的每样东西都是通过光影反射形成它的形象。视觉上，光影帮助我们辨别事物，认知他们的材质、尺度和透视。

所以如果要让我们的网页设计更加自然、有动感且真实直观，正确理解光影效果就变得非常重要。以下是助你更好利用光影的五个技巧，好好运用它们，能让你的设计更加精致，从众多的页面中脱颖而出。

光照与阴影的原理快速剖析

下图中，光源来自左方。高光是光照最强的部分，阴影位于距离光源最远的地方。光影的存在帮助我们感知有关物体表面材质的大量信息。

不过你可能要问，这和网页设计有什么关系？

如果你打算创造丰富、有质感的界面和网站，光影能助你一臂之力。如同许多传统艺术家们在绘画上对光照的运用，你也可以利用光照给你的设计以深度和视觉趣味。

1. 使用光源

应该说利用光照时了解光源在那里是最为重要的基本问题。光源位置决定了高光和阴影的位置（不过在网页设计中你能打破这些规则）。在Photoshop中，你可以利用图层样式中的“全局光照”保证你创造的所有光影效果的光源都在一个位置。

控制好光源位置能够为你的页面设计创造独特气氛（即使仅仅是一个简单的线性或径向渐变也能达到效果）。光影效果还能引导视觉中心的转移。

网络上的例子

Campaign Monitor 使用发散光源，创造出一种日出效果。

Icebrrg 利用光照使页面潜入水下。

Mike Precious 使用了不止一个光源，增加了视觉趣味，而且各处都使用的是桌面台灯的光照效果。

Deaxon 在logo后有一个微弱的光源，使页面的焦点集中在了logo上。

2. 渐变

现实世界中，没有什么事物总是平坦色调。光影附着在一切事物上。利用渐变是创造深度和真实性的好方法。

运用渐变的关键是不要做得太过了。在Photoshop里绘制渐变时，请在图层样式里做渐变叠加，这样能保证你的渐变的可编辑性，而且随着图层的缩放，渐变也能跟着无损地缩放。

网络上的例子

nclud’的网站使用微弱但有效的渐变，用以区分和组织内容。

一眼看去， CSS Ninjas 似乎使用的是平直颜色。不过其实每个色彩区域都有微弱的渐变，创造出迷人的材质效果。

3. 高光

高光能平衡阴影，应该位于物体靠近光源的边缘。高光大部分时候都被忽视了，因为如果用得好的话，你几乎感觉不到它的存在。不过并不是所有情景都适合高光的存在，一个细微的高光就能造成物体表面抛光度的巨大不同。高光越“尖锐”，物体表面的光泽感就越强。

要鉴赏高光，我们需要放大这些细节。做高光设计的时候，把你的设计稿放大一倍以上是个好办法，因为按原始比例显示的时候，你可能都没法弄清自己在捣鼓些什么。

网络上的例子

Icon Dock和Newism 都在页面上边缘使用了半透明的白色制造高光效果。虽然很不起眼，但是却为设计提供了强烈的光泽感。

苹果公司的网站 大家应该都很熟悉。不过你大概没有注意到导航菜单底部的细微高光。正是这一高光，给与菜单以凸出感。

4. 基本阴影

同渐变一样，投影也被网页设计师们广泛运用。当正确使用时，投影的确能为设计增加视觉深度和质感。关键还是不要做的过度或者滥用。

阴影深度取决于光照方向和强度，以及物体和投影面的距离。光照越强，阴影越锐利越暗；光照越弱，投影也就越弱。

网络上的例子

网络上关于投影的例子实在太多了。

LinkedIn在边栏底部添加了极为细微的投影，创造出深度感。

Google — 可能是互联网上最难设计的页面了 — 仍然在搜索页上使用了细微的投影。

5. 高级阴影

要赋予物体立体感，除了简单的投影，你还有很多选择。长阴影能极大地改变页面中物体的空间关系。

下面的例子中，同样的可乐罐，被赋予不同的阴影和暗部之后，整个空间位置就显得完全不一样了。

网络上的例子

Emotions by Mike 聪明地运用了阴影（以及光照），硬是把平面页面转换成了一个地板。

Superkix 使用投影，让运动鞋漂浮于页面之上。当你缩放页面时，投影还能移动，就像光源也在转移一样。

Sofa 在纯白背景上，通过极佳的光影运用，生生造出了一个地板。

更多资源

以下内容为英文：

• Photoshop Cafe
  在Photoshop中创建光影的教程
• Advanced Shadow Techniques
  在Photoshop处理阴影
• PSDtop Blog
  理解投影
• Peachpit
  在Photoshop处理光影
• Aviva
  创建真实阴影
• PSDtuts
  用光影赋予文字以生命
• Build Internet
  光照与阴影：Photoshop中的高级渐变
• PSDtuts
  用简便制作光影效果… 以及一个咖啡杯！

另外推荐：35个极佳运用光影效果的网站（英文）

关于作者

Rob Morris是在日本工作的澳大利亚设计师。作为自由设计师，他的别名是 Digitalmash，客户遍及世界各地。你可以在 Twitter上关注他的冒险。

关于译者及版权

译者笨活儿，以学英语为目的为大家翻译优秀的外国教程。你可以订阅我博客，或者加我饭否。

本文遵循CC协议 [署名-非商业性使用-相同方式共享] 原则。转载请注明原文以及译文的原始出处。

(al)

©2009 笨活儿 | 永久链接 | 已经有8条评论了 | 推荐到豆瓣

若需转载，务请保留出处。

综述

在Photoshop里可以仅仅使用滤镜、蒙版和渐变轻松地创造令人惊叹的真实材质效果，本教程就是这真实的一例。

所用文件：

第一步

新建文档，我使用的大小是1000×609。使用暗绿到中绿的径向渐变，填充背景图层。

第二步

给黑板添加噪点：“滤镜->杂色->添加杂色”。设置数量为1.6%。 分布方式为平均分布，并勾选单色。

第三步

接下来我们画黑板的木条边框。只需几步即可完成，我选择使用纤维滤镜来创建它。由于无法设置纤维方向，所以我为木框的各个部分分别创建了一个文档，再把他们放到黑板图片中。

首先创建顶部横条。新建文档，高度与黑板的宽度相同，宽度设置成你需要的木条宽度。在本教程中，我的黑板大小是1000×609，于是我为顶部横条创建的文档尺寸是45×1000。设置前景色为浅灰，背景色为深灰，然后点击“滤镜->渲染->纤维”（Filter->Render->Fiber） 。 差异设为3，强度设为21左右，使用“随机化”按钮找到合适的纤维形状。然后将图像旋转90度——“图像->旋转画布->90度(顺时针)/90度(逆时针)”（Image->Image Rotation->90 Degrees CW）

第四步

下面给木条添加颜色，“图像->调整->色相/饱和度”（Image->Adjustments->Hue/Saturation），快捷键“ctr+u”。选中“着色”，参数分别设置为色相29，饱和度33，明亮度-20。当然，你可以根据你要制作的效果灵活调整参数。

第五步

为木条也添加一些杂色，与第二步同理，这次设置数量为 1%。复制木条到黑板文件，移到顶部它应该在的位置。之后效果如下：

第六步

画出木框的其他三个边。这些木条可以通过复制和翻转/旋转快速完成。当然，你也可以从头开始画，让这些木条显得更有差异。

第七步

选中所有木条图层，合并图层（Ctr+E）。双击这个合并过后的图层，设置图层样式，添加阴影和内发光，参数如下：

阴影：角度-39，距离11，大小29；

内发光：颜色为白色，不透明度12

其余参数不变。

第八步

木条框画好了，接下来继续研究黑板上的东西。我们需要给它添加一些做旧效果，从你的笔刷库里找出适当的Grunge效果笔刷吧。我这里使用的是 Grunge Corner Brush Pack 。在木框图层和黑板面图层之间新建一个图层，拾取一个非常暗的绿色，然后用笔刷刷出grunge的效果…… 然后将这一图层透明度调到40%左右。

译注：grunge是90年代流行的脏乱邋遢+摇滚的时尚生活方式，后来被用于平面设计中，一度很流行……

第九步

下面为黑板添加更多颜色变化。在grunge图层之上新建一个图层，设置前景色为黑色，背景色为白色（快捷键“D”），然后点击“滤镜->渲染->云彩”。使用动感模糊（滤镜->模糊->动感模糊）把这些云彩模糊掉，角度18，距离100。最后，更改图层混合样式为“正片叠底”（multiply），不透明度30%左右。

第十步

接下来制造一些黑板刷刷过的效果。在云彩图层之上新建一个图层，找到“平头湿水彩笔”（photoshop自带），画笔颜色为黑色，不透明度30%左右，然后像擦黑板一样在黑板上刷。刷的时候可以有一些中途停顿，然后某些地方可以多刷几次，让其颜色更重一些。最后，降低图层不透明度至10%左右。

第十一步

新建一个图层，重复第十步，不过这次把图层不透明度降至5%左右，之后应该达到如下效果：

第十二步

选一个好看的手写字体，我这里使用的是 Christopher Hand。在黑板上写几个大字先，这可以被当做是以前在黑板上写的，没有被完成擦去的字迹。把透明度调低至2%。

第十三步

再写一些你想写的字，这次把透明度设为70%。再次找到grunge画笔，我这里使用的Subtle Grunge Textures and Effects 来自Function 。新建蒙版，用黑色的grunge笔刷在蒙版上涂画，这可以制造粉笔的质感，注意不要画太过了。

第十四步

我觉得这黑板有点深度和透视效果会更好，所以下面我们添加两个额外的东西。首先，在下边框上加一条放黑板刷的横条。使用上面的制作木条的方法，记得加上阴影效果。

第十五步

接下来在画一个黑板刷。使用圆角矩形工具画一个圆角矩形（快捷键U），圆角半径设为1像素。转换该图层为智能对象。这样做是为了让以后应用滤镜的时候更加灵活，便于更改。首先，添加光影效果，重置前背景色为黑和白，点击“滤镜->渲染->分层云彩”。

第十六步

黑板刷的材质和光照效果还需要在深化才行。我这里采用了滤镜。首先点击“滤镜->画笔描边->喷色描边”，然后点击“滤镜->杂色->添加杂色”。建议参数如下所示。由于我们使用了智能对象，所以如果参数不够好，很容易就能再进行调整。

喷色描边：长度20，半径25，方向为垂直

杂色：数量1.96%，平均分布，单色

第十七步

现在只是画好了黑板刷的下面部分，接下来画上面部分。再次使用圆角矩形工具，画一个深灰色的矩形。如上面一样，转换为智能对象，然后添加一些杂色即可。

第十八步

为了保持光影效果的一致性，给黑板刷的两个部分也加一些投影。现在你做出的效果应该如下图：

第十九步

最后，我们再为整个设计加上两只粉笔，让场景更为真实。粉笔的画法和黑板刷的画法大同小异。最终结果如下：

总结

仅仅利用一些滤镜、画笔和渐变就能创造出真实的材质效果，如此简单，是不是很激动人心呢？欢迎在下面留言告诉我你的想法。也许你还发现了可以在某些地方添加细节，让整个设计变得更加真实？

© 本文编译至MyInkBlog。版权归原作者所有。如有图像无法显示，请到原文作者blog查看。

©2009 笨活儿 | 永久链接 | 板凳还在 | 推荐到豆瓣