使用Sketch绘制矢量Logo

By @Easy

一直以来,我都对矢量图没太多好感,总是觉得它失去了太多的细节。当然,真正的原因是矢量图是画不出下边这样的萌妹子的。

Image

但是每个APP都需要有一个好Logo。开源项目也是。连微信号都是,不上传Logo就是不让你开通。所以为了干净利落的画Logo,程序员们还是有必要学习下Sketch之类矢量图工具的。

本文的目的不是讲Sketch的功能,也不是Logo绘画教学,只要是用实例展示如何使用Sketch将一个手绘的Logo做成矢量的。

先放对比图:

Screen Shot 2015-07-12 at 6.11.08 PM.png

左边是原来手绘的,右边是矢量重绘的。在保留细节的同时,清晰度和可维护性上升了很多。

Screen Shot 2015-07-12 at 5.07.37 PM.png

导入背景图,然后在开始思考。矢量化和3D建模类似,要用相识的形体覆盖大部分的区域,然后再来修正细节。

首先我们先覆盖大象的大肚子。

Screen Shot 2015-07-12 at 5.26.13 PM.png

画一个矩形,然后选择旋转,接着双击,进入节点编辑模式。

Screen Shot 2015-07-12 at 5.27.29 PM.png

在需要被拉开的地方添加锚点,然后让形状和大象尽可能的接近。

Screen Shot 2015-07-12 at 5.29.09 PM.png

然后用条状矩形覆盖象腿。

Screen Shot 2015-07-12 at 5.29.42 PM.png

其他区域类似。直到全部覆盖完。

Screen Shot 2015-07-12 at 5.30.43 PM.png

所有都覆盖完成后,选中这些图层。

Screen Shot 2015-07-12 at 5.31.51 PM.png

然后点击顶部菜单中的Union,将他们叠加起来。

Screen Shot 2015-07-12 at 5.31.59 PM.png

Sketch是智商很高的软件,所以即使你叠加了,还是可以编辑、修改叠加前的每一部分的。

叠加的好处是,你可以为叠加在一起的图形选择Border,这样我们可以轻松得到图案的描边效果。

Group也可以组织图形,但Group不能有Border属性。

Screen Shot 2015-07-12 at 5.38.42 PM.png

接下来我们要加上体型之上的细节。最理想的方式当然是每一部分都是块状的,就可以完全按照上边的方法来处理了。但是手绘风格的图中,往往会有大量的线。下边我们来看怎么处理。

Screen Shot 2015-07-12 at 5.47.29 PM.png

点击左上+号菜单中的矢量工具,我们直接手工把线画出来。每点一下,会添加一个锚点。一个小技巧是点下不放并拖动的话,会直接出现曲率调整手柄,这在我们画曲线时非常有用。

Screen Shot 2015-07-12 at 5.50.04 PM.png

画线的难点在于它是一个open 路径,在我们画好以后,需要直接点击右上属性框的Finish Editing 来结束战斗。这个问题困扰了我很久。

Screen Shot 2015-07-12 at 5.51.39 PM.png

最后再修理下细节,我们的Logo就完成了。

Screen Shot 2015-07-12 at 5.53.55 PM.png

LazyPHP的Logo因为之前已经定稿了,所以矢量化后并没有特别强烈的对比。

但如果你画新logo的话,可以画一个很粗糙的草图后就开始用矢量来设计了,这样效率会更高。最重要的是,即使是手残如我的同学,只要认真去抠细节,也能做出很不错的Logo。

看看下边这个TeamToy的草图,和最后的矢量稿,你就明白我在说什么了。

Screen Shot 2015-07-12 at 6.05.43 PM.png

本文由 Easy 发表于GET

「GetParty」

关注微信号,推送好文章

微信中长按图片即可关注

更多精选文章

评论
微博一键登入