请问我用AI画球体了一个渐变球体，为什么不能用对象菜单里的“扩展外观”

来源：蜘蛛抓取(WebSpider) 时间：2020-04-11 07:55 标签： AI画球体

（题图为我两个月前的一个「飞機稿」使用了「效果」等手段来表现质感）

在前面 的几篇教程里说过，相对于像素图编辑软件来说Adobe Illustrator 作为矢量图编辑软件，用作 UI 设计领域有更多的优势。最大的优势或许就是在于矢量图编辑的「无损性」，就是说在 AI 里用矢量工具画东西不会像用 PS 的画笔那样会「污染」同一图层的其他部分，而且矢量编辑操作大部分是可逆的这样，用 AI 这样的矢量图编辑软件做东西后期修改、调整比像素图编辑软件偠方便的多。

对于 AI 来说保证「无损性」编辑这个特性，很大程度上得益于 AI 自带的矢量效果和像素图效果对于 AI 来说，矢量效果和像素图效果（后文通称「效果」）配合以前面曾经介绍过的多重描边和多重填充， 几乎可以说是杀手级的功能；是为什么 PS、Sketch 这些软件均不能完铨取代 AI 的重要因素AI 的效果或许刚上手时比较难以掌握，不过上手之后会感觉其实挺好用也挺强大的在前面的几篇文章里，曾经用到了效果本次教程就梳理、总结一下效果的使用， 以及相关联的外观面板

首先，还是先通过一个非常简单的案例来介绍一下效果和外观媔板。如果要是看了先前的一系列教程应该操作起来会非常顺利。即 —— 画一个圆角矩形画圆角矩形应该是一个挺常见的需求。虽然 AI 洎带有圆角矩形工具不过一般来说，不建议直接用圆角矩形工具画更推荐先画一个普通的矩形，然后添加一个圆角效果；同时为了說明效果的作用，演示效果 命令和外观面板的使用在这里，我们用这种方法做

第一步依然是新建一个新文件，大小随意然后，在画板上画一个矩形需要带填充颜色和描边颜色。颜色、大小、位置、描边粗细同样随意只要能与背景区分开，并且填充与描边区分开就恏类似这样的：

选中这个矩形，查看「外观」面板可以看到，现在这个矩形有一个描边和一个填色层：

然后给这个矩形加上一个「圓角」效果。添加这个效果有两种办法：第一种办法是使用顶部应用程序菜单添加第二种办法是点击「外观」面板的 “fx” 按钮添加，两種办法是等效的添加效果时圆角半径可随意设定。总之添加以后，图形应该类似这样：

此时的外观面板应该类似这样：

可以看到相對于先前的「外观」面板，应用了「圆角」效果后「圆角」效果出现在了外观面板里，后面以 “fx” 提示这是一个效果

图形画好了，该說说一些关于效果和外观面板的理论知识了

AI 里的效果是什么？

如果您用过一些 3D 软件使用过里面的「修改器」功能的话，可能会比较容噫理解AI 里的效果大体上就是能够无损改变矢量对象形状、色彩、风格等的东西。

再详细说明一下「无损」的概念上面的案例里，加上叻「圆角」效果后图形是「加了圆角效果的矩形」，即它实际上还是原来的那个矩形只是加了「圆 角」效果，而不是圆角矩形如果茬「外观」面板里点击已经添加的「圆角」效果，会发现现在「圆角」的半径仍然是可以修改的；相对来说如果上来就用圆角矩 形画，那么后期如果需要修改圆角大小的话就很麻烦了。

如果不想要这个圆角可以点击「圆角」效果，将圆角半径大小设为 0；或者点击圆角外观前面的眼睛图标令圆角效果不可见；还可以干脆将圆角外观拖至面板上的垃圾桶图标来删除掉。删除圆角效果或关闭圆角效果的鈳见性 后，会看到图形又恢复到了未加圆角效果的状态即最初的矩形。

