课程介绍

详细讲解如何使用Adobe完成图标、界面的绘制和设计。

通过本课程，您可以熟练使用该软件的工具。 内文包含导师的经验和温馨提示。

为人

已经有使用经验、熟悉基本UI设计知识的设计师和产品经理。

软件安装及工具使用说明：

欢迎加入QQ群：与讲师交流学习！ 中文视频教程正在更新中。

Adobe CC 图标的绘制

首先我们来看看Xd是如何绘制图标的。

1、打开Xd，在欢迎界面选择尺寸，输入500*500的尺寸，如下图。

2、目前Xd的功能还很初级。 能够用来绘制图标的工具只有本书第一部分介绍的几个工具和布尔运算工具。 不过，使用这些工具也足以让我们绘制一些漂亮的图标，如下图所示。

3、在画布上使用快捷键E，选择椭圆工具，按下shift键在画板上画一个正圆，如下图所示。

4、按快捷键+D复制图层，然后按住shift+键拖动鼠标将复制的正圆缩小到合适的大小。 可以参考下图中的数值。

5.按快捷键P，使用钢笔工具，将钢笔工具平行移动到小圆的底部，但在大圆的边缘，移动到合适的位置时，软件会自动出现一个蓝色参考线，如下图所示。 （这里的鼠标是笔的形状，因为截图中无法显示鼠标，所以手动添加了一个指针，方便大家看清楚）

6. 按下鼠标，然后单击圆圈下方，然后返回到右侧大圆圈的边缘。 当与第一个锚点平行时，引导线会自动出现，单击，然后在第一个锚点处将其关闭。 在图形上，绘制一个三角形，如下所示。

7. 此时，三角形的底部锚点不以上部圆为中心。 使用钢笔工具单击锚点，然后使用键盘上的左右箭头键移动锚点位置。 如果三角形的左右边与大圆相交而不是相切，则应使用向上和向下箭头键移动锚点，使它们相切。 Xd 目前还很不完善，需要很大的耐心才能完全居中。 您还可以通过查看右侧检查器中每个锚点的坐标来计算它。 具体计算方法如下：

A：检查三角形右端点的X轴值，检查三角形左端点的X轴值。

B：右边的值减去左边的值，除以2，加上左边的值，得到底部锚点的X轴值。

调整后的效果如下图所示。

8、按快捷键V，使用选择工具选择所有图层，然后将图层的填充颜色设置为红色，如下图所示。

9. 选中大圆和小圆图层，然后单击右侧检查器中布尔运算工具中的第二个工具——顶部减去工具。 如下所示。 如果要修改大小圆的相对位置以及小圆的大小，再次单击布尔操作工具取消布尔操作，然后就可以调整图层了。

10. 选择圆形和三角形图层，执行布尔运算工具中的合并图层工具，将两个图层合并。 基本上就是图标画好了，然后从视觉角度来说，取消描边，点击旁边的眼睛图标。 如下所示。

尖端：

1.在绘制图标的时候，图标是不填充的，因为线条更方便我们准确对齐。

2. 为了使图标尽可能准确地对齐，建议在绘制时尽可能放大画布以检查对齐情况。 在 Mac 上，您可以用两根手指在触控板上缩放画布。

3、Xd目前无法设置直线的端点，且直线的端点只能是直角。

4、Xd暂时只能绘制简单的图标，可以通过布尔运算来绘制。 对于更复杂的图标，建议先使用AI或绘制它们，然后再导入Xd。 导入方法稍后介绍。

Adobe CC应用程序界面设计

在绘制界面之前，我们可以点击欢迎界面上UI KITS部分的内容ai图标导入sketch，查看软件自带的一些系统界面，iOS如下图所示。 里面的内容可以编辑、复制使用。

Xd目前的设计功能比较少。 不建议大家使用Xd进行UI界面设计。 界面部分我只讲Xd中非常强大的Grid（重复网格）功能。

1.在欢迎界面中，打开示例文档，复制“-Home”，并将快捷键复制为+C，然后返回到我们创建的图标的文档，使用+V进行粘贴。 如下所示。

2. 选择下面的图层组，然后单击检查器中的“网格”按钮。 可以看到图层组的选中状态由之前的八个锚点的方框变成了下图所示的状态。

3、拖动白色圆角矩形，你会发现图层组会被自动复制，并且不仅可以向下拖动，还可以向右拖动，如下图所示。

4、将鼠标移动到图层组中的间隙处，间隙会变成紫色。 按住鼠标并拖动可调整图层之间间隙的大小，如下图所示。

5. 选择单个图层，例如文本图层，然后调整任意文本图层的样式。 你会发现通过这种方法复制的图层组中的所有文字样式都同时改变了，如下图所示。

6.按住+shift键批量选择图层组中的所有图片，然后找到需要替换的图片，全部选中拖至Xd即可批量替换，如下图。

7、使用快捷键A新建一个画板，然后使用快捷键E绘制正圆，如下图所示。

8.找到图片文件ai图标导入sketch，将其拖入正圆中，你会发现正圆自动被图片填充了。 如下所示。

9. 按快捷键R，使用矩形工具创建一个正方形，填充黄色，并从中拖入图像，如下图所示。

10、选中这两个图层，然后使用快捷键+shift+M或者点击菜单栏的-Mask with Sharp，将正方形设置为剪贴蒙版。 如下所示。

11.双击遮罩层进入编辑模式。 您可以任意调整图层的大小和位置。 调整完成后，点击任意其他区域即可退出编辑，如下图。

12、按快捷键T，输入任意文字，然后使用快捷键+8或者点击菜单栏中的-Path-到Path，将文字转换为轮廓，如下图所示。

尖端：

现阶段，Xd的功能极其有限。 目前Xd可以定位为一款原型设计软件，但如果是UI设计软件的话，还差得有点远。 不过我相信，随着时间的推移，Xd的功能会越来越多，未来可能还会有非常强大的设计功能。

现阶段建议大家使用PS或PS等其他软件来完成界面设计。

辅导老师：黄方文

资深交互设计师，国内最早的用户之一，致力于最新交互软件的推广和研究。 自2007年诞生以来，一直专注于移动交互设计领域的研究。 对移动交互设计领域有着深刻的思考和独特的见解。 提倡全栈设计和工作效率最大化，并在国外多次翻译分享。 尖端的设计文档和交互式说明。 《动与静之美——移动UI与交互效果设计详解》一书即将出版。

想要跟随教程请查看底部阅读原文！ 下一期我们将为大家带来Adobe XD教程的第三个例子，讲解“如何进行交互式原型制作”。

如有侵权请联系删除！