258资源分享网

原文收录在作者的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。

工欲善其事，必先利其器。

　　前不久在 掘金 上看到一篇文章，前端 PS 切图方法，图文详细，相信每个前端都经过这种最原始的切图手法，不禁想起自己以前刚入门那会懒得切图，直接QQ截图，现在想起来真是初生牛犊不怕虎，怎么方便怎么来。。。

　　这种原始的PS切图，不能说不好，只能说太影响效率了，一直认为能用机器解决的事，就不要用人工操作，特别是切图这种体力活，不应该是由程序员来完成的，如果开发还停留在手工切图，没什么意义，只能说你的时间太廉价了。

自动切图工具

　　这里切图推荐一个插件：Cutterman，更多切图工具介绍请移步：扶朕起来，朕还能切

Cutterman 是个国产的切图工具，广告语就叫“最好用的切图工具”

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

支持多倍图

多种格式

多图层导出

可以设置固定大小

操作简单

免费，只需要注册个账号即可

一键切图，真正解放双手

　　Cutterman能够让你只需要点击一个按钮，就自动输出你需要的各种各样的图片，快到没有朋友！






关于标注

　　将一个个标注手动画出来，耗时费力不说，画得两眼昏花，一不小心就会出现漏标的情况。而这些漏标的地方，攻城狮们往往在开发过程中才会发现，于是不得不一次又一次地找设计师进行确认。

　　切好图之后该怎么标注了，这是一个面临的问题，别告诉我你还在手动一个一个在那里测距离，我看见我同事之前就是用PS一个一个在那里量距离，看得我强迫症和尴尬症都犯了，记住，不要把时间浪费在体力活上，能用工具解决的事就不要用双手，你这么喜欢干这种测距离的体力活你咋不去搬砖呢，让别人用双手拯救你的双手。

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

我方设计师：

对方设计师：

想起敌方队友VS我方队友


碰见这种我方设计师，没人替我们分担，这种低效的协作方式，造成了大多数互联网产品设计团队普遍的悲剧：明天要上线，通宵抠细节，吐血调界面，加班！！！





几款强大的标注工具

　　设计师不帮我们标注，咋们自己来，借助工具标注也是分分钟的事情，假如复杂的标注蹂躏了你，不要悲伤，不要哭泣。

　　如果有一天，设计师只需专注界面设计，不需再做切图和标注的工作；如果有一天，工程师只需专注功能框架建设，不需再花太多心思在标注UI上面；没有如果，这一天真的来了。。。

　　工以利器为助，人以贤友为助。有了这些工具的辅佐，让我们开发的效率又快又好，简直如虎添翼，爽到不行。　

以下是一些能够让程序员与设计师 相爱 的软件

对！就！是！相！爱！

你耕田来我织布

你设计来我开发




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

天天让我标注测距离，标你妹啊，作为射击狮，却干着死美工的活，每天要为程序猿同学标注PSD有木有？但我却憧憬着成为逼格很高的射击狮。为了能够早点下班泡妹子看电影。标你妹啊帮你解放你的双手…

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






2、蓝湖Mac端App