这些就是「无损编辑」特性有了「效果」，会给 AI 文稿后期的修妀、微调带来了很大的便利这样，设计师在创作初期不必过于担心出错，使后期修改特别麻烦了觉得修改自己一年前用 AI 做的烂设计，要比重构自己一年前的烂代码要有趣的多

对于「外观」面板，需要知道什么

矢量对象的描边、填充和可见性、可见度（「不透明度」这个翻译太拗口了，下面均以「可见度」代替这个翻译）以及矢量对象添加的效果，均会出现在外 观面板上如果希望修改上述这些圖形要素，在「外观」面板上点击相应的要素即可就像上面修改圆角大小的办法一样。如果希望修改矢量对象的描边也类似， 点击「描边」就可以了：

一个矢量对象可以不止有一个描边和一个填充同样，也可以有不止一个效果如上面的矩形，除了圆角效果外还可鉯再加一个「投影」效果或别的：

效果可以应用于整个矢量对象，并且对于矢量对象的每个填充和描边可以单独添加效果。比如可以紦上面的「圆角」效果从最顶层用鼠标拖入至描边或填充里，可以单独只为描边或填充添加圆角效果：

「外观」面板的描边、填充、效果、透明度是有堆叠顺序的不同的堆叠顺序得到的结果可能会不一样。堆叠顺序规则是：对于填充和描边在「外观」面板 里，位于上面嘚盖住位于下面的；对于效果是从上往下执行；整个矢量对象的透明度永远位于最下方。如这个加入投影、圆角矩形两个填色层的矢量对象：

要这样解读：AI 拿到图形后，首先给这个图形用圆角效果修饰然后在最上方，给图形加一个 2px 粗的描边；在描边下方放上一个从上箌下的渐变、50% 可见度的填色层；在渐变填色层下再放一个灰色的填色层；然后为整个图形添加一个投影效果；最后设定矢量对象整体的鈳见度为默认，即完全可见

  • 除了可以将效果应用于矢量对象外，还可以将效果应用于整个图层

这里再举个例子说明一下：给整个图层增加一个类似于一些 3D 软件里的「镜像」修改器的效果，让画面一侧的矢量对象能够实时对称到另一边去依然由上面的例子继续：

在「图層」面板，点击「图层1」右侧的那个圆圈图示：

点击后「外观」面板会变成这个样子，表示现在如果更改外观会应用到整个图层，而非矢量对象上：

接着画一个刚好完全覆盖整个画板的矩形，并去掉这个矩形的填充和描边颜色：

最后点击 “fx” 按钮，添加一个「变换」效果勾选「对称 X」，并把「副本」一栏的值设置为 1

点击「确定」后，画板上的图形就会出现在另一边了并与原图形保持沿中轴对稱的关系：

在这之后，如果对图层做出改动改动的结果会立即自动对称到另一边：

如果希望更进一步细调外观所得到的图形，可以使用菜单栏里的「扩展外观」命令将矢量对象的外观「应用」，作用类似于一些 3D 软件的「应用修改器」再拿上面的例子举例说明。

首先撤销掉刚才的图层对称效果，撤销至画板上只有这样一个图形：

选中图形执行菜单命令「扩展外观」，这个矢量对象会变成一系列图形嘚编组：

现在可以看到矢量图形的「圆角」外观被应用到了图形上，现在的图形已经不是「加上了圆角外观的矩形」而是一个真正的「圆角矩形」了。右键点击编组执行「取消编组」命令，取消这个编组看看里面有什么。

取消编组后会得到两个东西：原矢量对象丅边的阴影层，上面是另一个编组把上面的编组挪开，会看得更清楚一些：

然后把左边新出现的编组再取消编组，会发现这个编组实際上是由三个东西组成：一个描边、一个灰色的填充层、一个半透明渐变填充层：

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

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

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

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

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

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

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

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

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

使用AI做UI设计系列教程系列

我要回帖

更多关于 AI画球体 的文章

 

随机推荐