首个Adobe XD教程丨如何用Adobe Experience Design (XD)快速设计图标
提示：阅读本文前建议先从《码农与产品经理看过来-教你用Adobe Xd轻松做原型设计^_^》文章入手，会更加学度的掌握此建模神器的精髓http://www.zoomla.cn/blog/techs/3080.shtml
逐浪小子注：面向云，面向未来。
Adobe Experience Design CC（简称adobe XD)是基于矢量用于WEB、移动应用设计和原型的用户体验设计的工具。集线框图，视觉设计，交互设计，原型制作，预览和共享轻松切换于一体的一个强大的工具。
如果您认为这Adobe XD仅仅是一款原型设计工具，那就太幼稚了，朴素的原教旨主义者们，信奉简洁就是一切，其实也可以用它进行诸如LOGO创作等经验，下面我们来作一次讲解。
首先来看看Xd如何绘制一个图标。
1、打开Xd，在欢迎界面选择Custom size，输入500*500尺寸，如下图所示。
2、目前Xd的功能还非常简陋，绘制图标能用的工具只有本教材第一部分中所介绍到的几款工具以及布尔运算工具，但利用这些工具也可以足够我们绘制一些漂亮的图标，如下图所示。
3、在画布上使用快捷键E，选择椭圆工具，按下shift键在画板上绘制一个正圆，如下图所示
4、快捷键command+D，复制该图层，然后按住shift+option键，并拖动鼠标，缩小复制的正圆，缩小到合适的尺寸即可，可以参考下图中的数值。
5、快捷键P，使用钢笔工具，将钢笔工具移动到和小圆底部平行，但是在大圆的边缘，当移动到合适位置软件自动会出现一条蓝色参考线，如下图所示。（此处鼠标是钢笔的造型，因为截图无法显示鼠标，为了让大家看清手动添加了一个指针）
6、按下鼠标，然后在圆的下方单击，然后回到右侧大圆边缘，当和第一个锚点平行时会自动出参考线，单击，然后再在第一个锚点处闭合图形，绘制一个三角形，如下图所示。
7、此时三角形的最底部的锚点并未和上面的圆居中，用钢笔工具单击该锚点，然后使用键盘上的左右方向键移动锚点位置。若三角形的左右两条边和大圆有相交而非相切，则应使用上下方向键移动锚点位置让其相切。Xd目前功能非常不完善，要完全居中需要非常大的耐心。大家也可以看右侧检查器中的各锚点的坐标去计算出来。具体的计算方法如下：
A：查看三角形右边端点的X轴数值，查看三角形左边端点的X轴数值。
B：用右边的数值减去左边的数值，除以2，再加上左边的数值，即得出最下方的锚点的X轴数值。
调整好后效果如下图所示。
8、快捷键V，使用选择工具框选全部图层，然后将图层的填充色设置为红色，如下图所示。
9、选择大圆和小圆图层，单击右侧检查器中布尔运算工具中的第二个工具——减掉顶层工具。如下图所示。若要对大小圆的相对位置和小圆尺寸进行修改，再次单击布尔运算工具即可取消布尔运算，此时即可调整图层。
10、选择圆圈和三角形图层，执行布尔运算工具中的合并图层工具合并两个图层。基本上图标绘制完成，然后从视觉上考虑，取消描边，单击Border旁边的眼睛图标即可。如下图所示。
TIPS：
1、在绘制图标时没有给图标填充，是因为线条更方便我们精确对齐。
2、要得到尽可能精确对齐的图标，建议绘制时尽可能放大画布查看对齐情况，Mac上可以双指缩放触控板对画布进行缩放。
3、Xd目前无法对线条的端点进行设置，线条的端点只能是直角。
4、Xd暂时只能绘制可以通过布尔运算得出的简单图标，更复杂的图标还是建议使用AI或者Sketch绘制后再导入Xd，关于导入方法后文会介绍。
注：更多图标教程可以查看茂趣之前分享的：PS画一个可爱的小鸟图标教程、【UI教程】人类史上最简单的图标教程第一课、【UI教程】人类史上最简单的图标教程第二课、【UI教程】史上最简单的图标教程第7课
Adobe Experience Design CC 应用界面的设计
在进行界面绘制之前，我们可以在欢迎界面单击UI KITS部分的内容，查看软件自带的一些系统界面，如下图所示是iOS的内容。里面的内容均可编辑和复制使用。
Xd暂时设计方面的功能相对较少，不是特别建议大家全部使用Xd进行UI界面的设计，在界面部分我只讲一下Xd中非常强大的Repeat Grid（重复格）功能。
1、在欢迎界面中，打开范例文档，复制其中“Campvibes - Home”，复制快捷键为command+C，然后回到我们所创建图标的文档，使用command+V进行粘贴。如下图所示。
2、选中LATEST ADVENTURES下方的图层组，单击检查器中的Repeat Grid按钮，可以看到图层组的选中状态由之前的八个锚点的框变为了如下图所示状态。
3、拖动白色的圆角矩形，即可发现会自动复制该图层组，且不仅可以向下拖动，也可以向右拖动，如下图所示。
4、将鼠标移动到图层组的间隙上间隙会变成紫色，按下鼠标并拖动即可调整图层间间隔大小，如下图所示。
5、选中单个图层，如文字图层，调整任意文字图层的样式，即可发现通过此方法复制的图层组中所有的文字样式都已经同步进行变更，如下图所示。
6、按住command+shift键，批量选择图层组中所有的图片，然后从Finder中找到需要替换的图片，全选后拖动到Xd中，即可批量进行替换，如下图所示。
7、使用快捷键A，新建一个画板，然后快捷键E，绘制一个正圆，如下图所示。
8、从Finder中找到图片文件，拖动到正圆中，即可发现该正圆自动用该图片进行填充。如下图所示。
9、快捷键R，使用矩形工具创建一个正方形，填充为黄色，并从Finder中拖入一张图片，如下图所示。
10、选中这两个图层，然后使用快捷键command+shift+M或单击菜单栏中Object-Mask with sharp，即可将该正方形设置为剪切蒙版。如下图所示。
11、对该蒙版图层双击，即可进入编辑模式，可以任意调整图层的尺寸和位置，调整完成后鼠标点击任意其他区域退出编辑，如下图所示。
12、快捷键T，输入任意文字，然后使用快捷键command+8或单击菜单栏中Object-Path-Convert to Path，即可将该文本转变为轮廓，如下图所示。
TIPS：
现阶段Xd的功能极为有限，目前来看可以将Xd定位于原型图设计软件，但是如果是UI设计软件还差的有点远。不过相信随着时间的推移，Xd的功能也一定会越来越多，可能后续还是会具备非常强大的设计功能。
首个Adobe XD教程丨如何用Adobe Experience Design (XD)快速设计图标相关推荐
- 秀米点一点教程丨如何用秀米SVG做出图文先缩后展的效果
秀米点一点教程丨如何用秀米SVG制作出清华秋景推送的效果
- ai怎么画路线_『AI教程』如何用Illustrator从零开始绘制一枚线性图标
今天的教程除了一枚线性图标的操作演示,更重要的是帮同学们领会UI设计师必备的化繁为简,抽丝剥茧的能力.初学图标绘制的同学,绝对需要里边提到的这个方法~ 几何 对于初学者来说,我们可以这样理解,任何东西 ...
- Adobe Experience Design是什么软件？xd mac版下载安装教程 XD 2021发布
Adobe Experience Design 2021 for Mac是由Adobe公司发布的一款原型设计工具,Adobe XD是一款专注于一站式UX/UI设计平台,在这款产品上面用户可以进行移动应 ...
- unity c 语言教程,程序丨Unity教程：如何用最简单的方式创建Simplex噪声？
原标题:程序丨Unity教程:如何用最简单的方式创建Simplex噪声? 翻译:刘甜甜(青悠) 审校:周伟杰 (Senser) 在本篇教程中,你将学会创建Value噪声与Perlin噪声的替代噪声,即 ...
- xd使用技巧_20个最佳的Adobe XD教程
随着时间的推移,Adobe软件公司提供了诸如Photoshop,Illustrator,InDesign等许多设计软件.Adobe XD是你可以使用的另一个优秀的设计软件,而这些Adobe XD教程将 ...
- 数据清理丨如何用机构代码唯一识别企业（科普篇）
温馨提示,本文较长,可收藏阅读. 查看原文:[数据seminar]数据清理丨如何用机构代码唯一识别企业(科普篇) 推荐语:当今的经济学圈,数据,特别是微观数据已然成为决定研究"成败" ...
- 切割图形_模型教程丨切割机使用——结合实例
点击这里查看上一期教程哦~ 半平米工坊:模型教程丨切割机操作手册zhuanlan.zhihu.com 不知道大家看了上期的切割教程有没有去实际操作呢~有没有发现一些切割时不知道该如何处理的小问题~ ...
- 【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
- 系列教程丨用 Docker 探索开源软件 —— PostgreSQL（一）
出品丨Docker公司(ID:docker-cn) 编译丨小东 每周一.三.五,与您不见不散! Docker 的一大优点是可以让您快速使用它来试用应用程序,而无需直接在开发人员的计算机上安装它.如果您 ...
最新文章
- onWindowFocusChanged重要作用(得到/失去焦点call) 、
- js 点击button切换颜色_ThingJS 和three.js开发示例对比，让开发早点下班回家！3D 可视化...
- python 示例_Python TextCalendar类别| pryear（）方法与示例
- Sqli-labs less 40
- Spring+SpringMVC+MyBatis深入学习及搭建(九)——MyBatis和Spring整合
- [svc]容器网络学习索引及网络监控
- linux如果时间等于22点,Linux下ntpdate时间同步
- thinkphp出现此页面不能重定向
- 酒店服务机器人或被用于长期偷窥旅客
- oracle数据库脱敏代码
- java8分组求和_java8 实现分组求和，平均等数据统计
- 无版权高清图片素材库pixabay
- 双击jar包无法运行
- 安卓虚拟摄像头_iPhone 的“第四颗摄像头”位置，为什么给了激光雷达？
- 华信短信平台接口文档
- 点星PBX(DotAsterisk)外线呼入到离线坐席(sip分机未注册)时，如何播放语音提示外线客户坐席不在线
- 解决Keras的failed to create cublas handle: CUBLAS_STATUS_ALLOC_FAILED、attempting to perform BLAS operat
- Python-Regression
- 深入探究linux_深入探究GraphQL查询
- Windows安装Redis5.x