Ai设计UI图标系列教程：效果、外观面板和质感表现(上)

这就是给对象执行「扩展外观」命令得到的最终结果，对比还没有执行「扩展外观」命令时的「外观」面板：

可以看到，「扩展外观」命令所做的工作就是将矢量对象的每个效果都应用上，每个填色层和描边都单独拆出来。执行「扩展外观」命令后，就可以由得到的结果来微调了。

不过同样可以看到，执行「扩展外观」命令后，矢量对象的效果就定下来了，不可以改动了。比如在我们这个例子中，执行「扩展外观」命令以后，再想更改圆角的半径和投影就十分困难了。

AI 里有些效果没有啊怎么办？

AI 的矢量对象效果虽然强大并且方便，不过相对于 PS 这样的图像处理软件来说，还是缺少了一些效果，比如 PS 里的「内阴影」图形样式在 AI 里就没有类似的效果。怎么办？

AI 提供了导入 SVG 滤镜的功能，通过这个功能，可以导入一些别人写好的 SVG 滤镜，来弥补 AI 自带滤镜的不足。除了用别人写好的滤镜以外，还可以自己写滤镜。例如，考虑写一个给矢量对象加一个投影这样的滤镜，可以按照类似「取对象透明度 -› 将透明度转化为灰度 -› 高斯模糊 -› 平移 -› 与源图像拼合」这样的思路写。

下集预告

本来，是想把下一期教程的内容写成一篇教程里的，然而写到这里，感觉篇幅已经太长了，并且感觉这一期的内容可能对于没有接触过的人来说，比较难「消化」。因此不得不将教程拆为上下两期。这期教程讲述了 AI 里矢量效果的基本知识，下一期的内容就是这些效果的综合运用。

在前言中，曾经提到过，由于 AI 有丰富的效果工具，因此 AI 退可做扁平，进可做拟物。那么，在下一期教程里，会详细解析一个拟物化浏览器图标的质感表现，是如何通过 AI 里的众多效果和工具所表现出来的：

这期没有作业，有兴趣的话，可以想想上面的图标是怎样做成的。如果对于本期教程有什么问题或建议，可以在评论区提出。