教你用Sketch设计超赞的Icon

原作者:Christian Krammer  翻译者:Puddinnng

本教程为翻译教程,原文地址为:

http://www.sketchtips.info/articles/how-to-use-sketch-app-to-build-great-icons

译者按:新手向教程,大神请绕路~~本文非常基础,相信即使是从未用过Sketch的同学,也能轻松做出这几个图标,来尝试一下吧!

虽然Sketch主要是设计用户界面的软件,可是用来设计icon也同样顺手。这正是我们将要做的,我会一步步指导你设计出下面三个图标。

我们将要完成的图标

准备工作

我们首先按 A ,创建一个矩形画板。在左侧的 Layers List 里面将这个画板命名为“ Icons ”。不用太在意它的位置和大小,我们马上来重新调整。首先,我们在右侧的 Inspector 中输入一些数值。将 Position 中的 XY 值都设为0,然后将宽度设为400,高度设为100。通过按 cmd+3来让画板到我们的视野中心,接下来按 cmd+0将画板放大到100%。最后,按两次 cmd+ +来得到更好的视野。

用来画图标的画板

你只需要记住一个重要的原则:尽量用基础形状来构成你的图标,而不是使用向量工具。这也是我们用来制作第一个图标" Followers ”的原则。


“ Followers ”图标

第一步,按 O 键画一个40*40的圆,按住 Shift 键确保它是正圆。现在,在它的下面,我们画另一个圆,这一次不要按 Shift 键,因为我们需要一个50*75的椭圆。将这个椭圆拖拽到第一个正圆的附近(如截图那样)。

现在,我们还差一个矩形。按 R 键画一个60*50的矩形,使之位于两个圆形的正下方。将矩形的上边与椭圆的中心对齐。

"Followers" 图标的形状

为了完成这个图标,我们将用到 Sketch 中的布尔运算体系,它使得不同的形状,能够组成一个新的形状。所以,现在把两个圆形都选中(点击其中一个,按住 Shift 后点击另一个),然后按下工具栏中的“ Union ”按钮。你能在左侧的 Layer List 中看到它们已经组成了新的形状。

两个圆形合并了

但这还不是我们想要的呢,因为矩形还没被减去。让我们再次运用布尔运算吧:选择刚刚合并的形状,同时选择矩形,按下工具栏中的“ Substract ”按钮。这样做之前,我希望你确保矩形图层在合并的形状图层之上。

矩形和将要被合并的圆形

最后,将这个图标的 Fill 去除,然后更改它的 Borders 。点击整个图标,将 Inspector 中 Fill 前面的勾勾点掉。之后,将描边的位置改为 Inside 然后设置粗细值为5。哒哒,我们完成啦!

将图标由填充改为描边


“ Tweets ”图标

接下来我们制作“ Tweets ”图标,这个图标由一个对话框气泡和三个位于中间的点构成。像之前一样,画一个70*50的圆。不过,光靠基础形状并不能构成所有图标,我们现在需要修改这个圆形的向量点。点击这个圆然后按 Enter (或者双击它)来进入向量编辑模式。在此模式中,你可以调整构成形状的向量点。你能在这个圆上看到四个向量点,一边一个,它们由小圆圈来表示。

图标的四个向量点

不过我们不去改变预先设定好的点,取而代之,我们为这个圆增加一些新的点。光标在椭圆右下方的线段上盘旋时,你将看到这条线变成了蓝色,按住cmd键,你将得到这段曲线的中点,点击它,为这段曲线增加一个向量点。

添加三个向量点

这之后,在这个点的左右两侧各增加一个向量点。这时,你也许想要再按一下 cmd++来获取更好的视图。现在,选择我们添加的第一个点,将其向右下方拖拽。这样我们就得到了想要的对话气泡形状。请注意,这个点由两条线来控制,决定它的弯曲度。这里我们不需要任何弧度,我们只需要一个尖角,所以我们通过点击 Inspector 中的第一个按键,将这个点改变为“ Straight ”点。

被调整过的向量点

这样对话气泡就做好啦,但我们还需要添加一些点在它中间。但首先还是把  Fill 去掉,再增加 Border。我们先按 Esc 离开向量点编辑模式。把 Inspector 里面 Fill 前面的勾去掉,再像之前那样设置边框。现在我们来加小圆点吧!再次按下 O 键去画一个12*12的正圆。点击这个圆,按 Alt 之后拖拽一个它的副本在它右边;再这样做一次以得到第三个圆。现在你所需要的只是把这三个圆在气泡形状中分布开,然后移除它们初始的 Border。

接近完成的图标


“ Following ”图标

现在我们来做第三个“ Following ”图标。第一件事是按 U 来创建一个圆角矩形,同时按住 Shift 来确保它是正方形的。让这个圆角正方形的大小为55*55,圆角半径为10。和之前一样,我们想把这个圆角正方形的 Fill 移除而换成 Border,这样我们可以在里面添加一些什么。

第一个形状

我们会采用一个新的方法来绘制方形中的加号。我们按下 T 然后进入输入模式,选择一个清爽的字体,比如“ Avenir next bold ”,点击矩形中间然后输入“+”。字号差不多是55。按 Esc 离开输入模式,然后将加号移动到图标的中间。最后将它转变成一个形状(选择 Type>Convert Text to Outlines)。

加上加号来完成这个图标


人人为我,我为人人

图标们基本上要完成了,但是我们还需要统一它们然后将默认的灰色换成更有生机的绿色。点击所有图标的外边框,然后点击边框前面的小色块来选择一个你喜欢的绿色。之后,我们还需要将里面的部分也换成这个颜色。点击里面的部分,然后点击填充前面的小色块来选择相同的颜色。

改变第一个图标的描边颜色

到此我们就完成啦~

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

推荐阅读更多精彩内容