快速用 Sketch 绘制30个图标

长得好看的人都已关注操作分解:一个正方形,两个同等直径的圆形即可完成,最后旋转多选矩形 Edit 后可以一起改圆角正方形不停地裁剪一个椭圆加长方形,复制即可圆角矩形加两个不同大小的圆合成小矩形旋转角度,最后拉下 Radius 即可选中锚点删掉,调下倾斜度,复制合成添加锚点一拉一调添加左右两个锚点的时候放大比较容易处理号细节锚点的 radius合成后记得 Flatten 下,就可以选择锚点加 radius添加钢笔锚点,并且 Show Gr...

文章目录[隐藏]

长得好看的人都已关注

快速用 Sketch 绘制30个图标



操作分解:

快速用 Sketch 绘制30个图标

一个正方形,两个同等直径的圆形即可完成,最后旋转


快速用 Sketch 绘制30个图标

多选矩形 Edit 后可以一起改圆角


快速用 Sketch 绘制30个图标

正方形不停地裁剪


快速用 Sketch 绘制30个图标

一个椭圆加长方形,复制即可


快速用 Sketch 绘制30个图标

圆角矩形加两个不同大小的圆合成


快速用 Sketch 绘制30个图标

小矩形旋转角度,最后拉下 Radius 即可


快速用 Sketch 绘制30个图标

选中锚点删掉,调下倾斜度,复制合成


快速用 Sketch 绘制30个图标

添加锚点一拉一调



快速用 Sketch 绘制30个图标

添加左右两个锚点的时候放大比较容易


快速用 Sketch 绘制30个图标

处理号细节锚点的 radius


快速用 Sketch 绘制30个图标

合成后记得 Flatten 下,就可以选择锚点加 radius



快速用 Sketch 绘制30个图标

添加钢笔锚点,并且 Show Grid View 做校对


快速用 Sketch 绘制30个图标

直接用 Layer - Paths - Scissors 剪掉圆的一半


快速用 Sketch 绘制30个图标

用四分之一正方形去Layer - Paths - Close Path 背后的圆


快速用 Sketch 绘制30个图标

Lock 上半部用「圆加同等矩形合成」的方式实现


快速用 Sketch 绘制30个图标

找到合适的锚点下拉一下就可以


快速用 Sketch 绘制30个图标

Ctrl D 上面的三角形并且 Scale 放大 120%与背后的矩形相减


快速用 Sketch 绘制30个图标

添加中间的锚点,如果觉得没有对准,可以拖动锚点感受下对准时的那个「钝钝」的感觉


快速用 Sketch 绘制30个图标

底部先做全圆角(Radius 拉到底)再做 Transform


快速用 Sketch 绘制30个图标

中间镂空的白色其实只是填充了白色为了校准,最后可以和背后的部分相减掉


快速用 Sketch 绘制30个图标

合成头部,Ctrl D 再 Scale 后和上半身相减


快速用 Sketch 绘制30个图标

先用两个正方形做裁剪,然后合成后向右拉伸,这样才会严谨


快速用 Sketch 绘制30个图标

星和圆合成后就可以在右侧调多边形的边数了,最后圆角一下


快速用 Sketch 绘制30个图标

类似 iOS 系统的齿轮,不停的复制旋转


快速用 Sketch 绘制30个图标

用 Paths - Scissors 剪掉形成耳机的连接部分,最后 Group 下就行


快速用 Sketch 绘制30个图标

都是 Ctrl D 原来的图形 Scale 后与背后的图像相见减的原理



快速用 Sketch 绘制30个图标

没什么特别的,如果太细的不太好校准的,Command + 放大画布


快速用 Sketch 绘制30个图标

用两个正方形相减,然后 Edit 三个角拉 Radius 到底,其他镜像下即可


快速用 Sketch 绘制30个图标

尾翼直接 Ctrl D 了机翼,Scale 缩小了而已,最后90度旋转


快速用 Sketch 绘制30个图标

用正方形旋转取得菱形,Shirt 左右箭头键可以以 10px 单位移动,方便很多



快速用 Sketch 绘制30个图标

Show Grid 模式,以一个长方形添加对应的锚点,并且移动到适合比例的位置


快速用 Sketch 绘制30个图标

Ctrl D Scale 旋转后互相伤害,相减



快速用 Sketch 绘制30个图标

跟 Home 类似,那天晚上在打一个很长的电话:)


快速用 Sketch 绘制30个图标

选中椭圆的两边锚点,Straight 下就可以


快速用 Sketch 绘制30个图标

做类似 45度角的 Icon,可以先在水平或者垂直放向上先做,最后旋转即可


快速用 Sketch 绘制30个图标

看过去有点复杂,其实还是用 Ctrl D 再 Scale 得到最后的结果,你会了吧


快速用 Sketch 绘制30个图标

所有有关箭头 Icon 都可以在 45度方向先做出来

快速用 Sketch 绘制30个图标

快速用 Sketch 绘制30个图标

长按二维码关注我

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36360/

(0)
交互精选交互精选
上一篇 2018-04-09
下一篇 2018-04-09

相关推荐

  • 智能产品的交互设计,不做到这样可不行

    我们终将以自然的方式与机器交流。在2012年圣丹斯独立电影节上,影片《机器人与弗兰克》赢得特别奖,该片讲述机器人Robot照顾患有老年痴呆症弗兰克的故事。在2017年AI大热之年,人们能否像电影里的弗兰克那样,以人对人的方式与机器交流,这在人机交互学科里定义为“人机自然交互”。何为自然交互?简而言之就是以日常交流方式与计算机进行交互。何为日常交流方式?就是人们通过语音、肢体、手势、眼神、表情等形式进行交流互动。人机交互正迈上新台阶人机交...

    2018-02-07
  • iPhone十年,移动用户体验领域已经到达成熟阶段

    译者:Daisy全文共 3904 字 7 图,阅读需要 8 分钟———— / BEGIN / ————最开始的iPhone于2007年6月发布。2008年末,当我们开始研究第一版移动报告时,大多数人还是在使用有着最极其糟糕的用户体验的原始移动设备。在那个时候,相较于体验糟糕的移动设备和移动网站,任何稍微像样的产品都会带给用户愉悦的体验。三年前,移动报告第三版出来时,我们对移动端可用性做了严密的评估。我们很高兴移动端可用性报告不再是一种矛...

    2018-04-11
  • 进入第四个模块——用户体验。

    之前三个模块,我们希望解决的问题是你能够情绪纠偏、认知纠偏,不再只从原生感受上来看问题。接着我们讲的是建设系统的能力的用户体验。厚积薄发,“厚积”是系统能力,“薄发”是表面的呈现,就是用户体验。同维度竞争的时候,用户体验更是最核心的竞争力。用户体验第一课用户体验的五层要素《用户体验要素》这本书里提到:“用户体验的要素,来自5个层次的层层选择与叠加建设。”这五层分别是:感知层;角色框架层;资源结构层;能力圈范围层;战略存在层。1、最核心的...

    2018-02-05
  • 【交互体验】让你事半功倍的交互体验自查清单

    点击上方“蓝字”可以订阅哦!小编推荐:刚画完的原型自我感觉良好,当到了评审的时候发现在用户体验槽点非常的多。如果你遇到上面的情景,那么这篇文章对你绝对有用。事不宜迟,请看下文。体验清单起因去年底看朋友出国前用‘穷游清单’给自己列清单,她说列的清单可以帮她在出行前检查一下是否有遗漏东西,避免因遗漏东西使整个旅行变得很糟。既然旅游清单可以使旅游提前避免问题发生,是不是我们在工作中也可以采用这种方式使自己的产出物交付前保证万无一失。在平时设计...

    2018-01-30
  • 每个用户体验设计师都要懂的UX移情图

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cnEmpathy,同理心,或者说移情,是UX设计师在为产品进行用户体验设计的时候,最强的能力和工具之一。移情是人类情绪和心智中最重要的功能之一,在很多时候,它是产生情感共鸣和理解的基石,它也是改善用户体验的重要途径。通常我们所说的换位思考,就是移情。借助移情,设计师站在用户的角度来看待问题,了解用户的需求,理解用户的心态,这是改善用户体验的第一步。在...

    2018-02-01
  • UX小白 | 不谈它?算什么用户体验设计?

    这其实只是个引你进来的标题,我今天真正想说的事情其实是它——你在做一款产品的时候考虑过它的无障碍性(Accessibility)吗?无障碍性(Accessibility):在图形交互界面为基础的交互方式中,无障碍性也往往被称为可访问性。“无障碍性(accessibility)意味着产品设计应用时应考虑到,无论是因为年龄、事故或疾病而有认知、感官或者移动障碍的人,还是没有此类障碍的人,都应能够有效使用这个设计。”——《About Face...

    2018-01-31
  • 《用户体验可视化指南》视频讲书(1)

    我们选择了人民邮电出版社2018年出版的《用户体验可视化指南》作为第一本,带着大家啃书。原因是这本书真的非 常 好,好到可以成为用户体验设计和研究领域的大辞典了。作者引经据典,却因为篇幅受限,很多没有详细展开。不知前因后果的读者,因此会错过很多有意思的观点。所以UXREN为你详细拆解《用户体验可视化指南》,每次10-20分钟,3首歌曲的时间,日积月累,透彻理解经典书籍。第1期: 前言《用户体验可视化》前言部分,介绍了为什么会提出共线图(...

    2018-03-27
  • 结合实际案例,一篇看懂用户体验五个层次

    ♝点击上方“交互设计学堂”关注我们,送电子书看过了很多描述用户体验五个层次的文章,但感觉很多都浅尝而止,今天我特地结合了十来个案例对用户体验进行了一次相对全面的阐述,希望大家在阅读时也能够同样寻找相关产品进行比照和论证,想必会更有收获。概要用户体验设计就是“以用户为中心的设计”,即创造“每件事都按照正确的方式在工作”的用户体验,让用户宾至如归,就像《Don’t make me think》里提到的“这会让用户觉得自己更聪明,更能把握全局...

    2018-04-10
  • 【干货】2018年APP交互设计趋势

    全感官体验人有五感,强化体验记忆的最有效方式就是五感相结合。看见、听见信息已成为体验常态,而更真切的感知信息是用户体验升级的客观诉求,全感官体验能更好的打造“身临其境的沉浸式”体验印象。2018年我们将会看到更多以虚拟+实体组合的全感官体验方式,用户在交互过程中获取更多维的与真实场景匹配的信息反馈(听觉、嗅觉、触觉等),加深对信息的理解和体验记忆。运用案例全感官体验目前在游戏领域有了较为广泛的探索。《星舰指挥官》一改沿用十几年的鼠标,键...

    2018-02-18
  • 用Axure写PRD:虎扑app产品需求文档(附下载链接)

    需求文档是产品经理的基本功,产品小白入门的必经之路,但对于小白来说,没经历过一个完整的项目,自然也没有产品可以写,所以倒推产品是一个练手的好方法。Axure也是产品经理的基本功,画原型图的利器,但axure不止是能画原型,还可以用来写prd,正如臻龙大神说的做这样一个一体化产品需求文档出于的目的就是传统的方式产生的文件过多,过于杂乱,不易整理和回溯。如果把每个版本的内容都整理在一个html中,这样无论是团队协作还是文档回溯都能大大提高效...

    2018-03-15