Illustrator教程:解析多重填充与多重描边大奖手机网页版登录[十年信誉]

对于做设计而言,工具只是完成作品的手段。因此,其实对于做UI设计来说,到底是选择PS还是AI还是别的这样的问题并不重要的。只是对于我自己而言,做设计几乎全部是用AI来做的,所以这一系列教程大多数是关于AI的。

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

我从2012年初开始尝试使用AI来完成一些设计与创作,一直至今。个人感觉,AI虽然有不少难用的地方,但是非常适合用于UI设计。甚至在很多方面,用AI来代替PS做设计更加高效、方便。主要原因是:

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

AI的强项在于对矢量图的处理。先哲有云:「如果希望在计算机里从无到有『生成』一张图像,通常矢量图创作软件更适合一些,除了需要类似使用数位版手绘等那样的特殊场合」。特别是在UI设计、Web设计领域,绝大多数时候并不需要结构和色彩非常复杂的图形。大多就是需要矩形、椭圆、圆角矩形这些很简单的几何形状。因此,在这一点上,PS等图像处理软件相对于AI来讲,没有太多的优势。

大奖手机网页版登录[十年信誉] 1

在AI里,可以较为方便地完成从排版布局、绘制图形、上色、切图导出这样的全部一套流程。意味着用AI做设计时,不必要中途换软件环境。例如很多设计师用PS做设计时要开着一个AI,先用AI画基本形,然后把AI里的图形作为智能对象复制到PS里,然后用PS继续创作。而用AI几乎就可以完全避免这样中途换软件的情况。

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

AI提供的一系列功能极其适用于排版布局。比如在PS里,参考线只是横着竖着的直线对吧;而在AI里,参考线可以是任何形状。参考线不是无限长?没问题!参考线是斜线?没问题!画个长方形甚至画个圈当参考线用?也没问题!

大奖手机网页版登录[十年信誉] 2

由于AI的创作主要是是基于矢量对象,所以在AI里,大多数操作都是可逆、可以在后期修改的。比如画一个按钮,可以很容易在后期调整按钮圆角的半径大小,同时保持按钮的图形样式不变。画一个六边形同样也可以加圆角,并在后期修改圆角大小。

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

AI里基于矢量对象的吸附、对齐功能相当好用,且在UI设计中相当常用。

大奖手机网页版登录[十年信誉] 3

由于AI有丰富的矢量效果(类似PS的滤镜和图层样式),因此AI退可做扁平,进可做拟物。下面这两张图就是用AI绘制的,完全没有用到除AI之外的其他软件:

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

大奖手机网页版登录[十年信誉] 4

大奖手机网页版登录[十年信誉] 5

大奖手机网页版登录[十年信誉] 6

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

当然了,做扁平化设计AI就更不在话下了。

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

AI基于矢量对象的导出功能很好用,这一点将在后面的教程中讲到。并且AI可以将图稿导出为SVG格式的成品,很适合用在Web上。

AI 里的效果是什么?

AI做出来的东西可以导出到任意大尺寸,而不会有「虚边」情况。这一点特别适合用于设计不同分辨率的图标,以及做Retina适配。

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

AI对于RetinaMacBookPro的支持非常好。

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

对了,AI在CS5就可以做到将矢量图形对齐到像素了,因此不用担心导出出来的切图里,直线没有准确对上像素,因此带来发虚的情况。

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

如果偶尔要排个版做个册子的话,AI远比PS适合。

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

还有很多一时想不出的优点……

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

因此,即使PS功能相当强大,并且网上有更多的学习资源以及素材资源,对于我来说,AI仍然是不可替代的。

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

接下来我将要写的一些教程,内容主要是针对AI在UI设计中的一些进阶使用技巧。

大奖手机网页版登录[十年信誉] 7

因此,这些教程可能更适合对于AI已经有一定了解的用户来阅读,可能对于AI的基本使用功能不会介绍太多。一是因为大多数AI的基本功能在Adobe的官方文档上都会有介绍:IllustratorHelp;二是出于篇幅和个人时间、精力的限制;三是我相信,学习一个软件、能力最好的办法就是learnitthehardway,即在一定的压力或困难下完成学习,比如在学习AI遇到类似某某某功能找不到这样的困难时,自己通过搜索引擎或官方文档或通过自己尝试,找到解决方案,要比直接问别人效果要好得多。

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

AdobeIllustrator现在最高的版本是CC,即CreativeCloud。我将写的一系列教程要求您用的AI最低版本为CS6,因为CS6的一些很基础的功能在之前的版本里是没有的。当然如果您用的是CC版本最好了。

