以前做项目很多情况下都是自己设计界面然后通过ps切图再输出html页面，这是一个常规的页面输出环节，如果这个环节是必须的话，那么我们还是可以考虑如何去优化它，尽可能提升工作效率，对于前期界面视觉设计那是一个思考加创作的一个过程，那么在这里主要探讨的是切图环节，作为APP或网页设计师是必须要涉及到的，当一个高清图设计好或交付到我们手上之后如何按规范高效率的输出图片或icon，当然最有效的方法就是利用工具。

类似切图的工具网上有很多，这里推荐两种比较好用的一个Cutterman，另一个是Zeplin，两个都是PS切图插件下载后直接安装到PS中:

Cutterman

Cutterman插件界面

只需一键就能够自动将你需要的图层进行输出，以替代传统的手工切图。能够自定义输出图片的尺寸和各种图片格式，方便你在pc、ios、Android等端上使用。 iso和Android自定可以输出不同分辨率的倍数图片。傻瓜式操作，方便、快捷，容易易于上手。

一键式操作

Android平台支持输出各种分辨率大小图片

IOS平台支持输出的单倍图、双倍图

可以单独输出，也多个图层组合输出

也可以diy指定图片大小输出

这款切图插件相信大家并不陌生或正在使用，总体来说使用非常方便，值得推荐，能够为我们节省不少工作时间，但是不足的是不能做标注，做标注还需要借助于其它插件。说道标注再来看看推荐使用的第二款切图插件Zeplin。

Zeplin

Zeplin是国外的切图插件，所有版面都是英文，但是英文单词不难理解，基本上都能大概知道是什么意思，实在不行可以百度翻译一下，这款切图插件也是近期在做项目中接触到的，用起来非常方便，操作也比较简单，不但能切各种分辨率或倍数的图片，而且还能够直接做标注或注释，同时它还有一个更重要的功能——团队协同工作功能，通过用户注册的账号，可以将所有参与项目开发的人员加入到同一个工作项目组中（就像微信群一样），你只需要在PS中操作一键切图，后续的工作就不用你操心啦，系统会自动将切好的图片上传到Zeplin客户端中，开发人员可以直接通过客户端或本插件生成的项目链接地址（前提要先登录）下载图片，并且在客户端界面中可以看到标注或注释，真正解放双手，提高工作效率，节省中间不必要的环节。早期这款软件仅支持 Sketch，目前已支持Photoshop版本。