总目录：http://blog.csdn.net/iloveas2014/article/details/38304477

3.2.5 更改渐变滤镜不透明度的变化趋势来加强立体感

      在上一节的最后，我给出了一个用渐变发光制作立体字的小例子。方法是翻转渐变的透明度变化方向。（图 3.51）
 
图 3.51 利用渐变发光制作浮雕效果

      虽然立体感已经出来，但是厚度部分看起来更像是一个线框，而非一个实实在在的立体字侧面。

      究其原因，就在于渐变的终点为全透明，而且模糊作用区太小，导致有色的区域很少。

      下面针对这两个问题对以上浮雕字进行修正。针对透明度问题，我先把所有渐变点（最左侧的点除外）的alpha调成100%（图 3.52）。
 

图 3.52 去掉透明渐变后的渐变发光效果

      看起来更像投影多一点，因为几乎没有任何渐变。所以接下来需要调整渐变区的颜色。比如把渐变改为浅蓝到深蓝（图 3.53）。
 

图 3.53 从浅蓝到深蓝的渐变发光效果

      层次感来了，但过渡区不太柔和，渐变的过渡有点突然，只有很少的两三个像素。究其原因，上一节已有提及，因为渐变的区域等于模糊值，而我们的模糊值只设置了5像素。

      经测试，80号粗体微软雅黑在模糊值=10像素时表现最佳（模糊太大，超出字符粗细，会对轮廓造成比较严重的变形），我再给渐变条随意加了几种颜色，效果如图 3.54所示。
 

图 3.54 多色渐变发光

      我们暂且不追究这一随性涂鸦作品的可观赏性，单看渐变范围，我们可调的空间有了很大程度的提升。如果模糊值=5，那么渐变就只能呈现出一条条很细的丝线。（图 3.55）
 

图 3.55 模糊值为5，渐变点数量大于等于5时的渐变发光效果

      当然，利用渐变多和模糊值小这一矛盾，我们也同样可以进行一些奇葩的创作，也可以用它来制作一些像素风格的图画。

      把渐变设置改为从浅蓝到深蓝，效果如图 3.56所示。

图 3.56 模糊值为10的浅蓝-深蓝渐变发光

      一个侧面类似于球面的立体效果基本成型。读者可以自行调整里面的颜色，同时衬以投影进行美化。图 3.57，图 3.58是我调整后的效果，见笑了。
 

图 3.57 笔者对色调进行调整后的效果——塑料质感字体

图 3.58 笔者对色调进行调整后的效果——灯箱效果字体

      如果认为边缘不够圆滑，就可以结合之前学习过的高强度发光滤镜（即描边）柔化边缘的转角，发光颜色跟文字颜色一致（图 3.59），但这做法不太地道，在讲到BitmapData的时候，我会给出一些相对高级的办法。
 

图 3.59 用发光滤镜柔化边缘

      对于后一种灯箱字体，为了让灯光也能穿透字体的正面，我们可以多建一个内侧的渐变发光（这里不建议用全部，因为内外侧的模糊值和距离不一样）（图 3.60）
 

图 3.60 添加了内侧渐变发光的灯箱字体

      我们已经尝试了在外侧创建浮雕，那么内侧的可以实现吗？

      下面我们开始用内侧的渐变发光来做试验。

      把现有的滤镜全部删掉，重新添加一个渐变发光滤镜，将类型更改为内侧（图 3.61）
 

图 3.61 默认的内侧渐变发光滤镜

      白色的高光配以灰暗的阴影，浮雕样式已崭露头角，但高光效果偏弱，阴影效果偏强，可能是白色不透明度过小，黑色不透明度过大所致，将白和黑的不透明度都调整为75%之后便有所改善。（图 3.62）
 

图 3.62 将渐变不透明度都改为75%以后的效果

      阴影区涵盖面仍然较大，甚至将文本原有的颜色完全覆盖，而且高光区的边缘也出现较明显的杂边与切迹，我们尝试在渐变中间添加一个全透明色，并且将白色渐变点调右，让高光更远离边缘的位置（图 3.63）。

图 3.63 用全透明渐变点弱化发光和阴影区

      再一次出现渐变被挤压成线框的现象了，吸取以往的经验教训，我们把模糊值调大点看看（图 3.64）。
 

图 3.64 模糊值调大后的效果

      只调大了3像素，高光轮廓就已经严重变形，俨然即将熔化的金属，虽说这奇葩并非我们目前想要的，但可为日后的创作带来灵感的启迪。

      从整体上来观察，越靠近边缘的位置变形越严重，所以不妨再将白色渐变往右拉一下。（图 3.65） 

图 3.65 白色渐变点再往右调一点

      高光区的线条相对清晰了，但是渐变到透明的区域仍可看到变形，为了阻断这一渐变的发生，我在白色渐变点旁边添加一个全透明的渐变点（图 3.66）。
 

图 3.66 在距离白色渐变点很近的地方再加一点白色

      白色光环再次被挤压，模糊值又无法调大，怎么办？只能打白色点右边的主意了。

      我们把所有渐变点都往右移，再把黑白之间的透明点去掉，效果如图 3.67所示。
 

图 3.67 白色点继续右移的效果

      再继续拖，恐怕连黑色都要给拖没了，但仍未得到满意的结果，常规做法已山穷水尽，非要把黑色也去掉吗？不妨试试，本节要做的就是打破常规！

      我把黑色渐变条也改成白色。（图 3.68）
 

图 3.68 把黑色渐变点改成白色

      再次取得新的突破！高光区在得到清晰轮廓的同时，也争取到了更大的有效面积，发挥的空间从此更加广阔！

      根据平常的视觉习惯，高光应位于左上角，为此，我们用翻转法，把距离设置成负数。（图 3.69）

图 3.69 将高光调至人类习惯的角度

      高光有点偏大了，可以调小点，把渐变点右移似乎是个不错的选择（图 3.70）。
 

图 3.70 渐变点继续右移

      发现高光区仍然偏大，再往右将会再次出现被挤压的状况，引起恶性循环，这时，可以配合模糊值，距离等参数作出更细微的调整。（图 3.71）
 

图 3.71 细调后的效果

      搭配上投影后的效果如图 3.72所示。

图 3.72 搭配上投影后的效果

      立体效果成型以后，我们可以将渐变区域调大来创建更圆润的浮雕斜面（图 3.73）。
 

图 3.73 更圆润的斜面效果

      图 3.72和图 3.73在打造质感的能力方面各有千秋，图 3.72适合于制作晶莹剔透的水晶字体（图 3.74），而图 3.73则更倾向于表面柔和的塑料或者石砖材质（图 3.75）。
 

图 3.74 在图 3.72基础上润色而成的水晶字体

图 3.75 在图 3.73基础上改造而成的塑料字体

ActionScript3游戏中的图像编程（连载五十四）