要想做好工作，必先利其器。

前不久看到掘金的一篇文章，前端PS切图方法，图文并茂，相信每个前端都经历过这种最原始的切图方法。不禁想起自己刚入门的时候，懒得切图，直接QQ截图，现在想想也是初生牛犊不怕虎，随便干点方便的事……

这种原始的PS图片切割方式不能说不好，只能说太影响效率了。我一直认为，能用机器解决的事情就不要人工去做，尤其是图片切割这种体力活，更不要程序员去做。如果开发还停留在手工切图上，那就毫无意义了。只能说你的时间太廉价了。

自动切割工具

这里推荐一款切图插件：更多切图工具介绍请前往：扶我起来，我还能切

这是一款国产图片裁剪工具，广告词是“最好的图片裁剪工具”

我们致力于提高设计师的工作效率，为设计师提供优秀、高效、实用的技术解决方案，解放设计师的双手，让创意无边界，让设计更专注！

一键切图，真正解放你的双手

它可以让您只需点击一下按钮就可以自动输出您需要的各种图片，速度非常快，没有其他软件能与之媲美！

关于注释

手工绘制标签不仅费时费力，而且眼睛容易模糊，容易漏掉标签，工程师往往在开发过程中才发现这些漏掉的标签，不得不一次又一次地找设计师确认。

截完图之后，如何标注是我们面临的一个问题。别告诉我你还在手动一个一个的测距，我之前看到同事用PS一个一个的测距，简直要强迫症了，好尴尬啊。记住，别把时间浪费在体力活上，能用工具解决的问题就别用手。如果你这么喜欢做这种测距的体力活，那你为什么不去搬砖呢？让别人用手来救你。

有时候标注设计师会帮助你，但是你总不能碰到这么善解人意的设计师，我们的设计师VS别人的设计师。

我们的设计师：

另一位设计师：

想想敌方队友 VS 我方队友

碰到这样的设计师，没人会和我们分担，这种低效的协作方式造成了大部分互联网产品设计团队共同的悲剧：产品明天就要上线，我们还要通宵达旦地摸索细节、调整界面、加班加点！！！

几个强大的注释工具

如果设计师不帮我们标注，我们可以自己标注，借助工具只需要几分钟就可以标注完成。如果复杂的标注让你不知所措，不要伤心哭泣。

如果有一天，设计师只需要专注于界面设计，而不再需要做裁剪、标注的工作；如果有一天，工程师只需要专注于功能框架的搭建，而不再需要花太多的时间在标注UI上；没有如果，这一天真的到来了。。。

锋利的工具可以帮助工人，明智的朋友可以帮助一个人。有了这些工具的帮助，我们可以更快更好地发展，这真是一个巨大的帮助。

这里有一些可以让程序员和设计师爱上的软件

是的！就是！爱！

你耕田，我织布

您设计，我开发

1.表你妹官网：是否免费：免费 登录方式：微信直接扫一扫 简介：

每天被要求标注距离测量什么的，我这个射击狮子，干的就是美工的死活，每天要给程序员标注PSD，但我梦想着成为一个高标准的射击狮子，为了早点下班，和女生一起看电影什么的，我帮你解放双手吧……

操作：登录成功后，新建一个项目，上传PSD即可进行标注。操作预览：

2.Blue Lake Mac 应用程序

免费的中文自动标注工具！彻底解放设计师的双手，上传文件自动标注！啥？还想自动绘图？冷静...失业了怎么办？

现在，这款名为Blue Lake的设计师标注工具在最新版本中开始支持“自动标注”功能（目前仅支持.，PSD版本即将上线）

只需下载《蓝湖》Mac App，即可实现一系列自动化功能，包括一键导出设计图→自动生成注释→自动与团队共享→自动提醒相关团队成员。

官方网站： 是否免费：免费 登录方式：下载APP，注册账号 登录介绍：

Blue Lake 是面向产品设计师的协作平台，帮助设计师更快速地完成工作。Blue Lake 帮助设计师更好地向团队展示设计图，描述页面之间的跳转关系。Blue Lake 还支持一键分享、在线协作...

操作：登录成功后，新建项目并上传，即可进行标注。操作预览：

“自动标注”功能可以自动将设计图中各个元素的大小、位置、颜色、间距、字体大小等样式信息完整清晰地同步到Blue Lake中，方便工程师和团队其他同事随时查看。

如果设计图有变更更新，Blue Lake 还能自动添加新版本。

如今设计师有这么多的工具，这个工具的优势到底是什么？

1、所有功能完全免费，不受项目数量或团队成员数量的限制。

2. 用中文！中文！中文！

3. 快无比！国产服务器加上蓝湖工程师精心优化的算法，让蓝湖的“自动贴标”速度非常快！

4、Blue Lake还集成了设计图流程展示、设计图历史版本管理、各种情况、状态下的设计图管理等功能。

5.设计师不仅可以对每款设计添加注释，其他团队成员也可以对设计进行评论，方便团队高效的线上沟通。（心里有点后怕……）

6.在Blue Lake上，你还可以根据设计图快速制作出高保真可交互原型，这样工程师再也不用跑来问你“这个按钮跳转到哪里去了？”原型也可以在Blue Lake手机APP和微信上进行操作和预览。

美团、网易、面包旅行等国内知名互联网公司均参与了蓝湖早期的内测，并为蓝湖提供了许多专业建议。蓝湖根据这些反馈快速迭代，“自动标注”功能就是其中之一。

