好用的图片标注工具

身为一个产品汪有时也需要做做图，如果在设计稿上做好了标记与备注，这样与开发合作的时候，会更加方便。当然，设计湿也是可以用的。这几个工具是比较推荐大家使用的，其中有收费的也有免费的，可以酌情选用。

P.S. 因为我只用过马克鳗和像素大厨，所以对这两个比较熟悉。后面的几个 PS 插件也是比较有名的，只是没有用过，了解不深，但是在设计师圈内口碑还是非常不错。

1.Size Marks – 免费的PS尺寸标注脚本

安装方法

1.下载Size marks：微盘下载

2. 复制 Size Marks.jsx 到Photoshop的脚本文件夹。

• OS X: /Applications/[Photoshop]/Presets/Scripts/
• Windows: C:\[Program Files]\Adobe\[Photoshop]\Presets\Scripts

3.重启Photoshop，点击【文件】菜单 – 【脚本】 -Size Marks，如果有显示，表示安装成功了，如下图。

4. 设置脚本快捷键，点击【编辑】菜单 – 【键盘快捷键和菜单】- 然后拉到Size Marks上为其设置快捷键。如下图：

建议使用快捷键：

OX S系统：Shift+cmd+P

WIN系统：Shift+Ctrl+P

使用方法

使用这个扩展是很简单的，直接看下面的GIF图你就会明白了。

1. 选择“矩形选框工具(M)”

2. 绘制一个矩形

3. 按刚才设置的脚本快捷键Shift+Ctrl+P，接着就会自动显示标注了，如下图：

疑问

Size Marks脚本是如何判断水平和垂直标注呢？

经设计达人网小编测试，它是根据你画的矩形的长度来判断的。比如你画了个25 * 30px的矩形，那么它就以30px来标注，如果是正方形，就默认为垂直标注。

●●

2.MarkMan 马克鳗

马克鳗我是最早从它们免费 beta 版开始用的，一直用来做设计稿的标注说明非常方便。现在这个工具已经做的非常不错了，已经开始走收费路线了为 ￥60 一年，不过也可以免费使用（部分功能不支持）。

马克鳗支持直接打开 PSD 文件，当然 PNG、JPEG 文件的支持也不在话下，如果是收费版，马克鳗还支持多次修改调整标记文件（会生成相应的标注文件，请勿删除）。马克鳗还有一些其他特点，比如设计稿自动刷新、支持 Retina@2x 图片标注、标注样式自定义等。

MarkMan 马克鳗 http://www.getmarkman.com

功能

• 长度标注
• 坐标、矩形标注
• 颜色标注
• 文字说明标注

PS：使用该软件必须安装Adobe Air，切记不要升级软件。

 

3.Pxcook 像素大厨

像素大厨师我目前使用的标注工具，为啥选择这个工具呢，就是因为这个工具除了标注功能外，还多了一个 PSD 文件切图，也就是传说中的一键切图功能。只需要你的 PSD 文件是按照官方提供的要求，就可以快速切图。

切图教程：http://www.fancynode.com.cn/tutorial
 
  
 
  
 
  
 除了常规的标注功能外，像素大厨还有一些有特色的地方，比如 px 和 dp 单位的切换，标注的长度数值可以手动修改（设计稿偷懒神器，慎用）等。同样的像素大厨也是支持多次修改标注文件和实时刷新功能。切图功能能够方便的切出 Retina 双尺寸，需要切出的图层或者图层文件夹只需要加上「.jpg」或者「.png」即可。
 
  
  
   
 
  
 
  
 Pxcook 像素大厨 http://www.fancynode.com.cn
 
  
 功能
 
  
 
   
长度标注
 
   
矩形标注
 
   
颜色标注
 
   
文字说明标注
 
   
PSD 文件切片
 
  
 
  
 
 
  
 PS：使用该软件必须安装Adobe Air ，切记不要升级软件。
 
  
 
  
 
 
  
 
 
  
 
 
  
 4.Assistor PS
 
  
 这个工具是 PS 插件了，而且是一个功能比较强大的标注插件，除了标注功能，还有参考线自动生成、单位换算、圆角生成等功能，算是集中了好几个插件于一身。它的最大的特色就是可以快速的自动标注。值得高兴的是，这款强大的插件虽然目前是收费，但是官方却说「Assistor PS license will be completely free for use after June 2015.」，以前貌似是听说有金主投钱给这个团队了，所以就不差钱了，感兴趣的可以先下载试用一下。
 
  
  
   
 
  
 
  
 Assistor PS http://witstudio.net/en/assistor/
 
  
 功能
 
  
 
   
长度标注
 
   
矩形标注
 
   
颜色标注
 
   
文字标注
 
   
网格 Guild Maker
 
   
圆角生成
 
   
单位换算
 
   
Tiler（这个功能没搞清楚）
 
  
 
  
 
 
  
 
 
  
 
 
  
 5.Markly
 
  
 这是一款国外的工具，目前收费 $39.99。价格挺贵，不过官方介绍的功能倒是非常强大，可以做到一键自动标注，同时标注好的数据可以随设计稿的变动自动调整。这款工具还支持 Sketch，但是只支持 Photoshop CC 2014。
 
  
  
   
 
  
 
  
 Markly http://marklyapp.com/
 
  
 功能
 
  
 一键自动标注，标注数据按设计稿实时更新
 
  
 
   
长度标注
 
   
颜色标注
 
   
样式标注
 
  
 
  
 
 
  
 
 
  
 6.INK
 
  
 这个工具是 ps 的插件，目前支持 PS CC 和 CS6，它算是一个设计元素的规范生成工具，不过也会对相应的元素进行标注说明。使用比较方便，直接一键生成元素的规范描述。
 
  
  
   
 
  
 
  
 
 
  
INK http://ink.chrometaphore.com/