原文收录在我的GitHub博客（https://github.com/jawil/blog）。大家一起多交流多学习，一起进步，以学习者的身份写博客，记录点点滴滴。工欲善其事，必先利其器。我只是一个工具搬运工。下回给大家推荐一波Mac上好用的小工具。 前不久看到一篇关于掘金的文章。前端PS切法有详细图文。经过这种最原始的切图方法，我不禁想到自己刚入门的时候懒得直接在QQ上切图截图了。现在想起来就像初生牛犊不怕虎。.. 这种原版的PS图片切割不能说不好，只能说太影响效率了。我一直认为可以用机器来解决，所以不要用人工操作，尤其是像裁图这样的体力劳动。它是由程序员完成的。如果开发还停留在手工裁剪上，那是没有意义的。只能说你的时间太便宜了。自动切图工具 这里推荐一款切图插件：Cutterman。更多剪图工具请移步：扶我起来，我还能剪图。Cutterman是一款国产的图像切割工具。口号是“最好的Cutterman，致力于提高设计师的工作效率，为设计师提供优秀、高效、实用的技术解决方案，解放双手。让创意不再有界限，让设计更专注！支持多种图片，多种格式，多层导出，可以设置固定尺寸，操作简单免费，只需要注册一个账号就可以一键切图，真正解放双手 CuttermanIt可以让你只需要点击一个按钮，自动输出你需要的各种图片，快到没朋友！关于标注 手工一张一张画出标签，费时费力不说绘图，眼睛模糊，一不小心就会漏标。攻城狮们在开发过程中经常会发现这些漏标，只好再三找设计师确认。 切图后怎么标注，这是个问题，别告诉我你还在手工一一测量距离，我看到我同事在用PS一一测量距离，可见我患有强迫症和尴尬。记住，不要把时间浪费在体力劳动上。工具可以解决的事情，不要用手去解决。喜欢做这种测距之类的体力劳动为什么不搬砖呢？什么？，让别人用他们的手拯救你的手。 有时贴标设计师会帮你，但不是总能遇到这么贴心的设计师，我们的设计师VS其他设计师。我们的设计师：对手的设计师：想着敌方队友VS我方队友遇到这样的我们的设计师，没有人会替我们分担。这种低效的协作方式，造成了大多数互联网产品设计团队的通病。:明天上线，彻夜挖细节，吐血调界面，加班加点！！！几个强大的标注工具 设计师不帮我们标注，我们自己动手吧，用工具标注，分分钟的事情。如果复杂的标签毁了你，不要难过，不要哭泣。 如果有一天，设计师只需要专注于界面设计，无需做裁剪和标注的工作；如果有一天，工程师只需要专注于功能框架的构建，而不需要花太多时间在UI标签上；如果不是，这一天真的来了。.. 工者以利器相助，民以德友相助。在这些工具的辅助下，我们的开发效率又快又好，更是如虎添翼，酷毙了。 这里有几款让程序员和设计师爱不释手的软件对！立刻！是的！相互！喜欢！你耕田，我织布，你设计，我开发1、比奥尼美亚官网：http://www.bionanimeia.com/是否免费：免费登录方式：直接微信扫一扫介绍：让我标记测量距离day，mark你妹，身为射狮，却干着死活的美工，天天要给程序员打PSD，有什么理由吗？但我期待成为一只优质的射狮。为了能早点下班接妹子看电影。标记妹子帮你解放双手...操作：登录成功后，新建一个项目上传PSD，然后就可以标记了。操作预览：2.蓝湖App forMac是一款免费的中文自动标注神器！彻底解放设计师的双手，上传文件可自动标注！什么？你还想自动绘制吗？冷静，冷静……万一丢了工作怎么办？ 现在这款名为BlueLake的设计师标注工具最新版本支持“自动标注”功能（目前只支持.Sketch，Psd版即将上线） 只需下载“BlueLake”Mac终端App，可以实现：从Sketch一键导出设计图→自动生成标注→自动分享给团队→相关团队成员自动提醒等一系列自动化功能。官网：https://www.lanhuapp.com/是否免费：免费登录方式：下载APP，注册账号并登录简介：澜湖是产品设计师的协作平台，帮助设计师完成工作快点。蓝湖帮助设计师更好地向团队呈现设计图，描述页面间的跳转关系。BlueLake还支持Sketch的一键分享和在线协作……操作：登录成功后，新建一个项目并上传，然后就可以标注了。运行预览：“自动标注”功能可以将Sketch设计图中各个元素的大小、位置、颜色、间距、字体大小等样式信息完整、清晰地同步到BlueLake，工程师和团队其他同事可以随时查看。如果设计图有变动和更新，BlueLagoon也可以自动添加新版本。现在设计师的工具那么多，这个工具有什么优势呢？1、所有功能完全免费，不限制项目数量和团队成员数量。2.中文！中国人！中国人！3.无与伦比的速度！国产服务器+蓝湖工程师精心优化算法，让蓝湖“自动标注”速度飙升！4、蓝湖还集成了设计过程的展示、设计的历史版本管理、设计在各种情况和状态下的管理。5、设计师不仅可以在每张设计图上添加备注文档，其他团队成员也可以对设计图进行评论，方便高效的在线团队沟通。（心里有点害怕。。。）6.在蓝湖上，你可以根据设计图快速做出高保真交互原型，让工程师不用来问你“在哪”这个按钮跳转到？”可在蓝湖手机APP和微信上操作预览。美团、网易、面包旅行等国内知名互联网公司参与了蓝湖的早期内测，并为“蓝湖”提出了诸多专业建议。《蓝湖》根据这些反馈快速迭代，“自动标注”功能就是其中之一。既然是国内团队，交流起来很方便！所以如果设计师有痛点或者需求，可以积极讨论！说不定下个版本的BlueLagoon就可以直接自动绘制了！！！对了，BlueLagoon的主要功能是网页平台，无需下载直接注册即可免费使用。来源：游亚彩艺术（Ymeigong），之前在今日头条看到的推荐，不知道网址。..3.Sketch/PS+Zeplin 随着sketch的火爆（sketch是什么，能不能吃？自己谷歌，Bing），国内外很多项目组相继采用了sketch+zeplin的开发模式。不过话说回来，sketch真的那么好用吗？很多朋友说他们用PS好几年了，要我重新学一个软件，我做不到！~ 其实我刚进公司的时候也是这样的心情。我从未使用过Mac，更不用说草图了。但是自从接触了Sketch之后，实在是爱不释手，也不想再回到PS了。官网：https://www.zeplin.io/PS导出zeplin官方视频教程：https://www.youtube.com/watch...草图导出zeplin官方视频教程：https://www.youtube.com/watch...是否免费：免费登录方式：下载APP，注册账号，登录测量尺寸；使用Sketch插件Measure后，可以在画板中生成尺寸信息，导出尺寸图供开发同学使用。不管是Markman还是Measure，最终的交付物都是一样的。接下来要介绍的Markman和Measure的原标准破坏了原来的视觉效果图，标注的信息肯定会挡住原来的设计稿，所以一般效果图和标注图要分开提供，开发时经常需要在两张图之间切换，图片管理不是很方便。Zeplin主要是为了解决以上问题。使用后可以一键导入Sketch中的Artboard。在设计者做好图层管理（命名、分组）的前提下，可以自动生成注释信息（可以标记为pt或dp），允许添加注释形成类似prd的文档，以及StyleGuide是自动提取的，并且还允许添加项目团队成员以供团队查看项目。操作：登录成功后，新建项目上传素材，即可操作。官方预览图：介绍完毕，回答两个基本问题①Sketch支持windows吗？A：抱歉，暂不提供！为了提高工作效率，设计师哪怕吃上一两个月的土也得买一台Mac。不过现在windows用户除了安装mac虚拟机，还支持ps中的zeplin插件。只要安装一个插件，你仍然可以告别没有mac的切割和标签。②zeplin支持windows吗？-答：真有趣，这个必须有！前不久还只有mac版，但是zeplin团队怎么可能放弃windows这么大的市场。太开心了，现在zeplin也支持windows了，以后开发小弟再也不会抱怨zeplin在网页打开速度超慢了。好了，废话不多说，进入正题。③sketch+zeplin的优点1、sketch支持多个画板，方便同时预览，占用内存比PS少很多；2、Sketch支持导出flinto，方便制作交互式动态原型；;4、Zeplin降低了工程师的沟通成本，提高了设计的还原度。更多详情请点击安装方法和导出技巧：APP标签无忧！告别裁剪和标注-Sketch/PS+Zeplin下面介绍一下工具。由于篇幅有限，就不详细教大家如何使用了。您可以更频繁地使用该工具，熟能生巧。更多关于Zeplin的使用体验和详情，请前往：使用Zeplin的体验如何？4.SketchMeasure中文文档：http://sketch.im/plugins/1github：https://github.com/utom/sketc...官网：http://utom.design/measure/官方教程：http://utom.design/measure/ho...是否免费：免费登录方式：下载APP，注册账号登录简介：SketchMeasure是一个可以用来标注和设计规范的工具，支持素描3.5及以上。Measure帮您解放双手...1.创建叠加层2.测量尺寸3.测量边距4.获取属性5.添加标注操作：登录成功后，新建一个项目，上传PSD，即可进行标注.官方DEMO预览地址：http://utom.design/news/#artb...Demo操作预览：**关于SketchMeasure的教程，这里就不赘述了，这里先介绍一下，我想知道和使用请移步：SketchMeasure切割和标注插件教程**说说Zeplin和SketchMeasure的区别，纯属参考，说明你没用过SketchMeasure:Zeplin:①Zeplin免费注册，只能保留一个Active项目，“STARTER”$17/月，3个Active项目，“GROWINGBUSINESS”$26/月，12个Active项目。“ORGANIZATION”是每位用户每月6.75。②支持MAC的Sketch和PS，PC的PS。（最大优势）③数据必须上传到网络，可以客户端或网页查看，必须是注册用户。（很麻烦，有的公司不允许上传，所以没办法）④自动生成styleguide。（很好）⑤需要查看切图对应页面时，从切图栏下载。（我用的不多，可能还有其他方法）草图测量：①完全免费。②只支持MACSketch，但不限制查看。③数据保存在本地（html文件），方便打包后发送邮件。缺点是每次更新都需要重新发送，管理起来比较麻烦。④没有Zeplin智能，没有自动styleguide，但是有类似AssistorPS的手动标注。⑤有“颜色命名”但比styleguide差很多。希望以后能更新类似的功能。自动打包输出切图，支持iOS和Android两种命名方式。5.其他如PxCook（像素大厨），cutterman'sparker（这个是收费的，喜欢可以赞助，剪图免费？）等，这里就不多介绍了。有兴趣的童鞋可以自己折腾玩，工具，适合自己的才是最好的，其他的我也没有实践过，大家自己看玩玩。..对以上四款推荐软件的看法：表友美适合一些小规模的个人项目。对于新手来说，学习成本基本为0，非常方便。web端无平台限制；BlueLakeMac端APP你必须先有一台Mac，紧随其后的是国内良心之作OSX系统，速度快，适合个人和企业协同开发；Zeplin适合小团队，也有一些协同办公的功能（消息和更新状态），需要前端也适配这种新方式；SketchMeasure比较传统，有本地文档，打包切图等，比较适合有自己办公流程的大公司，只支持Mac。您准备好购买MacBookPro了吗？
