使用Ai做UI设计系列教程：效果、外观面板与质感表现(上).pdf

使用Ai做U I设计系列教程 ：效果、外观面板和质感表现 （上 ） （题图为我两个 前的一个 「飞机稿」 ，使用了 「效果」等手段来表现质感 ） 在前面 的几篇教程里说过 ，相对于像素图编辑软件来说 ，A do be Illust rat o r 作为矢量图编辑软件 ， 用作 UI 设计领域 ，有更多的优势。最大的优势 ，或许就是在于矢量图编辑的 「无损性」 ，就是说在 A I 里 ，用矢量工具画东西不会像用 PS 的画笔那样会 「污染」同一图层的其他部分 ，而且矢量编辑 操作大部分是可逆的。这样 ，用 A I 这样的矢量图编辑软件做东西 ，后期修改、调整比像素图编辑软 件要方便的多。 对于 A I 来说 ，保证 「无损性」编辑这个特性 ，很大程度上得益于 A I 自带的矢量效果和像素图效果 。对于 A I 来说 ，矢量效果和像素图效果 （后文通称 「效果」 ），配合以前面曾经介绍过的多重描边 和多重填充 ， 几乎可以说是杀手级的功能 ；是为什么 PS、Sket ch 这些软件均不能完全取代 A I 的 重要因素。A I 的效果或许刚上手时比较难以掌握 ，不过上手之后会感觉其实挺好用也挺强大的。在 前面的几篇文章里 ，曾经用到了效果 ，本次教程就梳理、总结一下效果的使用 ， 以及相关联的外观 面板。 首先 ，还是先通过一个非常简单的案例 ，来介绍一下效果和外观面板。如果要是看了先前的一系列 教程 ，应该操作起来会非常顺利。即 —— 画一个圆角矩形。画圆角矩形应该是一个挺常见的需求。 虽然 A I 自带有圆角矩形工具 ，不过一般来说 ，不建议直接用圆角矩形工具画 ，更推荐先画一个普通 的矩形 ，然后添加一个圆角效果 ；同时 ，为了说明效果的作用 ，演示效果 命令和外观面板的使用 ， 在这里 ，我们用这种方法做。 第一步依然是新建一个新文件 ，大小随意。然后 ，在画板上画一个矩形 ，需要带填充颜色和描边 颜色。颜色、大小、位置、描边粗细同样随意 ，只要能与背景区分开 ，并且填充与描边区分开就好 ，类似这样的 ： 选中这个矩形 ，查看 「外观」面板 ，可以看到 ，现在这个矩形有一个描边和一个填色层 ： 然后 ，给这个矩形加上一个 「圆角」效果。添加这个效果有两种办法 ：第一种办法是使用顶部应用 程序菜单添加 ，第二种办法是点击 「外观」面板的 “f x” 按钮添加 ，两种办法是等效的。添加效果时 圆角半径可随意设定。总之 ，添加以后 ，图形应该类似这样 ： 此时的外观面板应该类似这样 ： 可以看到 ，相对于先前的 「外观」面板 ，应用了 「圆角」效果后 ， 「圆角」效果出现在了外观面 板里 ，后面以 “f x” 提示这是一个效果。 图形画好了 ，该说说一些关于效果和外观面板的理论知识了。 A I 里的效果是什么 ？ 如果您用过一些 3D 软件 ，使用过里面的 「修改器」功能的话 ，可能会比较容易理解。A I 里的效果 大体上就是能够无损改变矢量对象形状、色彩、风格等的东西。 再详细说明一下 「无损」的概念。上面的案例里 ，加上了 「圆角」效果后 ，图形是 「加了圆角效果 的矩形」 ，即它实际上还是原来的那个矩形 ，只是加了 「圆 角」效果 ，而不是圆角矩形。如果在 「 外观」面板里点击已经添加的 「圆角」效果 ，会发现现在 「圆角」的半径仍然是可以修改的 ；相对 来说 ，如果上来就用圆角矩 形画 ，那么后期如果需要修改圆角大小的话 ，就很麻烦了。 如果不想要这个圆角 ，可以点击 「圆角」效果 ，将圆角半径大小设为 0 ；或者点击圆角外观前面的 眼睛图标 ，令圆角效果不可见 ；还可以干脆将圆角外观拖至面板上的垃圾桶图标来删除掉。删除圆 角效果 ，或关闭圆角效果的可见性 后 ，会看到图形又恢复到了未加圆角效果的状态 ，即最初的矩形 。 这些就是 「无损编辑」特性。有了 「效果」 ，会给 A I 文稿后期的修改、微调带来了很大的便利。 这样 ，设计师在创作初期 ，不必过于担心出错 ，使后期修改特别麻烦了。觉得修改自己一年前用 A I 做的烂设计 ，要比重构自己一年前的烂代码要有趣的多。 对于 「外观」面板 ，需要知道什么 ？ 矢量对象的描边、填充和可见性、可见度 （ 「不透明度」这个翻译太拗口了 ，下面均以 「可见度」 代替这个翻译 ），以及矢量对象添加的效果 ，均会出现在外 观面板上。如果希望修改上述这些图形 要素 ，在 「外观」面板上点击相应的要素即可。就像上面修改圆角大小的办法一样。如果希望修改 矢量对象的描边 ，也类似 ， 点击 「描边」就可以了 ： 一个矢量对象可以不止有一个描边和一个填充。同样 ，也可以有不止一个效果。如上