恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Make Icons With Sketch 图标设计教程
0.0°
2016-10-24 原创文章 经验/观点 举报 8592 39 15 2

30+ 免费图标Sketch源文件下载,加对应的 30+ GIF 绘制教程,10 分钟掌握大部分 Sketch 绘制图标的技巧。

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

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

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

Image title正方形不停地裁剪。

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

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

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

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

Image title添加锚点一拉一调。

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

Image title处理号细节锚点的 radius.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Image titleCtrl D Scale 旋转后互相伤害,相减。

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

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

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

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

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


关于 Make Icons With Sketch 你可能需要知道的


Make Icons With Sketch 系统是我在微博上做为每日更新的一个系列,目的是探索解构用最简单的方式绘制图标,这个过程非常有趣,在微博上也获得了很多的反馈,已达到27万的观看量和380多人参与其中一起绘制。目前这个项目已开源在 Github 链接: https://github.com/allenwong/MakeIconsWithSketch .


如果你有 Sketch 源文件需求,在文章下面就可以获得,另外如想关注未来的这个系列的更新,关注我的微博可能是最快的方式了,谢谢各位,晚安。

更新:2016-10-24

下载
收藏

39人已收藏

Allen_朝辉

微博:@Allen朝辉

  • 9

    作品

  • 181

    粉丝

  • 1

    关注

  • 我的产品设计开发工作の流
  • 【PSD】找回手机 App icon
  • 社交名片 App 界面设计
  • iOS相机 APP UI

    猜你喜欢

      2016-10-24 原创文章 经验/观点 举报 8592 39 15 2

      Make Icons With Sketch 图标设计教程

      0.0°

      你确定要举报Make Icons With Sketch 图标设计教程

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年10月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      15
      39
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录