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


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.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,615评论 4 59
  • 话外音: 由于购票时间较晚,我们只得买了几张转程票才得以成行-----全家人去参加表弟婚礼。如果说我仅是想表达对旅...
    我为大宝带盐阅读 331评论 1 13
  • 最近俩天把若干年前写的文章都投了下简书的专题试试水。小有所得。 自己的文章,其实说日记更合适。...
    兰于烟阅读 343评论 1 1
  • 健康了,安全了,也懂得怎样作为一个人而存在了,接下来,就需要支持这样的存在的各种现实条件了。比如,吃,穿,住,行等...
    木子哲学阅读 437评论 0 2