开源和开放设计 - Make Icons Witch Sketc
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 命名就好。

如何制作GIF
做这个系列的 GIF 其实还是非常简单的,四步即可完成,一天可以画多个。
1)想好今天要画的图标,以及解构的方式;
2)打开 Sketch 画,并且用 ScreenFlow 录屏;
3)ScreenFlow 剪辑并加速输出视频,控制在 15秒最佳;
4)用Gifrocket将视频转成 GIF,配置成 320px,GIF 大小为 320*320;
ScreenFlow 视频制作的 Make Icons With Sketch 的全新水印在这里下载。
GIF 教程合集





































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