方寸之间的光影世界（二）——图层样式的非常规用法（PS教程）【百科全说】

在上一篇分享中很多酷友希望我能分享一下字体效果是怎么做的，在这里也先感谢各位酷友的支持，下面就和各位酷友继续分享一下文字效果的做法。

各位网页设计的老手对此自然是很通晓了，不对的地方还请多多指点。

在photoshop中有一样工具是专为图像对象的立体化而诞生的，那就是图层样式。从各个图层样式的名字中就可得见。如投影，内阴影，内发光，外发光，浮雕等。正因为图层样式的发明才使得图像产生出光和影，从而使得平板一块的画布显示出凹凸有致的立体感。

上一篇分享中讲到了怎样使用最简单的绘图工具——铅笔绘制出网页中常见的凹痕效果，因为凹痕的构造最为简单，因而绘制方法也最为简单。但是这种效果是死板的，不管是阴影还是高光，都需要手动绘制出来，同时，这种效果也无法应用于文字和按钮（当然也可以自定义一个图层样式来做这种效果，但我总是觉得使用铅笔更直观一点，个人想法）。而图层样式则是“活”的，图层样式可以被从一个图层复制到另一个图层，或更多的图层，它也可以保存起来，在以后绘制的时候直接套用，如果不满意图层样式的效果，还可以随时修改各项参数。在画面中有多个按钮或者文本需要修饰甚至多个文档需要保持按钮样式一致的情况下，图层样式尤其有用。

在photoshop的图层样式中，虽然有着名为“投影”“阴影”“内发光”“外发光”这样的样式，但“投影”样式并不局限于塑造一种投影效果，“内发光”样式也不仅仅能够表现内发光的效果（为避免混淆，本文中“样式”一词单指photoshop中的图层样式名称，“效果”一词单指我们看到的实际效果），这也就是本文题目中“非常规”的意义所在。但非常规并不是要故意标新立异，而是使photoshop这个工具更加灵活好用。

由于本文要讲的主要是网页中的文字和按钮样式，因而各项数据都是以像素为单位，如果用作印刷或其他媒介，根据分辨率，各个参数的数值就要相应地增大或减小。

上图是我在上一篇分享中用到的一种文字效果，它应用到了两种图层样式，先试着推测一下都是哪几种图层样式，然后在自己的photoshop里验证一下。在这里我先声明一下，在上图中我表现的是一种如同碑文一般凹刻下去的效果，不管在你眼中它是哪一种效果，我都要从这个出发点来分析。涉及到参数分析的时候总会有点枯燥和不易理解，还请各位有兴趣的酷友耐心慢慢看。我们先把图放大来看一下。

在上面的图片中我为大家指出了各个图层样式作用的区域，在运用到的图层样式中，内阴影可以说是最为“本分”的，它也恰如其分地营造出一种阴影的效果，在这里我只是稍微降低了透明度，使得阴影不至于太暗。因为假定光线是从左上方照射下来，因此，我把角度修改为135°。为了使得阴影只投射到文字轮廓的边缘，而不是填充了整个文字的轮廓，因此我把距离和角度都降低到3像素的大小（具体数字要依据实际文字的尺寸和笔画粗细来定）。具体参数如下

如果把文字凹刻的横截面想象成如下图所示，那么内阴影样式的运用已经塑造出了横截面左侧的阴影区域。

接下来解释一下投影样式的各项参数设置。参数如下

在这里，角度仍然为135°，因为要保持光线角度的一致。至关重要的几项参数在于，我把默认的“正片叠底”混合模式修改为“正常”（虽然改为“滤色”模式更为贴切一些，但为了便于掌控，此处使用了“正常”模式），颜色也由默认的黑色修改为白色。至此，投影样式从本质上不再制造投影效果,如题目所说，走向了“非常规”。这里详细地说一下，为什么要把“正片叠底”模式修改为“正常”模式。如果你对混合模式很了解，此处也可略过不看。众所周知，影子都是比较昏暗的，而“正片叠底”正是使得两个图层在混合之后变得更为暗一点，不管居于上层的图层是明是暗，混合之后的结果只有更暗，如果上层图层是白色，那么“正片叠底”模式就不起作用了。回到本例中，如果只是把投影样式中的颜色修改为白色，而不修改混合模式，那么白色也是不起作用的。（限于水平有限，此处“正片叠底”的解释不够专业，希望高手指点）

接下来的两处修改就是“距离”更改为1像素，“大小”更改为0像素。这样设置的效果就如同将原先的文本复制一个副本，放置在原文本下面的图层上，填充为白色降低透明度，然后分别向右向下各偏移1个像素。由此，在文本轮廓的右下方产生出了一条明亮的颜色带，自然而然地也就成为了上面截面图中右侧的高光。

通过上面两个图层样式的结合运用，生成了文本轮廓中的阴影和轮廓右下方的高光，共同模拟出了凹刻下去的立体效果。还有一点需要注意的是，背景既不应该是纯黑也不能是纯白，因为我们要让阴影和高光有一个可供对比的环境。同时，图层样式也不宜过于强烈，最好是能让最终的效果起到一种暗示的效果。

在文字太小的情况下，我们就可以略去内阴影样式，如下面所示，当然，效果也会大打折扣。不过这种效果也是可以由css直接生成的，而不用把文字做成图片。

如果文中有一些不足之处，请各位高手指点。

另外像大家推荐一本书，photoshop cs/cs2 wow! book，很多关于图层样式的透彻分析我都是在这里学到的，各位想要深入学习ps的酷友不妨看一下，总比看国内一些无良书商出版的教程好一点。（国外的最新版本也快出来了，希望能很快引进）

原文作者：东边有棵树

Photoshop

方寸之间的光影世界（二）——图层样式的非常规用法（PS教程）

相关推荐