{"action":"created","issue":{"url":"https://api.github.com/repos/jawil/blog/issues/11","repository_url":"https://api.github.com/repos/jawil/blog","labels_url":"https://api.github.com/repos/jawil/blog/issues/11/labels{/name}","comments_url":"https://api.github.com/repos/jawil/blog/issues/11/comments","events_url":"https://api.github.com/repos/jawil/blog/issues/11/events","html_url":"https://github.com/jawil/blog/issues/11","id":221215440,"number":11,"title":"神器！解放你的双手——UI设计稿全自动切图和标注的工具推荐","user":{"login":"jawil","id":16515708,"avatar_url":"https://avatars3.githubusercontent.com/u/16515708?v=3","gravatar_id":"","url":"https://api.github.com/users/jawil","html_url":"https://github.com/jawil","followers_url":"https://api.github.com/users/jawil/followers","following_url":"https://api.github.com/users/jawil/following{/other_user}","gists_url":"https://api.github.com/users/jawil/gists{/gist_id}","starred_url":"https://api.github.com/users/jawil/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jawil/subscriptions","organizations_url":"https://api.github.com/users/jawil/orgs","repos_url":"https://api.github.com/users/jawil/repos","events_url":"https://api.github.com/users/jawil/events{/privacy}","received_events_url":"https://api.github.com/users/jawil/received_events","type":"User","site_admin":false},"labels":[{"id":579579241,"url":"https://api.github.com/repos/jawil/blog/labels/Plugins","name":"Plugins","color":"d4c5f9","default":false},{"id":553641132,"url":"https://api.github.com/repos/jawil/blog/labels/%E5%B7%A5%E5%85%B7","name":"工具","color":"fbca04","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":20,"created_at":"2017-04-12T10:15:02Z","updated_at":"2017-04-15T03:10:27Z","closed_at":null,"body":"原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。\r\n\r\n**工欲善其事，必先利其器。**\r\n\r\n　　前不久在 **[掘金](https://juejin.im/)** 上看到一篇文章，**[前端 PS 切图方法，图文详细](https://juejin.im/post/58e9deacb123db1ad05fab2f)**，相信每个前端都经过这种最原始的切图手法，不禁想起自己以前刚入门那会懒得切图，直接QQ截图，现在想起来真是初生牛犊不怕虎，怎么方便怎么来。。。\r\n\r\n　　这种原始的PS切图，不能说不好，只能说太影响效率了，一直认为能用机器解决的事，就不要用人工操作，特别是切图这种体力活，不应该是由程序员来完成的，如果开发还停留在手工切图，没什么意义，只能说你的时间太廉价了。\r\n\r\n### 自动切图工具\r\n　　这里切图推荐一个插件：Cutterman，更多切图工具介绍请移步：[扶朕起来，朕还能切](https://w3ctrain.com/2016/07/13/cut-image/)\r\n#### [Cutterman](http://www.cutterman.cn/zh/cutterman) 是个国产的切图工具，广告语就叫“最好用的切图工具”\r\n>Cutterman致力于改善设计师的工作效率,为设计师提供优秀、高效、实用的技术解决方案, 解放双手。让创意不再有界限, 让设计更专注!\r\n\r\n* 支持多倍图\r\n* 多种格式\r\n* 多图层导出\r\n* 可以设置固定大小\r\n* 操作简单\r\n* 免费，只需要注册个账号即可\r\n\r\n#### 一键切图，真正解放双手\r\n　　Cutterman能够让你只需要点击一个按钮，就自动输出你需要的各种各样的图片，快到没有朋友！\r\n\r\n![](http://cdn.cutterman.cn//cutterman/images/cutterman/sample1.gif)\r\n\r\n   \r\n### 关于标注\r\n　　将一个个标注手动画出来，耗时费力不说，画得两眼昏花，一不小心就会出现漏标的情况。而这些漏标的地方，攻城狮们往往在开发过程中才会发现，于是不得不一次又一次地找设计师进行确认。\r\n\r\n　　切好图之后该怎么标注了，这是一个面临的问题，别告诉我你还在手动一个一个在那里测距离，我看见我同事之前就是用PS一个一个在那里量距离，看得我强迫症和尴尬症都犯了，记住，不要把时间浪费在体力活上，能用工具解决的事就不要用双手，你这么喜欢干这种测距离的体力活你咋不去搬砖呢😄，让别人用双手拯救你的双手。\r\n\r\n　　有时候标注设计师会帮你做，但是也不是总能碰见这么善解人意的设计师，我方设计师VS别人设计师。\r\n\r\n#### 我方设计师：\r\n![](http://oo2r9rnzp.bkt.clouddn.com/%E5%A4%96%E5%8D%9601_%E5%95%86%E5%93%81%E9%A1%B5.jpg?imageView2/2/w/325/q/100)\r\n#### 对方设计师：\r\n![](http://oo2r9rnzp.bkt.clouddn.com/%E5%A4%96%E5%8D%9601_%E5%95%86%E5%93%81%E9%A1%B5_spec.png?imageView2/2/w/325/q/100)\r\n\r\n#### 想起敌方队友VS我方队友\r\n![](http://wanzao2.b0.upaiyun.com/system/pictures/3599484/original/20130704155803.png-550)\r\n\r\n **碰见这种我方设计师，没人替我们分担，这种低效的协作方式，造成了大多数互联网产品设计团队普遍的悲剧：明天要上线，通宵抠细节，吐血调界面，加班！！！**\r\n\r\n![](http://oo2r9rnzp.bkt.clouddn.com/WX20170412-161001@2x.png?imageView2/2/w/325/q/100)\r\n  \r\n### 几款强大的标注工具\r\n　　设计师不帮我们标注，咋们自己来，借助工具标注也是分分钟的事情，假如复杂的标注蹂躏了你，不要悲伤，不要哭泣。\r\n\r\n　　如果有一天，设计师只需专注界面设计，不需再做切图和标注的工作；如果有一天，工程师只需专注功能框架建设，不需再花太多心思在标注UI上面；没有如果，这一天真的来了。。。\r\n\r\n　　工以利器为助，人以贤友为助。有了这些工具的辅佐，让我们开发的效率又快又好，简直如虎添翼，爽到不行。　\r\n>以下是一些能够让程序员与设计师 相爱 的软件\r\n\r\n>对！就！是！相！爱！\r\n\r\n>你耕田来我织布\r\n\r\n>你设计来我开发\r\n\r\n \r\n#### 1、标你妹\r\n##### 官方网站：http://www.biaonimeia.com/\r\n\r\n##### 是否免费：免费\r\n\r\n##### 登录方式：直接微信扫一扫\r\n\r\n##### 介绍：\r\n>天天让我标注测距离，标你妹啊，作为射击狮，却干着死美工的活，每天要为程序猿同学标注PSD有木有？但我却憧憬着成为逼格很高的射击狮。为了能够早点下班泡妹子看电影。标你妹啊帮你解放你的双手…\r\n\r\n##### 操作：登录成功之后，新建一个项目上传PSD，然后就可以进行标注。\r\n\r\n##### 操作预览图：\r\n![](http://oo2r9rnzp.bkt.clouddn.com/333.gif)\r\n\r\n   \r\n#### 2、蓝湖Mac端App\r\n　　一款全中文免费的自动标注的神器！彻底解放设计师的双手，上传文件就能蹭蹭蹭的自动标注！什么？你还想自动作图？冷静点冷静点…万一失业了呢？\r\n　　现在，这款叫蓝湖的设计师标注神器，最新版开始支持“自动标注”的功能（目前仅支持.Sketch，Psd版本即将上线）\r\n　　只需下载“蓝湖”Mac端App，即可实现：从Sketch一键导出设计图→自动生成标注→自动共享给团队→团队相关成员自动收到提醒等一系列自动化功能。\r\n##### 官方网站：https://www.lanhuapp.com/\r\n\r\n##### 是否免费：免费\r\n\r\n##### 登录方式：下载APP,注册账号登录\r\n\r\n##### 介绍：\r\n>蓝湖是一款产品设计师的协作平台,帮助设计师更快地完成工作。蓝湖通过帮助设计师更好地向团队展示设计图,描述页面之间的跳转关系。蓝湖还支持从Sketch一键分享、在线协作…\r\n\r\n##### 操作：登录成功之后，新建一个项目上传，然后就可以进行标注。\r\n\r\n##### 操作预览图：\r\n![](http://oo2r9rnzp.bkt.clouddn.com/1b7c0001e81a76965e88.gif)\r\n\r\n“自动标注”功能可以完整而清晰地将Sketch设计图中每个元素的尺寸、位置、颜色、间距、字号 等样式信息自动同步到蓝湖，团队内的工程师等同事可以随时查看。\r\n如果设计图出现改动和更新，蓝湖也能自动添加新版本。\r\n\r\n![](http://oo2r9rnzp.bkt.clouddn.com/1b780004ea81edce53b4.gif)\r\n\r\n如今设计师的工具那么多，这一款工具的优势在哪里呢\r\n\r\n1.所有功能完全免费，没有任何项目或团队成员数量限制。\r\n2.中文的！中文的！中文的！\r\n3.无与伦比的快！在国内的服务器+蓝湖工程师呕心沥血优化的算法，使蓝湖的“自动标注”的速度嗖嗖的！\r\n4.蓝湖还整合了设计图流程的展示，设计图历史版本管理，多种情况和状态的设计图管理等功能。\r\n\r\n![](http://oo2r9rnzp.bkt.clouddn.com/1b7e0001e54711566be3.gif)\r\n\r\n5.设计师不但可以为每张设计图添加备注文档，其他团队成员还可以针对设计图发表评论，方便团队在线高效沟通。（内心竟有点小小的惶恐…）\r\n6.在蓝湖上，还可以基于设计图快速制作一个高保真的交互原型，让工程师不用再跑来问你“这个按钮跳到哪啊”，该原型还可以在蓝湖手机端App和微信上进行操作和预览。\r\n\r\n![](http://oo2r9rnzp.bkt.clouddn.com/1b7b0001f73b91845b1e.gif)\r\n\r\n美团，网易，面包旅行等等国内知名互联网公司都参与了蓝湖的早期内测，为 “蓝湖”提出了很多专业的建议。“蓝湖”基于这些反馈快速迭代，而“自动标注”功能就是其中一项。\r\n由于是国内的团队，沟通起来非常方便！所以如果设计师们有痛点或是需求，可以积极讨论！没准下版本的蓝湖就能直接自动作图了呢！！！\r\n对惹，蓝湖主体功能是Web端网页平台，不需要下载，直接注册就可以免费使用。\r\n\r\n来源：你丫才美工（Ymeigong)，之前今日头条看到的推荐，不知道网址。。。\r\n\r\n   \r\n#### 3、Sketch/PS + Zeplin\r\n　　随着[sketch](http://www.sketchcn.com/sketch-chinese-user-manual.html)的普及（**sketch是啥，能吃吗？自行谷歌、必应**），国内外很多项目团队都陆续用起了sketch＋zeplin的开发模式。不过话说回来，[sketch](http://www.sketchcn.com/sketch-chinese-user-manual.html)真的有那么好用吗？很多小伙伴们表示用ps好几年了，要我重新学一个软件，臣妾做不到啊！～\r\n\r\n　　其实刚进公司的时候也是这种心情的，没用过mac更没用过sketch，完全的小白用户，当时内心几乎是奔溃的。但是自从接触[sketch](http://www.sketchcn.com/sketch-chinese-user-manual.html)后，真的是爱不释手，都不想用回ps了。\r\n\r\n\r\n##### 官方网站：https://www.zeplin.io/\r\n\r\n##### PS导出zeplin官方视频教程：https://www.youtube.com/watch?v=0cVbzq-Q43M\r\n\r\n##### Sketch导出zeplin 官方视频教程：https://www.youtube.com/watch?v=o9kOpAaDpQU\r\n\r\n##### 是否免费：免费\r\n\r\n##### 登录方式：下载APP，注册账号登录\r\n\r\n##### 介绍：\r\n>在使用 Zeplin 之前，最早是使用马克曼(**手动标注，这里不做推荐**)进行标注的，也就是直接在输出效果图上量尺寸；使用 Sketch 插件 Measure 之后，可以在画板中生成尺寸标注信息，导出标注图提供给开发同学使用。无论是马克曼还是 Measure，最后的交付物是一致的，马克曼和接下来要介绍的Measure这种原始的标准就是已经破坏了原本的视觉效果图，标注的信息一定会对原设计稿形成遮挡，因此一般效果图和标注图要分开给，开发也经常需要在两个图之间切换，图片管理不太方便。\r\n\r\n>zeplin 主要就是为了解决上述问题的，使用它之后，可以在 Sketch 中一键导入 Artboard，在设计师做好图层管理（命名、分组）的前提下，它可以自动生成标注信息（并且可以标注为 pt 或 dp），允许添加注释形成类 prd 文档，并且自动提取 Style Guide，同时还允许添加项目组成员，提供给团队组查看项目。\r\n\r\n##### 操作：登录成功之后，新建一个项目上传素材，然后就可以进行操作。\r\n\r\n##### 官方预览图：\r\n![](http://oo2r9rnzp.bkt.clouddn.com/0227cf578dcda50000018c1b23a0c1.png@800w_1l_2o)\r\n\r\n介绍之后回答两个基本问题\r\n##### ①sketch支持windows吗？\r\n答：不好意思，目前没有！设计师为了提升工作效率，就算吃土一两个月也要买台mac。不过windows用户除了装mac虚拟机外，现在ps也支持zeplin插件了，只要安装个插件，没有mac也照样可以任性的告别切图和标注。\r\n\r\n##### ②zeplin支持windows吗？\r\n答：真够意思，这个必须有！不久前只有mac版，不过zeplin团队怎么会放弃windows那么大块的市场呢。真是喜大普奔，现在zeplin也支持windows了，从此开发哥哥再也不会抱怨网页端的zeplin打开速度超级慢了。\r\n\r\n好了，废话不多说，直接进正题。\r\n\r\n##### ③sketch＋zeplin的优势\r\n\r\n```\r\n1、sketch支持多画板，便于同时预览，占用内存较ps小很多；\r\n2、sketch支持导出flinto，便于制作交互动效原型；\r\n3、zeplin解放设计师的双手，从此告别切图和标注；\r\n4、zeplin降低工程师的沟通成本，提高设计还原度。\r\n```\r\n更多细节已经安装方法导出技巧请移步：[APP标注无烦恼！告别切图标注-Sketch/PS+Zeplin](http://www.zuimeiui.com/app-sketch-ps-zeplin.html)\r\n这里这介绍工具，由于篇幅有限，并不详细教你怎么用，工具多用用就会了，熟能生巧。\r\n更多关于Zeplin的体验和细节请移步：[Zeplin 的使用体验如何？](https://www.zhihu.com/question/27713420)\r\n\r\n  \r\n#### 4、Sketch Measure\r\n##### 中文文档：http://sketch.im/plugins/1\r\n\r\n##### github：https://github.com/utom/sketch-measure\r\n\r\n##### 官方网站：http://utom.design/measure/\r\n\r\n##### 官方使用教程：http://utom.design/measure/how-to.html\r\n\r\n##### 是否免费：免费\r\n\r\n##### 登录方式：下载APP,注册账号登录\r\n\r\n##### 介绍：\r\n>Sketch Measure是一款可用于标注和设计规范的工具，支持Sketch 3.5版以上。Measure帮你解放你的双手…\r\n\r\n1.创建叠加\r\n\r\n![](http://jbcdn1.b0.upaiyun.com/2016/04/28c8edde3d61a0411511d3b1866f0636.gif)\r\n\r\n2.度量尺寸\r\n\r\n![](http://jbcdn1.b0.upaiyun.com/2016/04/665f644e43731ff9db3d341da5c827e1.gif)\r\n\r\n3.度量边距\r\n\r\n![](https://camo.githubusercontent.com/676e39aef5da7fd51fcafbb1cd5ee280d3b3c96f/687474703a2f2f75782e75746f6d2e75732f7475746f7269616c2f332e676966)\r\n\r\n4.获取属性\r\n\r\n![](http://jbcdn1.b0.upaiyun.com/2016/04/011ecee7d295c066ae68d4396215c3d01.gif)\r\n\r\n5.添加注释\r\n\r\n![](http://jbcdn1.b0.upaiyun.com/2016/04/4e44f1ac85cd60e3caa56bfd4afb675e1.gif)\r\n\r\n##### 操作：登录成功之后，新建一个项目上传PSD，然后就可以进行标注。\r\n\r\n##### 官方DEMO预览地址：http://utom.design/news/#artboard0\r\n\r\n##### Demo操作预览图：\r\n![](http://oo2r9rnzp.bkt.clouddn.com/2017-04-12%2015.51.20.gif)\r\n\r\n**关于Sketch Measure的使用教程，这里也不多细说，这里抛砖引玉的介绍一下，想要了解和使用请移步：\r\n[Sketch Measure切图标注插件使用教程](http://www.sketchs.cn/plugins/detail/263.html)**\r\n\r\n下面谈一谈Zeplin和Sketch Measure的区别，纯属引用，表示没用过Sketch Measure：\r\n\r\n![](http://oo2r9rnzp.bkt.clouddn.com/v2-753e66e0f974341265450e0e1f83ac63_b.png)\r\n##### Zeplin：\r\n>①Zeplin注册免费，只能保留一个Active项目，“STARTER”17刀／月，3个Active项目，“GROWING BUSINESS”26刀／月，12个Active项目。“ORGANIZATION”每个用户6.75刀／月。\r\n②支持MAC的Sketch和PS，以及PC的PS。（最大的优点）\r\n③数据必须上传到网络上，可以用客户端查看也可以网页查看，必须是注册用户。（很麻烦，有些公司不允许上传就没办法了）\r\n④自动生成styleguide。（非常棒）\r\n⑤切图需要查看相应页面时，从切图栏下载。（我用的并不多，也可能有其他方式）\r\n\r\n##### Sketch Measure：\r\n>①完全免费。\r\n②只支持MAC Sketch，但查看不受限制。\r\n③数据保存在本地（html文件），方便打包后发邮件，缺点是每次更新都要再发一遍，管理麻烦。\r\n④没有Zeplin智能，没有自动styleguide，但是有类似AssistorPS一样的手动标注。\r\n⑤有“颜色命名”但比styleguide差很多，希望以后能更新类似功能。自动打包输出切图，支持iOS和Android的命名方式。\r\n\r\n  \r\n#### 5、其他诸如[PxCook（像素大厨）](http://www.fancynode.com.cn/pxcook)，cutterman的[parker](http://www.cutterman.cn/zh/parker)（这个收费，喜欢的可以赞助一下，切图那个免费哦😯）等大同小异，这里就不多做介绍，感兴趣的童鞋可以自己折腾玩玩，工具嘛，适合自己的就是最好的，其他一些我也没有实践，大家自己看着玩。。。\r\n\r\n   \r\n### 以上四个推荐软件的看法：\r\n\r\n>标你妹适合小型的个人的一些项目，对于新手来说，学习成本基本为0，非常方便，web端没有平台限制；\r\n\r\n>蓝湖Mac端APP首先你得有一台Mac，其次是OSX系统，国内的良心之作，速度很快，适合个人和企业协同合作开发；\r\n\r\n>Zeplin适合小型的团队，还带有一部分协作办公的功能（留言和更新状况），要求前端也能适应这种新的方式；\r\n\r\n>Sketch Measure更传统一些，本地文档、打包切图等等，更适合有自己办公流程的大公司，仅仅支持Mac。\r\n\r\n   \r\n### 是不是准备入手一台MacBook Pro了呢？\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/jawil/blog/issues/comments/294268342","html_url":"https://github.com/jawil/blog/issues/11#issuecomment-294268342","issue_url":"https://api.github.com/repos/jawil/blog/issues/11","id":294268342,"user":{"login":"txqcoder","id":26913463,"avatar_url":"https://avatars3.githubusercontent.com/u/26913463?v=3","gravatar_id":"","url":"https://api.github.com/users/txqcoder","html_url":"https://github.com/txqcoder","followers_url":"https://api.github.com/users/txqcoder/followers","following_url":"https://api.github.com/users/txqcoder/following{/other_user}","gists_url":"https://api.github.com/users/txqcoder/gists{/gist_id}","starred_url":"https://api.github.com/users/txqcoder/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/txqcoder/subscriptions","organizations_url":"https://api.github.com/users/txqcoder/orgs","repos_url":"https://api.github.com/users/txqcoder/repos","events_url":"https://api.github.com/users/txqcoder/events{/privacy}","received_events_url":"https://api.github.com/users/txqcoder/received_events","type":"User","site_admin":false},"created_at":"2017-04-15T03:10:27Z","updated_at":"2017-04-15T03:10:27Z","body":"果然还是手动切图最放心  哈哈"}}
{"actor":{"display_login":"txqcoder"}}