免費了！切圖標記外掛神器ASSISTOR PS

可苦可樂8 ：首先要告訴你們一個好消息，本來 $9.99 一個月 / $99.9 一年 的 Assistor PS 現已免費下載。對於學生用戶全面免費，而其餘用戶在今年 6 月以後就不用再購買商業許可證也能夠無償使用，功能強大，特別好用 >> >

Assistor官方下載地址

http://witstudio.net/en/assistor/download

本文章來自於網絡，謝謝大神分享！

基本介紹

與其餘切圖標記軟件不一樣的是，Assistor PS 是徹底獨立於 PS 自己的，說是一個外掛更加合適，旨在提升切圖標記的效率及速度。雖然不是一個插件，可是它與 PS 是連通的，當你在 PS 選擇一個圖層在後，便可使用它的功能。若是你肯花點時間下載是試用，相信不會讓你失望，甚至能可能讓你以爲相見恨晚。

主要功能以下：

• 輕鬆建立標記文檔，一鍵導出圖層
• 單位數值轉換快速
• 快速建立參考線（相似 GuideGuide）
• 圓角矩形調整
• 按照固定的間隔複製圖層

官方介紹視頻（已 fanqiang 轉到優酷）：http://v.youku.com

Assistor PS 適用於 PS 3.0 以上的版本，同時兼容 Windows 系統和 Mac 系統。

看完視頻，心急的同窗可先直接前往它家的網站 http://witstudio.net/en/assistor/download 進行下載。

想了解更加詳細的功能介紹的及一些使用小技巧的，能夠繼續往下看。

切圖標記功能

廣大切圖仔最關心最經常使用的功能搶先亮相，尤爲是網頁設計師和 UI 設計師，須要頻繁和開發工程師打交道，若是不標記清楚，開發作出來的效果有時候簡直能嚇死人。

「你騙人，設計稿根本不是這樣的……」「你沒標清楚，怪我咯……」「……」「乖，不哭」今後之後，我發誓，必定要弄出一個牛逼哄哄的標記圖，讓這傲嬌的程序員無理反駁，無地自容……好了不瞎扯了，接下來給你們介紹這個切圖神器各個界面的功能詳解。

1. Each Layer 選中此框可單獨處理每個圖層，不選中則將已選擇的圖層視爲一個總體進行處理
2. 分辨率單位設置 可選擇輸出數據的分辨率單位，如 px 以及安卓開發中經常使用的各類 Dpi 等
3. 顏色設置 切換標記顏色
4. 標記設置 設置標記環境
5. 標記數據輸出 自動計算並輸出所選圖層的位置、大小、間距等信息
6. 引導框 爲你所選的尺寸或者圖層建立一個引導框
7. 一鍵切圖 快速切出並保存所選圖層
8. 數據提取 輸出所選圖層的數據信息
9. 複製所有 複製上面第八項的數據到剪貼板

點開標記設置，咱們能夠看到下面的界面：

1. 輸出設置 指定輸出數據的的各類設置，如字體、小號、抗鋸齒、顏色及加粗。
2. 分辨率單位設置
3. 小數/整數設定 選中則四捨五入輸出整數
4. 顏色代碼類型設置 RGB 或者 HEX，具體什麼類型，看程序員的編碼習慣
5. 字體單位設置 PT、PX、SP
6. 建立標記背景 有時候咱們的標記可能與設計稿的顏色相近影響閱讀，這時候添加背景可使之更加清晰
7. 控制點設置 能夠選中標記從所選圖層的左上角、右上角等地方開始
8. 第一行選中則標記後自動連接圖層。第二行選中則每次標記自動建立組

標記座標

選擇一個或者多個圖層，點擊標記座標按鈕便可標記。或者（Alt+1）。按鈕右邊的小三角形能夠進入該功能的設置頁面，可選擇標記的格式及指定標記位置。

有時候咱們須要標記相對座標，怎麼作？先用選區工具選擇一個區域，而後再開始標記便可

標記大小

一樣選圖層後點按鈕標記。或者（Alt+2）。小三角形能夠設置標記的格式及選擇同時標記寬高仍是標記其一。

標記距離

這裏的標記有三種狀況，快捷鍵（Alt+3）。小三角形能夠設置標記的格式。

