在第七、第八期的教程中,我们已经学习了如何熟练运用Sketch来绘制一枚图标,但是作为交互设计师(伸手党),怎么能自己动手画图呢?并且在概念设计的阶段,把时间花费在绘制图标上,显然时间分配不合理。所以,本篇教程将讲解如何使用Sketch对SVG的支持特性和第三方插件,快速完成图标的
盗用绘制。注:玩转Sketch系列教程适用于Sketch44或者更高级的版本。
1.SVG图形介绍
使用截图、下载等方式将第三方网站图标以图像的格式粘贴到Sketch中,以达到图标的引用,可能是大多数人的想法,但是这种方式不支持在Sketch中进行二次编辑操作,浪费Sketch对SVG的支持特性。要说清楚这个支持特性之前,我们首先要对SVG图形有一定的了解。
SVG是什么?SVG是一种可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的图形格式。SVG由W3C制定,是一个开放标准。——腾讯ISUX《为什么要用SVG?》
看不懂?没关系,简单来说,SVG是一种图形的格式,和我们日常接触的JPG/PNG等图形格式没有区别,但是它的质量很小,1024*1024px的图标仅有3kb,而且它是矢量的图形,可以支持编辑修改。在Sketch中,我们导入SVG图形后,可以进行颜色调整、大小变化、形状改变等操作。
2.从第三方网站导入SVG图形
介绍完SVG的特性后,我们只需要一个第三方图标来源网站了,推荐使用阿里的iconfont,图标的种类齐全,支持直接下载SVG、AI、PNG三种格式图形。
导入Sketch之后,就可以对图标进行编辑操作了,十分简单。另外,顺便需要说明的是,Sketch同样支持SVG图片导出,修改后的素材也可以保存为SVG图片,方便再次编辑修改。
3.使用Sketch插件导入SVG图形
在《第一期教程初识Sketch》中,我们就知道Sketch支持第三方插件,其中当然也包括图标类插件。推荐下载微信团队出品的WeSketch插件,它除了内置图标库之外,还支持其他的一些连线、标记功能,插件库使用方法如下:
(1)下载WeSketch插件
官方下载地址:https://github.com/weixin/WeSketch
(2)安装Sketch插件
安装的方式比较简单,找到WeSketch.sketchplugin文件,双击即可完成安装。
(3)使用Sketch插件
在菜单中,找到“Plugins(插件)”-“WeSketch”-“Icon Manager”即可。
点击“Icon Manager”后,即可看到图标的选择弹框,从中选择我们想要的图标,点击图标即可完成插入操作。
(4)WeSketch语言切换
很多童鞋可能对纯英文的工具软件比较抗拒,WeSketch插件考虑到了这一点,支持语言切换为简体中文。具体设置路径为“Plugins(插件)”-“WeSketch”-“Setting”,在弹出的设置框中设置为简体中文即可。