开源和开放设计 - Make Icons Witch Sketch

96
Allen_朝辉
0.5 2016.10.24 02:24* 字数 961

Make Icons With Sketch

启动原因

因为不太擅长画 Icon, 所以才决定要试一试能不能去解构图标的图形,同时大胆公开自己的练习作品也是我一贯的风格

#MakeIcons 的灵感来自美国 San Antonio的 Icon Designer - Kyle Adams, 他一直以来坚持在用 Adobe Illustrator 画 Icon 同步在 Youtube和 Instagram,这给了我一个「用Sketch 画 Icon 并且输出 GIF」的启发,大部分设计教程是视频或长篇文章,可能很少有人真正认真去看,而GIF 这个形式可以说是最佳的「碎片」教程载体,在你正常的刷微博刷推(推荐:浪潮 VPN for iOS)的过程中就可以点开来看一下,不费时间还能瞬间GET✔️。后来因为我也逐渐走向日常教程更新系列,跟 Kyle 讨论了下不让用户感到疑惑,所以改成了 #MakeIconsGreatAgain# 的话题,现在想想这只能是个不错的 Slogan,但并不是显而易懂的话题,所以决定未来的更新将使用 #MakeIconsWithSketch# , 很多人跟随这个系列来发自己的 Icon 也不妨加入到这个话题来,@ryanho_o 也已将学到的并且绘制的 Icon 进行了开源

开源目的

首先开源内容为整个项目 Sketch 源文件,SVG 矢量格式(可以直接拖到 Sketch 打开),三十多个 GIF 教程,后续的 Icon 和 GIF教程更新也会同步到 Github,点此链接前往 https://github.com/allenwong/MakeIconsWithSketch

其次开源目的是:1)让更多的开发者学到更多 Icon 的画法,不用太依赖设计师,释放前所未有的自由;2)让更多的设计师参与进来一起探索 Icon 背后的「最简」构图,推动整个项目持续向前丰富内容;3)开放所有 Icon 免费给所有人学习或商业用途使用,仅需在使用的 App 或网站里有一句 Make Icons With Sketch 项目的致谢文本露出即可;

更远目标是打造一个「完全免费」Icon 版本的Unsplash.


开放设计

对于设计师来说制作简单的 UI Icons 问题不大,但是试着去解构图标图形探索最简洁的方式是个非常有趣的事情,所以在此呼吁更多设计师上来用 Sketch 绘制 Icon,Fork 这个 Github 项目把 Icon 也上传上来。这件事情不仅有「探索」的乐趣,更能贡献到整个产品设计开发社区中来。

设计具体规范是:输出 90*90大小的纯黑 SVG 格式,伴随一个绘制过程的 GIF (选填),英文命名图标,最后在原来的目录下新建一个 SVG and GIF - Your name 的文件夹,把 Icon和 GIF 放进去即可,如果没有 GIF 就以 SVG - Your name 命名就好。

Github pull request 模板


如何制作GIF

做这个系列的 GIF 其实还是非常简单的,四步即可完成,一天可以画多个。

1)想好今天要画的图标,以及解构的方式;

2)打开 Sketch 画,并且用 ScreenFlow 录屏;

3)ScreenFlow 剪辑并加速输出视频,控制在 15秒最佳;

4)用Gifrocket将视频转成 GIF,配置成 320px,GIF 大小为 320*320;

ScreenFlow 视频制作的 Make Icons With Sketch 的全新水印在这里下载


GIF 教程合集


一个正方形,两个同等直径的圆形即可完成,最后旋转。
多选矩形 Edit 后可以一起改圆角。
正方形不停地裁剪。
一个椭圆加长方形,复制即可。
圆角矩形加两个不同大小的圆合成。​
小矩形旋转角度,最后拉下 Radius 即可。
选中锚点删掉,调下倾斜度,复制合成。
添加锚点一拉一调。
添加左右两个锚点的时候放大比较容易
处理号细节锚点的 radius.
合成后记得 Flatten 下,就可以选择锚点加 radius.
添加钢笔锚点,并且 Show Grid View 做校对。
直接用 Layer - Paths - Scissors 剪掉圆的一半。
用四分之一正方形去Layer - Paths - Close Path 背后的圆。
Lock 上半部用「圆加同等矩形合成」的方式实现。
找到合适的锚点下拉一下就可以。
Ctrl D 上面的三角形并且 Scale 放大 120%与背后的矩形相减。
添加中间的锚点,如果觉得没有对准,可以拖动锚点感受下对准时的那个「钝钝」的感觉。
底部先做全圆角(Radius 拉到底)再做 Transform.
中间镂空的白色其实只是填充了白色为了校准,最后可以和背后的部分相减掉。
合成头部,Ctrl D 再 Scale 后和上半身相减。
先用两个正方形做裁剪,然后合成后向右拉伸,这样才会严谨。
星和圆合成后就可以在右侧调多边形的边数了,最后圆角一下。​
类似 iOS 系统的齿轮,不停的复制旋转。
用 Paths - Scissors 剪掉形成耳机的连接部分,最后 Group 下就行。
都是 Ctrl D 原来的图形 Scale 后与背后的图像相见减的原理。
没什么特别的,如果太细的不太好校准的,Command + 放大画布。
用两个正方形相减,然后 Edit 三个角拉 Radius 到底,其他镜像下即可。
尾翼直接 Ctrl D 了机翼,Scale 缩小了而已,最后90度旋转。
用正方形旋转取得菱形,Shirt 左右箭头键可以以 10px 单位移动,方便很多。
Show Grid 模式,以一个长方形添加对应的锚点,并且移动到适合比例的位置。
Ctrl D Scale 旋转后互相伤害,相减。
跟 Home 类似,那天晚上在打一个很长的电话:)
选中椭圆的两边锚点,Straight 下就可以。
做类似 45度角的 Icon,可以先在水平或者垂直放向上先做,最后旋转即可。
看过去有点复杂,其实还是用 Ctrl D 再 Scale 得到最后的结果,你会了吧。
所有有关箭头 Icon 都可以在 45度方向先做出来。


总结

期待更多设计师和开发者可以加入到 #MakeIconsWithSketch# 项目中来,学习或者贡献。我个人也还会持续更新下去,同步到微博 / Twitter / InstagramGithub.

Biu Team
Web note ad 1