1. 選中兩個圖層，標記兩個圖層之間的距離
2. 利用選區工具拉個區域，標記該區域較長的邊
3. 只選擇一個圖層，標記該圖層與畫布間的距離

標記文字信息

根據設置輸出文字的相關信息。快捷鍵（Alt+4）。

點擊小三角形，可選擇信息選項。

分割線上部分爲是否顯示引導線，效果以下圖，左邊爲顯示引導線，右邊爲不顯示。

分割線下半部分則設置是否顯示字體的相關信息，依次爲字體族、字體樣式、字體大小、行高、字體眼顏色、效果（陰影）。

建立引導框

爲你選擇的圖層建立引導框。快捷鍵（Alt+Q）。

點擊旁邊的小三角可設置引導框的大小。

對於一些初級切圖仔來講，這個功能可能沒什麼接觸過。有時候咱們須要爲一些特殊圖層建立引導框後再進行標記，具體做用及重要性，請看下面的例子。 錯誤的標記

正確的標記

這裏我先是爲每一個環肥燕瘦的圖標建立統一的引導框，大小爲38px*38px，而後再標記每一個引導框之間的間隔。若是沒有這個引導框，按照第一個標記，標出來的數據亂七八糟不說，開發同窗在編碼的時候還要量一下空白像素……

一鍵切圖

吊炸天並且複雜到讓做者凌亂的切圖功能就藏在這個神奇的按鈕下。此功能的工做原理大概是把須要切的圖層複製到一個新窗口裏面保存。具體使用步驟以下:

1. 選擇你要切的圖層
2. 若是須要對每一個圖層單獨切出，請勾選 each layer
3. 點擊切圖按鈕，或者快捷鍵（Alt+W）,此時 PS 就像開了腳本的遊戲，全自動啪啪啪地切了起來……（切圖複製出來的新窗口大小等於圖層的實際大小，包括該圖層的樣式，好比投影）
4. 當你使用選區工具拉出一個選區以後，將切出每一個圖層在該選區的切片，切片的大小和該選區的大小一致。假如你選了一個圖層，可是這個圖層在這選區裏面是沒有任何東西的，那你切出來的切片就是全空白的。（這裏稍微比較複雜，有興趣能夠本身嘗試動做操做理會下。）

一樣點擊右邊的小三角形，咱們能夠對功能進一步設置，使之更快更全自動。

1. 設置固定大小。有時候咱們須要切包含透明像素的圖層，好比上面標記的四個社交圖標，能夠設置38px*38px，後再下進行切圖。
2. 輸出比例。這裏能夠選擇輸出比例，好比@2x，50%，安卓的 HDPI 等，Assistor PS 會自動幫你計算並輸出。
3. 自動保存設置。建議勾選 auto save 和 save and close，這樣會自動保存切片並關掉新建的切片窗口。Path 設置保存路徑。Suffix option @2x 勾選後會自動在@2x切片的文件名加 @2x。

建立參考線

相信不少人，尤爲是 UI 設計師，網頁設計師都用過 Guide Guide 來建立參考線， Assistor PS 包含了 GG 的大部分功能。

1. 建立水平居中參考線 若是沒有選區，則建立整個畫布的水平居中參考線。
2. 建立垂直居中參考線 同上。
3. 刪除參考線
4. 參考線設置（詳見下文）
5. 清除全部設置
6. 根據設置建立參考線

參考線設置（這裏不過多介紹，只給出翻譯）

單位轉換器（附贈取色器）

1. 輸入數值
2. 選擇基本單位
3. 轉換結果
4. 顏色編碼
5. 取色器（可取屏幕任何位置的顏色！隱藏得太深了，我才發現……）

圓角矩形轉換

能夠把圓的換成方的把方的換成圓的。勾選 each corner 可單獨編輯每一個角。使用前請先在 PS 選擇一個矩形。

按照固定的間隔複製圖層

又是一個炒雞實用的功能，具體效果請看例子：

使用前：

設置 Assistor PS 以下（列數3，行數3，列間隔50px，行間隔50px）

使用後：

不過建議你們用完稍微花點時間填充下數據，以下圖：

感謝你們的閱讀，Assistor PS 的詳細介紹也到此結束，但願你們憑藉此神器，變身高級切圖師，hold 住全部需求。碼字不易，喜歡不妨收藏下吧。