切图作为设计师出图的最后一步,向来都是令人头疼的工作,其工作内容繁琐枯燥,但又必不可少。同时,作为IOS开发者,我们往往需要为程序准备两套图片资源,以应对低清屏和Retina屏的不同需求,随之而来的是切图工作量的成倍增加。今天为大家推荐一款Mac下的切图小工具——Slicy,以上烦恼皆可得到妥善的解决。
Slicy 官网:http://macrabbit.com/slicy
Examples:http://macrabbit.com/slicy/help
App Store:https://itunes.apple.com/tw/app/slicy/id512533449
软件特性:
1、PSD文件的预处理
这一步可以由设计师来处理,不过个人推荐程序员亲自完成这一步骤,因为这里涉及到图片的命名,我们自己来对图片进行命名可以更好的使之符合整个项目的命名规则,方便在项目中对对应图片资源进行调用和管理。
首先用PhotoShop打开设计师给你的PSD文件,如下图:

图中的绿色状态图标即为本次需要切出的素材图片
在右侧分组面板中,选中对应的组”Statues”

对”Statues”组的组名进行重命名,将其重命名为”Statues@2x.png”,全部完成后保存PSD文件即可。

这里要注意别忘了@2x后面的”.png”。同时,这里的命名即为图片素材被切出后的名字,因此建议大家在命名时考虑到项目整体的命名规则和调用的方便来进行命名,避免图片切好之后再来修改名字,浪费时间。
到这里,PSD文件的预处理就完成了,事实上这一步也是整个流程中比较繁琐的一步了,完成了这些,今天的切图工作就已经完成了八成。
是的,就是如此简单,打开Slicy的主界面,你可以看到其主界面也是如此的简单。。。

第一步
将我们预处理好的PSD文件拖进去,在一段令人愉悦的动画之后,我们会看到这个:

第二步
按住Command + A快捷键全选,将图片拖到你需要的地方。

可以看到,一套严格命名,大小合规的图片已经被切好导出了,就是这么简单!
Slicy的存在使得原本繁琐的切图工作变得轻松惬意,尤其是当程序猿霸气的对设计师妹子说:”看你那么辛苦,今天的图我来切”时,相信大多数设计师妹子都会感动的痛哭流涕有木有。。。
综上,Slicy使用简单,小巧清爽,实在是居家旅行,杀人灭口勾搭设计师的必备神器。
情非得已
3个平面设计技巧学会动态字体海报2020-07-09
如何设计出优秀的文字类海报排版2020-04-02
7个有效提升传达率折页设计技巧2020-03-19
设计师如何解决作品视觉缺少层次感2020-03-14
详细解析平面设计中元素的使用技巧2020-03-13
设计师必须要学习的平面设计配色技巧2020-03-11
解析设计师常用的6大构图方法2020-03-11
3个帮你快速掌握字体搭配思路2020-03-10
设计师如何设计出中国风主题LOGO2019-10-21
详解如何让板式海报设计变得简单2019-10-21
4个配色技巧帮助您解决色彩问题2021-03-10
设计师需要掌握的平面设计技巧2021-03-10
详细解析插画类海报的绘制思路和方法2021-03-09
详细解析设计师必须掌握的色彩知识2021-03-09
设计师必须要学习的高级配色技法2021-03-10
设计师必须要学习的几个排版小技巧2021-03-10
详细解析UI设计中终极配色宝典2021-03-11
详解如何把产品和背景融合到一起2021-03-11
详细解析UI设计中终极配色宝典
相关文章1162021-03-11
详细解析设计师必须掌握的色彩知识
相关文章1792021-03-09
详细解析插画类海报的绘制思路和方法
相关文章1842021-03-09
详解商业海报从构思到成品的全流程解析
相关文章5782020-09-28
实例解析如何设计点击量高的Banner
相关文章3142020-03-18
详细解析板式设计中的对比原则
相关文章4352020-03-14
详细解析版式设计中的重复原则
相关文章3622020-03-14
解析快速提升界面视觉功底的设计技巧
相关文章2402020-03-13
