快速用 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

相关推荐

  • 3000字,详细梳理用户体验要素之核心五要素

    网站看起来如何,它怎样进行运转,它让你执行什么。这些决策都是互相依赖的,它告知并影响用户体验的各个方面。当产品发展到一定阶段,系统化的用户体验设计对于产品在激烈的商业竞争中保持核心竞争力至关重要。比如最近很火的共享单车,开锁是否方便这样一个小细节直接决定着用户选择,用户体验就成为了商机。这里与大家分享用户体验要素的核心五要素。要讨论的事今天跟大家分享的是用户体验的五个核心要素。虽然用户体验要素远不止这五个,但作为梳理一个产品的用户体验开...

    2018-03-20
  • 基于Axure的移动端APP产品设计规范

    文章结构:① 全局元素与控件设计规范 ② 全局注释规范 ③ 一些基本的产品设计原则一、全局控件元素设计规范我们经常会看到很多产品都有一个标志颜色,来增加产品的辨识度,例如淘宝的橙色,小黄车的黄色等。在产品设计过程中,为了保持视觉的统一性,通常会有一套配色方案,配色方案确定了产品的主色调和辅色调,所有的控件和元素都应用这一套配色来设计。除了配色还有,还有字体元素,按钮元素,以及其他控件元素等,产品设计开始就应该定义好这些基本规范,不仅能保...

    2018-03-04
  • 手机系统苹果、安卓交互设计的通用原则总结!

    :请点上面免费订阅系统的设计从用户角度来说,交互设计是一种如何让产品更容易用,让用户更愉悦地使用产品。它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解用户心理和行为特点,并用通用的交互能满足用户操作的预期。下面介绍一下在交互设计中一些比较通用的设计原则,大家可以参考一下。交互1、就近原则:将同一类的功能都组织放在页面相同模块中。2、容错原则:必须允许用户有犯错的操作,给予用户后悔的操作机会。3、帮助原则:为用户提...

    2018-02-16
  • Facebook的用户体验评判规则

    Facebook的产品设计五维情感精准定位——设计对受众定位清晰,符合该设计目标用户群的使用体验。亲和力——所有交互元素的设计上,用户对信息沟通顺畅,感觉似有人一般的亲和感。分享——承载对Facebook连接、自由、生活的文化认同。留恋度——给人超出想象的空间,让人留恋往返,对产品期待更多,得到二次访问。易用反馈及时——在交互过程中,用户的操作能够在屏幕上及时得到反馈效果,帮助用户提高效率。方位清晰——清晰的知道自己在那里,退路在那里,...

    2018-03-25
  • 深入智能商业用户体验 —— 艺土咨询(ETU)

    4月10日下午,本协会会长王日华和副秘书长王索飞等一行前往位于长宁区凯旋路166号上的本协会理事单位上海艺土界面设计有限公司走访,该公司董事长林钦、资深用户体验设计师梁雯琦热情接待了王会长一行。在该公司的会议室,林总首先用PPT形式向王会长一行简单介绍了艺土公司的发展情况。她说,艺土(ETU)自2004年成立以来,深耕用户体验行业14载,通过与160多个知名企业进行760多个项目的深度合作探讨,帮助企业通过洞察市场价值、理解用户价值需求...

    2018-04-12
  • 线框仔,你知道交互设计在未来会多火?

    对你而言,它可能还是未知数。这是康石石撰写本文的首要初衷,我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计师是给APP动效的3.交互设计师都月薪上万,且薪资上涨空间高,酬劳丰厚。其它就不清楚了。。。以下康石石引用《女神进化论》创始人--寺主人在知乎关于交互设计师目前生存现状的一段描述,供大家了解行业目前基本情况:月薪<10k俗称“线框仔”,出没于小...

    2018-04-17
  • 用户体验设计中的功能动画

    一位优秀的用户体验设计师能够轻松地解释设计概念中每个决策背后的逻辑。包括信息架构、页面内容结构、流程及假说。动画迟早会被融入线框图中,但在做设计决策或解释它们的时候,就会略显尴尬,因为理由基本上就是“这很酷啊!”或者“这很流行”“多有意思”,这些理由使得设计一开始就毫无说服力。在考虑设计时,我们应该更加深入地研究动画,就像解释其他设计元素那样,有依据地定义动画并解释其目的。→什么是功能动画?功能动画是一种微妙的动画,我们将它嵌入到用户界...

    2018-03-22
  • 我不知道的“用户体验”

    在梁宁《产品思维30讲》的“用户体验”模块共包含5讲,分别是:用户体验的五个层次怎样绘制用户体验地图服务蓝图的核心要素:峰值、终值上瘾机制:用户激励系统名字是你的文化资产作为一名从未系统学习过用户体验和产品设计的PM来说,这个模块可谓干货多多(具体内容请详见下面的思维导图)。先打好理论基础,从用户/人性的角度出发将用户体验分为五个层次;然后抛出两个方法论,一是绘制用户体验地图用讲故事的形式获取用户情绪曲线;二是考虑到资源和成本控制的约束...

    2018-02-20
  • 在WEB/UI的交互设计中运用格式塔心理学理论

    UI或UX分析需求主要是以人机交互界面为主,而这个需求不仅仅是一些设计、视觉使用体验,在这里体验当中,我们可适当运用一些心理学,比如格式塔理论就是一个很好的分析法。[图片]格式塔学派是心理学重要流派之一,兴起于20世纪初的德国,又称为完形心理学。由马科斯·韦特墨(1880-194

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

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

    2018-03-15