使用 Adobe XD 建立 Icon

现在网路上可以找到许多免费 Icon ，对于大部分的网页开发已经很足够了，但真的需要自己设计 Icon 时该怎么办呢？这篇来分享一下一个工程师要如何用 Adobe XD (免费)建立一个属于自己的 Icon 。

这篇是从美学概念很差的工程师(小弟我)出发的，所做的只是简易的 favicon 用在部落格上，因此使用到的都是基本简单的技巧而已，设计师大大们可以忽略这篇。

安装 Adobe XD

做一个简单的图标使用免费的 Adobe XD 就很够用了，首先到官网下载。

照着步骤就可以完成安装了。

建立专案

我们只是要建立图示，使用 Custom Size ，调整为 512*512 的大小，并按下图示建立专案。

设定画布

建立完成后会看到一个白色的区块，在 XD 中叫做 artboard ，将名称改为 Icon ，并将右下角的格线开出来，这样一来作业环境就完成了～

工具栏

工具栏上有多种工具可供使用，由上而下依序是：

Select: 选取元素Rectangle: 四边形元素Ellipse: 圆形元素Polygon: 有角形元素Line: 直线元素Pen: 画笔元素Text: 文字元素Artboard: 新增画布Zoom: 放大

元素的部分下一节会提到，先来介绍功能性的工具：Select, Artboard 及 Zoom。

Select 工具

Select 工具(快捷键为 v)，可以选取元素并做修改。

选取后，右方会出现细节的调整工具，这时就可以针对元素作细节的调整。

也可以直接拖拉元素上各边的点做大小的调整。

再往点稍远的地方移动鼠标，可以转动元素。

按住 Shift 做拉移的动作可以保持等比例。

对元素连点两下，可以开启自订模式，以圆形为例：

就可以自由地改变图形，中间是决定边的位置，左右两个点是调整弧度。

Rectangle, Ellispe, Polygon, Line, Pen 都可以使用此功能任意的改变图形样貌。

Artboard

此工具为增加一个画布，当你有不只一个 Icon 想要在同个专案下设计的话可以按此工具增加一块画布。

可以自己拖拉一个自订大小的画布(左上)，也可以在空白处点一下产生与原本相同的画布(右下)。

Zoom

局部放大，通常都用滚轮达成此功能。

使用元素

元素的种类有 Rectangle, Ellipse, Polygon, Line, Pen, Text，接下来会介绍各别的特殊功能，一般常用的功能都满直觉的就不浪费篇幅了。

Rectangle

Rectangle 画出四边形元素，按着 Shift 拉的话可以画出正方形。

拉动内部四个虚点可以改变角的弧度：

按住 option 拖拉虚点可以只拉单角：

如果想要直接指定各角度的话可以在设定栏的下方个别调整：

Ellipse

Ellipse 画出圆形，按着 Shift 拉的话可以画出正圆形。

Polygon

画出多边形，一开始拉出来的会是三角形，按着 Shift 拉的话可以画出正三角形。

拉动内部的虚点可以改变角的弧度：

拉动边上的实点，可以产生对应角数量的星形。

设定栏上可以调整角的数量也可以做角度及星形内缩率的调整：

Line

Line 画出直线，按着 Shift 拉的话可以画出水平, 垂直及 45 度角的直线。

Pen

Pen 可以画出随意的线条，点一下为线的起始，直到按下 esc 结束或连回起始点形成图形。

在画线时，单指拉移决定线段，三指拉移会拉出弧线：

Line 及 Pen 在自订模式下都可以改变任一地方的弧度，因此可以先画直线，在做细部的弧度调整。

Text

Text 可以插入字串，对字串点两下可以在设定栏中设定字体及配置。

通用功能

元素中有些共通的设定，例如颜色或是阴影的调整，会在这里介绍一下。

Color

颜色的调整可以直接使用调色盘，或是在画面上看到适合的颜色可以直接使用右方的选择器取用颜色。

Shadow

可以在设定栏上设定阴影：

储存常用的颜色, 字型, 元件

接着我们可以放些常用颜色, 字型, 元件到 ASSETS 中，使我们在使用的时候可以不用在重新调整这些设定。

使用的方法如下:

点击目标元件在右方 ASSETS 中选择想加的项目按右方的加号

已经加过或是不适配的(例如字型只会在 Text 选中时才能加入)，加号会是暗掉的状态。

另外使用同个 asset 产生的元件，只要一个做修改，其他的都会跟着修改。

产生更多的图形

XD 他已经提供了基本的图形：四边形，圆形及三角形，足够应付大部分的场境，但还是有一些图形会需要自己做，下面介绍几个较常用的图形。

扇形

将正方形的其中一角弧度拉到最大：

半圆形

将一个圆形及一个四边形成别，使用交集功能，就可以产生半圆形：

输出

上面讲要如何使用各类的工具，现在花费了千辛万苦终于完成了，剩下最后的输出过程，只要按下 Export 就大功告成了！

可以选择目标的格式：

结论

最近在设计部落格的 Icon ，花了一些时间研究 XD 的用法，目前只有设计 Icon 的时候使用到 XD ，但 XD 的主要功能其实是设计 UX 的，如果之后有机会用到的话，再来分享这部分。

参考资料

Smashing Magazine: How To Create Icons In Adobe XD

本文同步发表于 LimitlessPing