大奖手机网页版登录[十年信誉] 8

使用AdobeIllustrator做UI设计(二)——多重填充与多重描边

大奖手机网页版登录[十年信誉] 9

在这之前,说说计算机图形(注意:非图像)的一些基本知识。如果您用PS或AI比较多的话,可能会知道,计算机图形的最基本要素有两个:填充和描边。填充和描边可以是纯色,也可以是纹理,还可以是渐变。总之,一个形状确定了填充和描边后,这个图形的样式就确定下来了。

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

自然,作为矢量图绘制软件,AI也可以处理图形的填充和描边。不过,AI有一个很强大的地方是——在AI里,一个图形是可以有好几个填充和好几个描边的。有人可能会问,这个特性有用吗?实际上,这是一个相当实用且强大的功能。我们通过完成一个实例来看一下:使用AI绘制这样一个知乎样式的按钮:

大奖手机网页版登录[十年信誉] 10

大奖手机网页版登录[十年信誉] 11

大奖手机网页版登录[十年信誉] 12

首先,在新建文档之前,要确保AI使用的单位是像素,而不是英寸、点、厘米或别的。这一点很重要,关系到导出的切图是否为pixel-perfect。在首选项里可以设置AI使用的单位是什么:

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

大奖手机网页版登录[十年信誉] 13

大奖手机网页版登录[十年信誉] 14

确保AI使用的单位是像素后,新建一个文档,文档的大小为320×480像素,颜色模式选为RGB,并确认「使新建对象与像素网格对齐」没有被勾选上。如图:

大奖手机网页版登录[十年信誉] 15

大奖手机网页版登录[十年信誉] 16

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

在这里要说明一下,AI在CS5开始,支持将对象对齐到像素网格,这一点在UI设计中很重要。不过为什么在新建文档时不把「使新建对象与像素网格对齐」选项勾上呢?我在多次创作过程中发现,将对象一开始就对齐到像素网格,带来的麻烦远比带来的便利要多。并且,对齐到像素网格可以在后期时来做。因此,在这里先不要勾上。

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

一般来说,做UI设计、海报设计什么的,如果不是特殊的需要,最好不要使用纯黑、纯白、纯红(#FF0000)这样的颜色。一是因为纯黑与纯白这样的颜色之间造成的对比让人感觉很不舒服,二是自然界几乎没有看上去纯黑和纯白的物体,不符合人们的生活经验。因此,我们给背景加上一个浅灰的颜色。即看上去和白色差不多,但又不是纯白,而是稍微偏暗一些的颜色。在默认图层里新建一个矩形,覆盖整个画板,填充颜色设置为#E6E6E6,去掉描边,将默认图层名称改为Backgound,并锁定这个图层,防止以后误操作。做好之后,看上去应该是这样:

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

大奖手机网页版登录[十年信誉] 17

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

大奖手机网页版登录[十年信誉] 18

大奖手机网页版登录[十年信誉] 19

然后,开始画按钮了。我们希望在画面的正中位置附近画一个大小为72×32像素的圆角按钮。所以,新建一个图层,命名为Button。再新建一个矩形,然后把矩形的大小设置为72×31。之所以将矩形的宽度设置为31而非32,是因为接下来要给矩形画一个凹陷效果,这个要额外占用一个像素的高度,故设置为31而非32像素高。

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

由于人眼有视错觉,如果把按钮画在画板的正中心的话,人眼看上去感觉是在正中心偏下一些。因此,为平衡人眼的视错觉,按钮的位置要稍微高出正中心一些。把矩形按钮的正中心设置为(160,209.5)处。将纵座标设置为一个小数的原因是,这样可以做到像素对齐。当然,如果用对齐到像素网格功能也可以做到。这两步完成后,矩形应该是这个位置(为方便查看位置,我把矩形换了一个填充颜色):

大奖手机网页版登录[十年信誉] 20

大奖手机网页版登录[十年信誉] 21

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

接着,给矩形做圆角效果。选中矩形,然后使用「效果」-›「风格化」-›「圆角…」这个命令,给矩形加上一个5像素大小的圆角效果。加上后效果如图:

大奖手机网页版登录[十年信誉] 22

大奖手机网页版登录[十年信誉] 23

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

现在在「外观」面板里,可以看到「圆角」这个效果已经添加进去了。在接下来的步骤中,要始终保持「圆角」在最上方:

大奖手机网页版登录[十年信誉] 24