摘要: Sketch 是一款 Mac 下的设计做图工具,易用性、图像品质,以及专为 UI 设计优化的工序,都让它成为一款“有资格陪你进入未来”的优秀软件,不但适合 UI 设计师,同样适合于偶尔需要做图的码农。

sketch logo

为什么是 Sketch ?

我还记得 2007 年前后,有相当一批码农装备 Mac,只为了一个理由: TextMate 。这款获得 Apple 设计大奖的个人软件,其针对的领域似乎毫无新意:代码编辑。确实,想成为码农的每日助手,它的重量级对手、老牌公司太多太多了,几无胜算。然而,人们一体会到 TextMate 的特别之处,都会情不自禁地说:哇哦。

同样地,在 2012 年,来自 Bohemian Coding 的 Sketch 获得了 Apple 设计大奖。同样是仅支持 Mac ,同样是面向一个充满重量级对手的市场:做图。要知道设计师在繁忙的工作中,改换主打工具和每日流程是多么不容易;而 Adobe 的 CS 全系列软件,又将设计行业各工种覆盖得多么全面——还要啥自行车啊?

然而 Adobe 犯了强者都会犯的错:大而全。婚纱影楼和 UI 设计师都同样地用着 Photoshop ?一定有人站错了队。直到上手 Sketch ,我才真正发现 Photoshop 与 UI 设计是如此的格格不入。

人们喜欢看到少年大卫挑战巨人歌利亚,在设计师社区已经有许多 Sketch VS. Photoshop 的对比评测,感兴趣的话可以阅读图灵社区文章《初识Sketch:设计师的工具箱》。但在这里,我假设你是《码农》杂志的标准读者——每天和代码打交道,几乎没有图像软件基础。但手头的项目需要一个小图标,或者要做一份UI原型图,怎么办?

画图标

画一个16x16的笑脸图标:

  1. 打开 Sketch。 ^ R 显示标尺, ^ G 显示网格, cmd + 放大到容易操作的状态,如果和我一样有洁癖,你可以滚动画面到 0, 0 坐标。
    滚动画面到0,0坐标

  2. 选择最左边 Shape 下拉菜单里的 Oval ,在画布里从左上角向右下角,按住鼠标拖动画一个大圆。在松开鼠标前你可以看到圆的尺寸,我们要 16x16 的正圆。
    Shape 下拉菜单里的 Oval

  3. 松开鼠标,圆就画好了。如果之前手抖了,画出的圆尺寸不精确,现在你可以在右边的面板里改宽高数字——Sketch 是矢量做图软件,形状尺寸可以任意修改,绝无模糊。
    在右边的面板里改宽高数字

  4. 类似前面的操作,再画一个 12x10 的椭圆,和一个矩形,矩形要完全盖住椭圆的上半截。如果画的不准,可以用鼠标拖动形状本身和它周围的八个控制点来移动位置、缩放。
    矩形要完全盖住椭圆的上半截

  5. 点击选中矩形,然后按住 Shift 点击椭圆,这就同时选中了两个形状:矩形和椭圆,点击工具条上的 Subtract 图标,让图形进行相减运算,得到开口笑的大嘴。
    矩形要完全盖住椭圆的上半截

  6. 点击工具条上的 Flatten 图标,将大嘴压平,以便参与下一次运算。然后按住 Shift 点击正圆,即同时选中大嘴和椭圆,相减,将大嘴压入正圆中。

  7. 画一个小圆当眼睛,摆好位置,按 cmd d 制造副本,摆好位置。同时选中两个小圆,点击工具栏上的 Union 进行合并运算。
    画两个小圆当眼睛

  8. 同时选中眼睛和脸,相减。

  9. 现在我们的形状已经画好了,在右侧面板上,取消 border 的勾,去掉边框。然后点击 Fill 的色块,选择颜色。
    形状画好了

  10. cmd 0 将视图缩放回100%比例,按 ^ G 隐藏网格,可以看到笑脸的最终显示效果。双击这个笑脸,其中任何部分都可以修改,不会模糊。

  11. 工具条按钮 Export 导出作品,在只有一个形状的时候, Sketch 智能为你选择了切片位置。如果打勾 Also export as: Double size ,就可以同时导出常规屏幕和视网膜屏幕的高清图像。选好后点右侧面板最下面的 Export ,即可同时导出两幅图像。
    导出作品

  12. 看看效果。四周透明的 16x16 PNG图标,以及它的视网膜版本,已经出现在文件夹中。

画原型图

作为一名前端攻城师转型的产品经理,我画原型图的时候,总希望它 99% 就是最终产品的样子——结果花了很多时间做图。后来……我就变成设计师了……

讲这个曲折的故事不是要每位读者都跨界,但我们同样都希望用尽量短的时间完成事情、轻松达到专业级水准、作品能随时修改、随意组合原有成果。我敢说在这些方面, Sketch 体现了足够的诚意。看这几个例子:

  • Sketch 支持在同一个画布上放置多个画板。可以按照iOS设备屏幕或图标尺寸快速新建画板。(问为啥没有 Android 设备标准?唉,人艰不拆好么……)也可以自定义画板尺寸。
    快速新建画板

  • 原型图经常用到标准界面元素,可以下载一些设计图库。例如 sketchgems.com 提供的 iOS 7 模板。虽然 Photoshop 也有类似的图库,但在修改时远不如 Sketch 灵活,可以参考前面笑脸图标的例子。
    iOS7模板

  • 在文章开头我们提到图像品质, Sketch 的图像品质优于 Photoshop 。例如无限缩放、矢量精确、视网膜分辨率导出等。而且在 Sketch 中,字体的反锯齿算法采用了 Mac 系统内部引擎,这意味着,如果你在开发 Mac/iOS 软件,设计图效果和真实运行截图可以完全一样。
    字体反锯齿引擎

  • 迎合前端的设计流程,例如我们在右侧的面板中给形状添加阴影,所有的选项都对应 CSS 属性。甚至可以右击形状,将它的颜色、阴影等属性一键复制为 CSS 代码。在 Sketch 中,可以用前端工程师的思维方式做图。
    一键复制CSS代码
    CSS代码

  • Sketch Mirror 支持在 iOS 移动设备上即时预览图像。UI设计非常方便。

总结

Sketch 的软件图标是一颗大钻石。在 Mac 王冠上点缀着许多的珍珠,但总会有那么一两颗傲世独尊的钻石和宝石,让真正的王冠价值连城、无可替代。在我每天的工作中, Ulysses 、 Ember 、 CodeKit 、 Sketch 都是这样的钻石级工具,使得枯燥工作的幸福感倍增。

Sketch中文手册

经软件作者 Bohemian Coding 团队授权,我们制作了官方的《Sketch中文手册》,并在图灵社区上架,是免费电子书哦!你可以直接在 Web 阅读、下载 pdf ,或者发送到 Kindle 。


本文作者

大胖,保定人,基督徒,自1997年至今一直从事Web开发、UI设计,见识过技术如何改变世界。兴趣略杂,爱读好书,是《番茄工作法图解》的中文译者,参与翻译了《高流量网站CSS开发技术》和《Sketch中文手册》,现为图灵社区(ituring.cn)前端工程师。