Sketch极速建立自己的图标库

原创文章 分类: 教程 版权:
2799 102 45 8
2018-01-15
31.0
编辑推荐

批量操作图标库简直so easy.

导语前沿


又好一段时间没写教程了,不能为大家提供更好的方法和技巧,更棒的设计思维,我特么浑身难受,所以我又来了。最近我安利到一个超好用的插件Sketch icons,解决了大家在做图标时候达到又好又快的问题。咱不看广告看疗效,时间就是生命,工头还催搬砖呢,来不及解释了快上车吧。


Image title


解压安装Sketch icons插件

Image title



解压Font Awesome图标库


Image title

先解释一下,Sketch icons插件是负责用来整体控制和编辑svg图标的,而Font Awesome只是一个svg图标库,你也可以下载其他svg图标库(这可满世界都是,你可以找你喜欢的图标库,阿里巴巴图标库也可以,甚至你用Sketch画导出svg格式图标都行)作为使用资源(但记住一点要是svg格式的,把这些图标下载集合放在一个文件夹里就好)




坐稳了,开始基本操作了


Image title

1.新建一个矩形,去掉边框属性,设置红色,点击Create Symbol(这只是作为例子,颜色和名字可随意)。



Image title

2.双击该Symbol直接进入Symbols图层,再复制出两个,改成其他颜色并命名(这只是作为例子,颜色和名字可随意)




Image title

3.选择菜单栏Plugins-Sketch icons-import icons,即可打开批量设置svg图标面板。




Image title

 以上是插件的Sketch icons设置选项,其实都不难理解,特意给你们翻译一下,最主要的设置就是画板大小和画板内边距两个,颜色你可以随意选择。画板大小和画板内边距我还画了张图供大家理解。


Image title


Image title

 4.以上我是设置批量生成48*48像素画板大小,内边距为6像素,颜色为红色的图标库。点击Continue按钮后,选择你的SVG图标库的文件夹,点一下Select,BOOM~瞬间就好了,灰常灰常无比的残暴。




Image title

整齐又漂亮的给你统一了所有图标的大小和颜色,你只需按取所需导出各自的画板即可。再结合我之前的文章《三分钟教你快速设置Sketch切图方案 》简直不要太爽快,有木有~





基本操作完了自然还有神一般的操作


Image title

5.你只要修改你的颜色那个Symbol设置,随心所欲调整所有的颜色,吼李谢特~




Image title

6.你还可以把这个sketch文件库添加到你的Library里,随意调取,团队共享协同工作,为所欲为之为所欲为~


Image title




资源地址

Image title




陈踢缺er

微信公众号:陈踢缺er

96粉丝/4关注

2017年末职场黑话大汇总-BOSS篇Sketch你绝对应该掌握的二十个小技巧

陈踢缺er

陈踢缺er

微信公众号:陈踢缺er

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN