方便操作的采集神器(我只是工具的搬运工，下次把Mac上实用的小工具也推荐一波前不久)

　　方便操作的采集神器(我只是工具的搬运工，下次把Mac上实用的小工具也推荐一波前不久)

　　原文收录在我的GitHub博客()，喜欢的可以关注最新动态。让我们一起交流学习，一起进步，以学习者的身份写博客，记录点点滴滴。

　　工欲善其事，必先利其器。我只是个工具搬运工，下次推荐一波Mac上好用的小工具

　　前不久看到掘金的一篇文章文章，前端PS切图方法，图文详解，相信每个前端都经历过这种最原创的切图方法，我不禁想起自己刚刚开始之前。剪图，直接拍QQ截图。现在想来，还真是一头不怕虎的新生小牛。有多方便？. .

　　这种原创的PS剪图不能说不好，只能说太影响效率了。如果总觉得用机器就能解决，就不要用手工操作，尤其是剪图纸的手工活。它不应该由程序完成。如果开发还是靠手工剪图，那就没有多大意义了。你只能说你的时间太便宜了。

　　自动切割工具

　　这里推荐一个裁剪图片的插件：Cutterman，请移步介绍更多裁剪工具：扶我起来，我还能裁剪

　　Cutterman 是一款国产的图像切割工具。口号是“最好的图像切割工具”

　　卡特曼致力于提高设计师的工作效率，为设计师提供优秀、高效、实用的技术解决方案，解放双手。让创意不再有界限，让设计更专注！

　　一键剪图，真正解放双手

　　Cutterman让你一键自动输出你需要的各种图片，几乎没有朋友！

　　

　　关于标签

　　把标记一个一个*敏*感*词*化，费时费力，画的头晕眼花。如果你不小心，你就会错过标记。攻城狮在开发的过程中经常会发现这些缺失的标的，所以不得不和设计师反复核对。

　　剪下图片后如何标注？这是个问题。别告诉我你还在手动一一测量距离。没见到同事之前，我用PS一一测量距离。我可以看到我的强迫症。我都犯过尴尬和尴尬。记住，不要把时间浪费在体力劳动上。可以用工具解决的事情，不要用手。喜欢做测距这种体力活，为什么不搬砖，让别人用自己的手来救你的手。

　　有时注解设计师会为你做，但不是总能遇到这么体贴的设计师。我们的设计师 VS 其他人。

　　我们的设计师：

　　

　　另一位设计师：

　　

　　想想敌方队友VS我方队友

　　

　　当我们遇到这种我们的设计师时，没有人会为我们分享。这种低效的协作方式，造成了大多数互联网产品设计团队的共同悲剧：明天上线，彻夜挖掘细节，吐血调整界面，加班加点！！！

　　

　　几个强大的注释工具

　　设计师不帮我们贴标签，我们自己来做，用工具贴标签是分分钟的事。如果复杂的标签困扰着您，请不要悲伤或哭泣。

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

　　利器助工，智友助民。借助这些工具，我们的开发效率又快又好。

　　下面是一些可以让程序员和设计师相亲相爱的软件

　　对！立刻！是的！相互！爱！

　　你耕田来我织

　　你设计的让我开发

　　1、标优美官方网站：是否免费：免费登录方式：直接微信扫一扫介绍：

　　求我每天标记测距，标记你妹妹，像射狮，但是做一个死画，有没有办法每天给程序员标记PSD？但我很期待成为一个标准很高的射狮。为了能早点下班，泡妹子看电影。彪你妹，帮你解放双手……

　　操作：登录成功后，新建一个项目并上传PSD文件，然后就可以进行标记了。操作预览：

　　

　　2、蓝湖Mac应用

　　一款免费的全中文自动标注神器！彻底解放设计师的双手，上传文件，自动标注！什么？你还想自动化绘图吗？冷静，冷静……如果你丢了工作怎么办？

　　现在，这款名为Blue Lake的设计师标注神器，最新版本开始支持“自动标注”功能（目前仅支持.Sketch，即将推出Psd版）

　　只需下载“蓝湖”Mac App即可实现：一键导出Sketch设计图→自动生成注释→自动与团队分享→团队相关成员自动收到提醒等一系列自动化功能。

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

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

　　操作：登录成功后，新建一个项目并上传，然后就可以进行标记了。操作预览：

　　

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

　　如果设计图纸有变化和更新，蓝湖还可以自动添加新版本。

　　

　　现在设计师的工具那么多，这个工具有什么优势呢？

　　1.所有功能完全免费，没有项目或团队成员数量限制。

　　2.中文！中国人！中国人！

　　3.无与伦比的快！国产服务器+蓝湖工程师努力优化算法，让蓝湖“自动贴标签”的速度呼之欲出！

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

　　

　　5.设计师不仅可以为每张设计图添加备注，其他团队成员也可以对设计图进行评论，方便团队在线高效沟通。（心里有点慌……）

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

　　

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

　　既然是国内团队，交流很方便！所以如果设计师有痛点或者需求，可以积极讨论！说不定下个版本的Blue Lagoon就可以直接自动绘图了！！！

　　关于问题，蓝湖的主要功能是网页端网页平台，无需下载，直接注册即可免费使用。

　　来源：尤美公，今天头条前看到的推荐，不知道网址。. .

　　3、草图/PS + Zeplin

　　随着sketch（草图是什么，能不能吃？谷歌、必应）的流行，*敏*感*词*很多项目团队相继采用了sketch+zeplin的开发模式。不过话说回来，Sketch 真的有那么好用吗？很多朋友都说我用ps好几年了，想再学一个软件，妃子们都学不会！~

　　其实我刚进公司的时候就是这种心情。我从未使用过 mac 或 Sketch。我是一个完整的新手用户。那个时候，我的心都快碎了。但是自从接触了Sketch之后，真的很喜欢，不想再用PS了。

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

　　在使用Zeplin之前，使用Markman（手动标注，这里不推荐）进行标注，即直接在输出渲染上测量尺寸；使用Sketch插件Measure后，可以在画板中生成尺寸标注信息，并导出Annotation图，提供给开发同学使用。不管是Markman还是Measure，最终的交付成果都是一样的。接下来要引入的原创标准Markman和Measure破坏了原来的视觉效果图，标注的信息肯定会掩盖原来的设计稿。所以一般的效果图和注释要分开给出，开发往往需要在两张图片之间切换，不方便图片管理。

　　Zeplin 主要是为了解决以上问题。使用后可以一键导入Sketch中的Artboard。在设计师做好图层管理（命名、分组）的前提下，可以自动生成注释信息（并且可以标记为pt或dp），允许添加注释形成类似prd的文档，并自动提取风格指南。它还允许添加项目团队成员并将他们提供给团队以查看项目。

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

　　

　　介绍后回答两个基本问题

　　① Sketch 支持窗口吗？

　　答：对不起，目前没有！设计师为了提高工作效率，哪怕吃一两个月的土，也得买一台mac。不过，除了安装mac虚拟机，Windows用户现在也支持zeplin插件了。只要安装了插件，他们仍然可以告别没有mac的剪切图片和注释。

　　② zeplin 支持 windows 吗？

　　答：真的很有趣，这个一定有！前不久只有mac版，但是zeplin团队怎么会放弃这么大的windows市场呢？真的很喜欢Dapuben，现在zeplin也支持windows了，从此开发小哥再也不会抱怨zeplin在web端打开速度超慢了。

　　好了，废话不多说，直接进入正题。

　　③草图+zeplin的优点

　　1、sketch支持多画板，便于同时预览，占用内存较ps小很多；

2、sketch支持导出flinto，便于制作交互动效原型；

3、zeplin解放设计师的双手，从此告别切图和标注；

4、zeplin降低工程师的沟通成本，提高设计还原度。

　　详情请到安装方法导出技巧：APP打标无后顾之忧！告别剪切图标笔记-Sketch/PS+Zeplin

　　这里介绍的工具，限于篇幅，不详细教大家如何使用。如果你使用更多的工具，熟能生巧。

　　更多关于 Zeplin 的体验和详情，请访问：使用 Zeplin 的体验如何？

　　4、Sketch Measure中文文档：github：官方网站：官方教程：是否免费：免费登录方法：下载APP，注册账号登录介绍：

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

　　1.创建叠加层

　　

　　2.测量尺寸

　　

　　3.测量边距

　　

　　4.获取属性

　　

　　5.添加评论

　　

　　操作：登录成功后，新建一个项目并上传PSD文件，然后就可以进行标记了。官方DEMO预览地址：#artb...Demo操作预览：

　　

　　**关于Sketch Measure的使用教程，这里不再赘述。这是一个介绍。如果您想了解和使用它，请访问：

　　Sketch Measure 剪切图标注释插件使用教程**

　　先说说Zeplin和Sketch Measure的区别。纯粹是参考，也就是说Sketch Measure没有用过：

　　

　　齐普林：

　　①Zeplin注册免费，只能预约一个Active项目，“STARTER”17美元/月，3个Active项目，“GROWING BUSINESS”26美元/月，12个Active项目。“组织”每个用户每月6. 75 美元。

　　② 支持MAC的Sketch和PS，PC的PS。（最大优势）

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

　　④ 自动生成样式指南。（太棒了）

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

　　草图测量：

　　①完全免费。

　　②仅支持MAC Sketch，不限制查看。

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

　　④没有Zeplin智能，没有自动样式指南，而是类似于AssistantPS的手动注释。

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

　　5、 其他的比如PxCook（像素厨师），cuterman's parker（这个是收费的，喜欢的可以赞助，喜欢的免费？）等等，都差不多，所以我不会这里就不多介绍了。有兴趣的童鞋可以自己折腾玩，工具，适合自己的就是最好的，其他的我没练过，大家就边看边玩吧。. .

　　以上四个推荐软件的看法：

　　标优美适合做一些个人小项目。对于新手来说，学习成本基本为0，非常方便。web端没有平台限制；

　　对于 Blue Lake Mac 应用程序，首先你必须有一台 Mac，然后是 OSX 系统。这是一个良心的家庭工作。速度快，适合个人和企业协同开发；

　　Zeplin 适合小团队，同时也有一些协同办公的功能（消息和更新状态），要求前端能够适应这种新的方式；

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

　　您准备好购买 MacBook Pro 了吗？