整個開發流程中我最愛的就是切圖部份了，這表示改得要死的 Mockup 終於過關了喔耶～就來分享一下切圖神器吧，業界最知名的有 2 套，功能有些不同，比較複雜的這套是免費的 Photoshop 外掛，先從免費的開始講起吧。
Cut&Slice me 網站：http://www.cutandslice.me
官網教學，很詳細：http://www.peruho.com/web-design/export-your-assets-using-cut-and-slice-me
第一次使用建議順手下載官網的範例 PSD 檔，把裡面的圖層都輸出一遍就懂了，很簡單的。
「@」自動切圖設定
在資料夾或圖層名稱最後加上「@」就會自動輸出了，很簡單吧。
使用「#」設定切圖尺寸、按鈕群組
如果要輸出特定尺寸的切圖，可以用形狀圖層畫一個方塊，圖層名稱尾巴加上「#」，該資料夾下的圖層就會照這個尺寸輸出。
圖中的例子是按鈕，在資料夾名稱的尾巴加上「_BTN」，它會自動輸出各種狀態，連檔名幫你都整理好，非常貼心。
- normal
- hover
- clicked / pressed
- selected
- disabled
像按鈕這種靠換圖顯示 normal 或 hover 的控件，兩張圖尺寸要完全一樣。「_BTN」功能對 UI 在製作按鈕、切圖輸出，一直到 RD 套圖都很有幫助。
輸出格式
Cut&Slice me 可以輸出 3 種格式喔！iOS、Android、Web 都包了。
- iOS：@2x，自動縮小 1x。
- Android：hdpi、mdpi、xdpi、xxdpi。
- Web：1x。
（Cut&Slice me 所有的控制碼如 @、#、_ 都是半形，它不吃全形喔！）
其它
官網首頁最下方的問與答記得看一下。（免費的給你用還嫌！）
我超級討厭亂七八糟的圖層，從原始檔中可以看到設計師的邏輯思維，（沒做好心理準備就跟邏輯太差的人說話很容易爆腦血管。）為了使用 Cut&Slice me，會被強迫養成整理圖層的習慣，一定要大力推廣一下。雖然 Cut&Slice me 很好用沒錯，不過也是有一些問題存在，比如 Android 輸出尺寸不夠用了…之類。個人還是習慣用 Slicy，下次會介紹這套的。