由于我们是国内团队，沟通很方便！所以设计师有痛点或者需求，可以积极讨论！说不定下一个版本的蓝湖就能直接自动画图了！！！

是的，Blue Lake主要功能是网页平台，不需要下载，注册后就可以免费使用。

来源：妮娅菜美公()，之前在今日头条上看到推荐，不知道网址……

3. /PS +

随着（这是什么，能吃吗？自己去 一下，自己去 Bing 一下）的火爆，国内外很多项目组都逐渐采用了 + 的开发模式。不过话说回来，真的有那么好用吗？很多朋友都说自己用 PS 好几年了，要我学个新软件，我不行啊！~

其实我刚进公司的时候也是这样的，我之前从来没用过 Mac，更别说 ，完全就是新手，当时差点儿崩溃，但用了之后，真的爱不释手，再也不想用 PS 了。

官方网站：PS导出官方视频教程：导出官方视频教程：是否免费：免费登录方式：下载APP，注册账号登录介绍：

在使用之前我先用（手工标注，这里不推荐）进行标注，也就是直接在输出的效果图上测量尺寸；使用插件之后我可以在画板中生成尺寸标注信息，并导出标注图给开发人员使用。不管是也好，最终的交付物都是一样的。和接下来要推出的原版标准，都破坏了原版的效果图的视觉效果，标注信息肯定会遮挡住原版的设计稿，所以效果图和标注一般都是分开给的，开发人员经常需要在两张图之间切换，图片管理也不是很方便。

它主要是为了解决上述问题而设计的，使用后可以一键导入，在设计人员做好图层管理（命名、分组）的前提下，可以自动生成注释信息（并可以标记为pt或者dp），允许添加注释形成类似prd的文档，自动提取Style Guide，还可以添加项目团队成员，提供给团队审阅项目。

操作：登录成功后，新建项目，上传素材，即可操作。官方预览图：

介绍后回答两个基本问题

①你支持吗？

A：抱歉，暂时还不行！设计师为了提高工作效率，哪怕一两个月吃土也要买一台 Mac。不过，除了安装 Mac 虚拟机，PS 现在还支持插件。只要装上插件，你依然可以告别没有 Mac 的切割和标记。

②您支持吗？

A：太好了，这个一定可以用！前不久还只有 Mac 版，但团队为什么要放弃这么大的市场呢？现在支持了真是个好消息，从此开发者小哥再也不会抱怨网页版打开速度超慢了。

好啦，废话不多说，我们直接进入正题。

③＋的优点

1、sketch支持多画板，便于同时预览，占用内存较ps小很多；
2、sketch支持导出flinto，便于制作交互动效原型；
3、zeplin解放设计师的双手，从此告别切图和标注；
4、zeplin降低工程师的沟通成本，提高设计还原度。

更多详情及安装方法请前往：APP批注无忧！告别抠图批注-/PS+

我会在这里介绍这些工具，但由于篇幅有限，我不会详细教你如何使用它们。你会越来越习惯使用这些工具，熟能生巧。

有关 的更多经验和详细信息，请访问：您对 有何经验？

4.中文文档： 官方网站： 官方使用指南： 是否免费：免费 登录方式：下载APP，注册账号登录 介绍：

它是一款可用于标记和设计规范的工具，支持3.5及以上版本。它可以帮助您解放双手...

1. 创建覆盖

2. 测量尺寸

3. 测量边距

4. 获取属性

5. 添加评论

操作：登录成功后标你妹 sketch，新建项目，上传PSD，即可进行标记。

官方DEMO预览地址：#操作预览图：

关于教程这里就不多说了，这里就简单介绍一下，如果想了解和使用请前往：

图标注释插件使用教程

先说一下 和 的区别，这里纯引用，并没有用过：

：

① 免费注册，只能保留一个项目，“17美元/月，3个项目”，“26美元/月，12个项目”。“6.75美元/月/用户”。

②支持MAC和PS，也支持PC的PS。（最大的优点）

③必须将数据上传到网上，用客户端或网页都可以查看，必须是注册用户。（很麻烦，有的公司不允许上传。）

④自动生成。（非常好）

⑤ 当需要查看相应图片裁剪页面时，从裁剪栏下载即可。（我不太常用，可能还有其他方法）

：

①完全免费。

②仅支持MAC标你妹 sketch，但不限制观看。

③数据保存在本地（html文件），方便打包发邮件，缺点是每次更新都要重新发送，管理麻烦。

④没有智能化，没有自动化，但是有类似人工标注。

⑤ 有“颜色命名”，但是比iOS差太多了，希望后续能更新类似功能。自动打包输出剪切图片，支持iOS和iOS命名方式。

5. 其他工具比如（Pixel Chef）和（这个是收费的，喜欢可以赞助，切图的免费）也差不多，就不介绍了，有兴趣的可以自己去试试。至于工具，适合自己的才是最好的。其他工具我没试过，大家可以自己去试试。。。

对于以上四款推荐软件，我的看法是：

表你妹适合一些个人小项目，对于新手来说，学习成本基本为零，非常方便，并且网页端没有平台限制；

蓝湖Mac APP首先需要有Mac，其次需要OSX系统，良心国货，速度快，适合个人、企业协同开发。

适合小型团队，还具备一些协作办公功能（消息和状态更新），需要前端适应这种新方式；

它比较传统，有本地文档，打包图片剪切等，比较适合大公司，有自己的办公流程，只支持Mac。

您准备好购买 Pro 了吗？

如有侵权请联系删除！