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

2014/04/13 43269

effect-panel-and-texture-features

(题图为我两个月前的一个「飞机稿」,使用了「效果」等手段来表现质感)

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

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

小课堂系列:
《使用 Adobe Illustrator 做 UI 设计——多重填充与多重描边》
《小课堂第二弹!使用ILLUSTRATOR做UI设计系列教程》
《小课堂第三弹!使用ILLUSTRATOR做UI设计系列教程》
《小课堂第四弹:使用ILLUSTRATOR做UI设计系列教程》
《使用ILLUSTRATOR做UI设计系列教程:创建内阴影效果(5)》

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

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

effect-panel-and-texture-features

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

effect-panel-and-texture-features

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

effect-panel-and-texture-features

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

effect-panel-and-texture-features

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

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

AI 里的效果是什么?

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

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

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

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

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

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

effect-panel-and-texture-features

一个矢量对象可以不止有一个描边和一个填充,如前面一篇教程:《使用 Adobe Illustrator 做 UI 设计——多重填充与多重描边》里所描述的那样。同样,也可以有不止一个效果。如上面的矩形,除了圆角效果外,还可以再加一个「投影」效果或别的:

effect-panel-and-texture-featureseffect-panel-and-texture-features

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

effect-panel-and-texture-featureseffect-panel-and-texture-features

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

effect-panel-and-texture-featureseffect-panel-and-texture-features

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

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

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

在「图层」面板,点击「图层1」右侧的那个圆圈图示:

effect-panel-and-texture-features

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

effect-panel-and-texture-features

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

effect-panel-and-texture-features

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

effect-panel-and-texture-features

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

effect-panel-and-texture-features

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

effect-panel-and-texture-features

「扩展外观」命令

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

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

effect-panel-and-texture-features

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

effect-panel-and-texture-features

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

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

effect-panel-and-texture-features

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

effect-panel-and-texture-features

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

effect-panel-and-texture-features

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

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

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

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

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

AI 里 SVG 滤镜的介绍,以及使用方法,还有如何自己写 SVG 滤镜,上一篇教程主要讲的就是这个,可以参看一下:《使用ILLUSTRATOR做UI设计系列教程:创建内阴影效果(5)》

下集预告

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

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

effect-panel-and-texture-features

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

effect-panel-and-texture-features

那么,我们下期再见~

 

原文地址:zhangboning.me
作者:@张泊宁研究所

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量66万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/effect-panel-and-texture-features

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里