使用 Adobe Illustrator 做 UI 设计——前言

¡Feliz año nuevo chino! 大家应该都放假了吧,春节假期有什么打算呢?旅游、逛庙会,还就是宅在家里看剧、打游戏?

我在昨天也开始了我的假期生活。自己对假期的打算嘛,可能会出去玩几天。不过在出去玩之外,希望写一些教程类的文章,大多是有关如何使用 Adobe Illustrator 来做 UI 设计的,另外可能会写一些有关于三维创作的文章。本文就作为这一系列教程的开篇吧。

对于做设计而言,工具只是完成作品的手段。因此,其实对于做 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 对于 Retina MacBook Pro 的支持非常好。
  • 对了,AI 在 CS5 就可以做到将矢量图形对齐到像素了,因此不用担心导出出来的切图里,直线没有准确对上像素,因此带来发虚的情况。
  • 如果偶尔要排个版做个册子的话,AI 远比 PS 适合。
  • 相对于 PS,AI 占用系统资源更少一些,并且 AI 稳定性极佳,几乎不会出现做半截软件崩溃的情况。
  • 还有很多一时想不出的优点……

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

接下来我将要写的一些教程,内容主要是针对 AI 在 UI 设计中的一些进阶使用技巧。因此,这些教程可能更适合对于 AI 已经有一定了解的用户来阅读,可能对于 AI 的基本使用功能不会介绍太多。一是因为大多数 AI 的基本功能在 Adobe 的官方文档上都会有介绍:Illustrator Help ;二是出于篇幅和个人时间、精力的限制;三是我相信,学习一个软件、能力最好的办法就是 learn it the hard way,即在一定的压力或困难下完成学习,比如在学习 AI 遇到类似某某某功能找不到这样的困难时,自己通过搜索引擎或官方文档或通过自己尝试,找到解决方案,要比直接问别人效果要好得多。对于 AI 的入门使用和技巧,可以参看知友 @黎敏 写的教程:如何在四小时内学会用 Ai 做 UI? 。将写的一系列教程可以看作是这个教程的进阶补充。

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

还有,为了巩固学习效果,避免看一遍就忘了(俗称狗熊掰棒子)这样的情况,在有些教程文章里,我会布置一些练习或作业,希望有时间尽量能完成一下。作业请寄至这个邮箱:


就这样,新年快乐!

-

附:系列目录:

编辑于 2014-04-19

文章被以下专栏收录

    酷玩意儿、Adobe Illustrator、iOS 开发、Unity 游戏制作、Blender CG 创作、WordPress 及其他。总之,关于数字媒技术和设计方面的一些东西。 可能写的比较杂。所有内容,若不另行说明,均为原创。