AI基础教程：用Illustrator快速方便地创建内阴影效果

再下面是<feFlood>基础滤镜：

<feFlood>命令对SVG滤镜所控制的区域做颜色填充。本例子中以黑色，75%可见度填充SVG滤镜控制区域：

注意<feFlood>基础滤镜没有输入参数。填充的结果输出至缓冲区，名称为color。

然后又是一个<feComposite>命令：

这次是用在缓冲区里的color和inverse图像做in运算，将内阴影做出来，结果保存到shadow里，如图：

最后是用<feComposite>将阴影和源图像拼合：

拼合完毕后，就得到最终需要的结果了：

使用AI的SVG滤镜生成内阴影的步骤差不多就是这个样子了。如果再回顾一下这整个过程，会发现很多基础滤镜都是将某一步的输出作为这一步的输入。那么，可以根据基础滤镜输入输出之间的联系，画一个结点图。我们这个例子的基础滤镜结点图可以画成这个样子：

这样基础滤镜之间的关系就一目了然了。

除此之外，SVG滤镜还有一些其他的有趣功能。再举一个例子：加强图像的凹凸效果。

如果用过一些3D创作软件或类似Unity这样的游戏引擎，可能会知道，在计算机世界里，物体表面的凹凸感可以由凹凸贴图或法线贴图来做到。凹凸贴图即给定一个除颜色纹理之外的凹凸纹理，凹凸纹理由灰度表示，越白的地方代表该点高度越高，越黑的地方与之相反代表高度越低。

法线贴图类似，只是由灰度表示的凹凸纹理换为由彩色表示的表面法线纹理，每个像素的[R,G,B]颜色对应该点法线[X,Y,Z]分量的大小。通过凹凸贴图和法线贴图，可以大大增加计算机世界里物体的真实感，且不会像直接创建多边形那样过多的增加物体几何细节而过度增加计算机渲染负担：

如上面这个CrazyBump软件截图，在这里用了石墙纹理，并通过石墙纹理本身的灰度生成了凹凸纹理，计算机根据凹凸纹理、颜色纹理以及入射光线颜色、方向，还有视角的方向，生成了最终具有真实感的颜色图像。

在AI里，使用SVG滤镜，也可以做出类似的效果。代码如下：

这个滤镜使用源图像的灰度，生成凹凸纹理，再用凹凸纹理生成由光线照射下的凹凸感图像，最后将凹凸感图像与源图像拼合，生成更加带有凹凸感的图像：

如图，上图为应用上述滤镜的图像，下图为源图，对比一下即可看到差别。

然后，还可以这样玩，如改变光源的方向：

改变光源的颜色为夕阳温暖的余光：

改变光源的类型：

甚至是为纹理增加「亮晶晶」的效果：

由此，我们可以看到，SVG滤镜虽然是AI最不常用的功能之一，但是功能却相当强大。有了SVG滤镜这个功能，我们能够自己编写所想要的滤镜，从而大大增强AI的功能，甚至可以将AI变成一个图像处理软件。不过AI的SVG滤镜也有很多局限性：

首先是SVG滤镜不能方便调节参数，若需要调节参数，必须要通过手工更改代码来调节。还有，AI中的SVG滤镜不能够像在Web那样，通过开启enable-background属性来获取当前图形的背景图。以及，AI中似乎不可以用SVG滤镜引用其他图像或矢量对象。

最后，估计因为Adobe也觉得这个功能可能没多少人会用，没怎么对这个功能做软件测试，SVG滤镜这个功能有一些bug，如果输入一些无效的SVG命令可能会引起AI崩溃。因此在应用SVG滤镜前，必须要保存文件。

最后，依然是作业时间：

请根据FilterEffects这个页面里面的资料，了解上面的凹凸效果滤镜是如何实现的;

根据上面凹凸滤镜效果代码，画出基础滤镜结点图;

将上面凹凸滤镜的代码扩充，使其实现最后一张图的反光效果！

教程结束，以上就是用Illustrator快速方便地创建内阴影效果，希望这篇教程能给大家带来帮助！谢谢大家观看！

最新评论