技术文章

  我的原文 GitHub博客 (https://github.com/jawil/blog) ，如果你喜欢，你可以关注最新的动态。我们可以一起交流和学习，共同进步，作为学习者写博客，记录每一点。

  工欲善其事，必先利其器。我只是工具工具搬运工，下次把它拿走Mac实用的小工具也推荐一波

  前不久在 掘金 在前端看到一篇文章 PS 切图方法，详细的图片和文本，我相信每个前端都经过这种最原始的切割技术，不禁想起他们刚开始懒得切割，直接QQ截图，现在想起来真的是初生牛犊不怕虎，怎么方便。

  这种原始的PS切割，不能说不好，只能说太影响效率，总是认为可以用机器解决，不要手动操作，尤其是切割这种体力工作，不应该由程序员完成，如果开发仍然停留在手动切割，没有意义，只能说你的时间太便宜了。

  这里推荐一个插件：Cutter ** n，请移动更多切图工具：帮我起床，我还能切

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

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

  手动画一个个标记需要时间和精力。如果你画得眼花缭乱，你会不小心漏掉标记。在这些漏标的地方，攻城狮经常在开发过程中发现，所以他们不得不一次又一次地找设计师确认。

  如何标记切割图片后，这是一个面临的问题，不要告诉我你还在手动测量距离，我看到我的同事在使用之前PS一个接一个地测量距离，看到我的强迫症和尴尬，记住，不要把时间浪费在体力工作上，可以用工具解决不要用手，你喜欢做这种测量距离的体力工作，你为什么不搬砖呢？😄，让别人用双手救你的手。

  有时候标注设计师会帮你做，但并不总是遇到这么体贴的设计师，我们的设计师VS别人的设计师。

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

  如果设计师不帮我们标怎么来，借助工具标记也是几分钟，如果复杂的标记破坏了你，不要悲伤，不要哭。

  如果有一天，设计师只需要专注于界面设计，而不需要做切割和标记；如果有一天，工程师只需要专注于功能框架的建设，而不需要花太多的精力来标记UI上面；没有，这一天真的来了。

  工以利器为助，人以贤友为助。有了这些工具的帮助，我们的开发效率又快又好，就像老虎加翅膀一样酷。

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

  对！对！对！相！

  你耕地来我织布

  你为我设计开发

  让我每天标记测量距离，标记你妹妹，作为射击狮，但做死艺术工作，每天标记程序猿学生PSD有木头吗？但我期待着成为一只强迫性很高的射击狮。为了早点下班，泡泡姐姐看电影。标记你妹妹，帮你解放双手…

  全中文免费自动标注神器！完全解放设计师的手，上传文件可以自动标记！什么？你还想自动画吗？冷静点…万一失业呢？ 现在，最新版本的蓝湖设计师标注神器开始支持自动标注功能(目前只支持.Sketch，Psd版本即将上线) 只需下载蓝湖Mac端App，可实现：从Sketch一键导出设计图→自动生成标记→与团队自动共享→一系列自动化功能，如团队成员自动收到提醒。

  蓝湖是帮助设计师更快完成工作的产品设计师合作平台。蓝湖帮助设计师更好地向团队展示设计图纸，描述页面之间的跳转关系。蓝湖还支持Sketch一键共享，在线合作…

  自动标记功能可以完整清晰Sketch尺寸、位置、颜色、间距位置、颜色、间距和大小 当样式信息自动同步到蓝湖时，团队中的工程师和其他同事可以随时查看。如果设计图纸发生变化和更新，蓝湖也可以自动添加新版本。

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

  1.所有功能都是免费的，没有任何项目或团队成员的数量限制。2.中文！中文！中文！3.无与伦比的快！国内服务器 蓝湖工程师努力优化算法，使蓝湖的自动标记速度嗖嗖！4.蓝湖还集成了设计图流程展示、设计图历史版管理、各种情况和状态设计图管理等功能。

  5.设计师不仅可以为每张设计图纸添加备注文件，还可以对其他团队成员的设计图纸发表评论，方便团队在线有点害怕…）6.在蓝湖上，你也可以根据设计地图快速制作一个高保真的交互原型，这样工程师就不用问你这个按钮跳到哪里，这个原型也可以在蓝湖手机上App操作和预览微信。

  美团、网易、面包旅游等国家都参与了蓝湖的早期内部测试 蓝湖提出了许多专业建议。基于这些反馈，蓝湖快速迭代，自动标记功能就是其中之一。因为是国内团队，沟通很方便！因此，如果设计师有痛点或需求，可以积极讨论！也许蓝湖的下一个版本可以直接自动绘制！！！对惹，蓝湖的主要功能是Web端网页平台，不需要下载，可以直接注册 ** 。

  来源:你丫才艺术家（Ymeigong)，不知道今天头条看到的推荐网站。

  随着sketch的普及（sketch是什么？你能吃吗？自己谷歌，必应)，国内外很多项目团队陆续使用。sketch＋zeplin开发模式。但话说回来，sketch真的这么好用吗？很多朋友说用？ps好几年了，要我再学一个软件，臣妾做不到！

  也是这种心情，没用过 ** c更没用过sketch，完整的小白用户当时几乎崩溃了。但自从接触以来sketch之后真的放不下，不想用回来。ps了。

  在使用 Zeplin 之前最早用马克曼(手动标注，这里不推荐)标注，也就是直接测量输出效果图上的尺寸；使用 Sketch 插件 Measure 之后，尺寸标记信息可以在画板中生成，导出标记图供开发学生使用。不管是马克曼还是马克曼 Measure，最后的交付是一致的，马克曼和接下来要介绍的Measure这个原始标准已经破坏了原始的视觉效果图，标记的信息肯定会阻挡原始设计草案，所以一般的效果图和标记图应该分开给出，开发往往需要在两个图之间切换，图像管理不是很方便。

  zeplin 主要是为了解决上述问题，使用后可以 Sketch 中一键导入 Artboard，在图层管理(命名、分组)的前提下，设计师可以自动生成标记信息(并可以标记为 pt 或 dp），允许添加注释形成类 prd 并自动提取文档 Style Guide，还允许向团队组添加项目组成员查看项目。

  介绍后，回答两个基本问题

  A:对不起，目前还没有！为了提高工作效率，设计师即使吃土一两个月也要买一台 ** c。不过windows用户除了装 ** c虚拟机外，现在ps也支持zeplin插件，只要安装插件，就没有 ** c也可以任性告别切图和标记。

  答:真的很有意思，这个一定有！不久前，只有 ** c版，不过zeplin团队怎么会放弃？windows那么大市场呢？真喜大普奔，现在zeplin也支持windows从那以后，我哥哥再也不会抱怨网页了zeplin打开速度超慢。

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

  安装方法导出更多细节，请移动：APP标记没有麻烦！告别切割图标-Sketch/PS Zeplin这里介绍的工具，由于篇幅有限，不详细教你怎么用，多用工具，熟能生巧。更多信息Zeplin请移动体验和细节:Zeplin 使用体验如何？

  Sketch Measure该工具可用于标记和设计规范，支持Sketch 3.5版以上。Measure帮你解放双手…

  1.创建叠加

  2.度量尺寸

  3.度量边距

  4.获取属性

  5.添加注释

  关于Sketch Measure这里不详细说明使用教程。这里介绍一下抛砖引玉。如果您想了解和使用它，请移动它：Sketch Measure切割图纸标记插件使用教程

  下面谈一谈Zeplin和Sketch Measure区别纯粹是引用，说明没用过Sketch Measure：

  ①Zeplin免费注册只能保留一个Active项目，“STARTER17刀/月，3个Active项目，“GROWING BUSINESS26刀/月，12个Active项目。“ORGANIZATION每用户6.75刀/月。②支持MAC的Sketch和PS，以及PC的PS。(最大优势)③数据必须上传到网络上，可以用客户端或网页查看，必须是注册用户。(很麻烦，不允许上传就没办法了)④自动生成styleguide。（非常棒）⑤当需要查看相应的页面时，从切图栏下载切图。(我用的不多，可能还有其他方法)

  ①完全免费。②只支持MAC Sketch，但检查不受限制。③本地保存数据（html文件)，方便打包后发邮件，缺点是每次更新都要再发，管理麻烦。④没有Zeplin智能，没有自动styleguide，但是有类似AssistorPS手动标记相同。⑤有颜色命名但比较styleguide差很多，希望以后能更新类似的功能。支持自动包装输出切图iOS和Android命名方法。

  一些适合小说，学习成本基本为0，非常方便，web端没有平台限制；

  蓝湖Mac端APP首先，你必须有一个Mac，其次是OSX系统，国内良心作品，速度快，适合个人与企业合作发展；

  Zeplin适合小团队，还具有部分协作办公功能(留言和更新)，要求前端适应这种新方式；

  Sketch Measure更传统的是，本地文档、包装切图等更适合自己，只支持Mac。