交互学堂
专注分享专业知识

快速用 Sketch 绘制30个图标

长得好看的人都已关注

快速用 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个图标

长按二维码关注我

赞(11) 打赏
未经允许不得转载:IAMUE » 快速用 Sketch 绘制30个图标

交互学院

在线学习交互设计课程1元秒杀Sketch入门课程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