身為一個產品汪有時也需要做做圖，如果在設計稿上做好了標記與備注，這樣與開發合作的時候，會更加方便。當然，設計濕也是可以用的。這幾個工具是比較推薦大家使用的，其中有收費的也有免費的，可以酌情選用。

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 文件是按照官方提供的要求，就可以快速切圖。

<pre class="hljs objectivec" name="code" style="background: rgb(255, 255, 255); font-size: 15px; widows: 1; white-space: pre-wrap; word-wrap: break-word; padding: 0.5em; line-height: 35px;"><code class="objectivec">切圖教程：http:<span class="hljs-comment" style="color: rgb(136, 0, 0);">//www.fancynode.com.cn/tutorial</span></code>

除了常規的標注功能外，像素大廚還有一些有特色的地方，比如 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/

總結

以上是生活随笔為你收集整理的好用的图片标注工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。