Illustrator实例教程：绘制知乎样式的按钮解析多重填充

236 阅读 0 评论 156 点赞

我是靠谱客的博主受伤月光，最近开发中收集的这篇文章主要介绍Illustrator实例教程：绘制知乎样式的按钮解析多重填充，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

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

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

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

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

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

由于AI有丰富的矢量效果(类似PS的滤镜和图层样式)，因此AI退可做扁平，进可做拟物。

下面这两张图就是用AI绘制的，完全没有用到除AI之外的其他软件：

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

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

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

AI对于RetinaMacBookPro的支持非常好。

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

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

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

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

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

因此，这些教程可能更适合对于AI已经有一定了解的用户来阅读，可能对于AI的基本使用功能不会介绍太多。

一是因为大多数AI的基本功能在Adobe的官方文档上都会有介绍：IllustratorHelp;

二是出于篇幅和个人时间、精力的限制;三是我相信，学习一个软件、能力最好的办法就是learnitthehardway，即在一定的压力或困难下完成学习，比如在学习AI遇到类似某某某功能找不到这样的困难时，自己通过搜索引擎或官方文档或通过自己尝试，找到解决方案，要比直接问别人效果要好得多。

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

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

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

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

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

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

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

一般来说，做UI设计、海报设计什么的，如果不是特殊的需要，最好不要使用纯黑、纯白、纯红(#FF0000)这样的颜色。一是因为纯黑与纯白这样的颜色之间造成的对比让人感觉很不舒服，二是自然界几乎没有看上去纯黑和纯白的物体，不符合人们的生活经验。

因此，我们给背景加上一个浅灰的颜色。即看上去和白色差不多，但又不是纯白，而是稍微偏暗一些的颜色。在默认图层里新建一个矩形，覆盖整个画板，填充颜色设置为#E6E6E6，去掉描边，将默认图层名称改为Backgound，并锁定这个图层，防止以后误操作。做好之后，看上去应该是这样:

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

由于人眼有视错觉，如果把按钮画在画板的正中心的话，人眼看上去感觉是在正中心偏下一些。因此，为平衡人眼的视错觉，按钮的位置要稍微高出正中心一些。

把矩形按钮的正中心设置为(160，209.5)处。将纵座标设置为一个小数的原因是，这样可以做到像素对齐。当然，如果用对齐到像素网格功能也可以做到。这两步完成后，矩形应该是这个位置(为方便查看位置，我把矩形换了一个填充颜色)：

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

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

再给按钮换一个底色，颜色是#8CE01E。接下来，要进入重头戏了。点击「外观」面板下的「添加新填色」按钮(即“fx”按钮左边的那个)，再新建一个填色层，颜色为纯白到纯黑的渐变，方向是从上到下，透明度为20%，混合模式为「明度」。完成后画板和外观面板看起来应该类似这样：

这样，可以看到，通过一个底色填色层，和一个明暗渐变填色层，我们成功地做出了色彩明暗渐变效果。这，就是多重填充的应用之一。另外再解释一下，混合模式选择「明度」的意思是，取下层对象的色相和饱和度，取上层对象的明度(亮度)作为最终颜色输出。因此，这样可以做出一个颜色只在明度上的渐变，而不会影响色相和饱和度。

给矩形的描边设置为一个像素，颜色为#7F7F7F描边。这样，按钮的基本描边就做出来了。不过却有一个问题：打开像素预览，会发现描边是虚的：