使用ILLUSTRATOR做UI设计系列教程

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

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

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

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

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

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

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

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

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

　　出现这个情况的原因是描边没有对齐到像素网格，而是被夹在两条像素的正中。并且，这个图形加上描边后，大小超出了预定的 72×32 大小。解决这个问题的办法是，将描边对齐方式设置为「使描边内侧对齐」。设置好后，描边就清晰了。现在的图形和外观面板看上去应该是这样：

上一页  [1] [2] [3]  下一页

Tag:Illustrator教程，Illustrator教程大全，平面设计教程 - Illustrator教程