正经干货:用XD轻松制作关闭按钮

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
6164 0 4 2018-10-26

新的交互神器,还不把玩一下?

小伙伴们大家好

之前给大家介绍了一下

交互设计和adobe的新成员XD

今天带大家打开XD

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

1

首先我们打开XD

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

2

使用椭圆工具

和PS、AI一样

按住Shift键不松

鼠标左键拖动出一个正圆Image title

3

选中这个圆

按Ctrl+D复制一份Image title

画面上没有变

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

4

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

按住键盘上的Ctrl+Shift不松

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

5

用同样的步骤再做两个圆Image titleImage title

6

我们选中内部的两个圆Image title

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

点击减去Image title

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

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

7

好将之前做的东西放一边

接着我们使用钢笔工具

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

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

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

接着连接上初始点Image title

8

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

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

9

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

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

10

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

再次使用减去Image title

11

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

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

并取消他们的描边

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

并取消了描边Image title

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

到这里形状部分都完成了

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

12

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

中圈的阴影Image title

内部图标的阴影Image title

完成Image titleImage title


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

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票