小伙伴们大家好

之前给大家介绍了一下

交互设计和adobe的新成员XD

今天带大家打开XD

试着使用它做一个关闭的按钮

1

首先我们打开XD

新建一个iPhone6/7/8大小的画板

2

使用椭圆工具

和PS、AI一样

按住Shift键不松

鼠标左键拖动出一个正圆

3

选中这个圆

按Ctrl+D复制一份

画面上没有变

但是在图层面板能看到多了一个圆

4

我们选中复制得到的这个圆

按住键盘上的Ctrl+Shift不松

鼠标左键拖动一个锚点将它中心等比缩放一些

5

用同样的步骤再做两个圆

6

我们选中内部的两个圆

在保证他们都有任意填充色（包括白色）的状态下

点击减去

此时这两个圆就合并成了一个圆环

我们给他添加一个填色就能看出来

7

好将之前做的东西放一边

接着我们使用钢笔工具

在空着的地方按住Shift键绘制一个45°的斜线

接着依然按住Shift向上绘制一跟90°的直线

根据职能辅助线我们让这个锚点和初始点齐平

接着连接上初始点

8

使用选择工具选中这个等腰直角三角形

按住Shift键将它旋转为如图状态

9

将这个三角形拖动到如图位置

让他遮盖住圆环的一些部分

10

然后我们按住Shift同时选中三角形和圆环

再次使用减去

11

使用矩形工具在如图位置绘制一个矩形

为它填充与圆环相同的颜色

并取消他们的描边

这里我将外面的圆也给与了填色

并取消了描边

颜色大家都可以按照自己的喜好选择

到这里形状部分都完成了

我们来给这个按钮添加一些阴影

12

最外圈的圆添加的参数如图

中圈的阴影

内部图标的阴影

完成

更多优秀设计教程尽在：
https://study.163.com/course/courseMain.htm?courseId=1006084367&share=2&shareId=967647