簡易切圖神器 Cut&Slice me

在Web開發的過程中，大家對切圖這步驟一不陌生…
除了大家常用的 Adobe Ps Fw 可以切圖片外，市面上還有很多切圖專用的軟體、外掛，
可以幫我更有效率的產出切圖噢~

今天就來跟大家介紹其中一套好用的切圖外掛工具 Cut&Slice me

為什麼要介紹它呢?

1. 不需另裝軟體，因為它是Ps的外掛工具
2. 功能簡易，輕量又實用
3. 一鍵完成所有切圖
4. 最重要的一點，它"Free"!!!

Cut&Slice me 安裝

1. 首先我們先到官網去下載 外掛程式
2. 接著我們打開剛載下來的CutAndSliceMe.zxp
3. 它會打開Adobe擴充元件工具，同意授權後就會自動安裝完成嚕

infoCut&Slice me 需要在 CS6 以上版本才可安裝；V 1.1.3 不支援 CC14

基本切圖規則

• 使用"群組"整理圖層並命名(有義意的名稱)
• 在需要切出圖片的群組名稱最後上 @
• 可以用"矩形工具"畫出要切出圖片的尺寸，然後命名 #，並放在群組的內最上圖層
• 群組命名後面加 _BTN 可切出按鈕圖片；按鈕狀態需群組並指定特定名稱
  • 正常：normal
  • 滑入：hover
  • 點擊：clicked / pressed
  • 選取：selected
  • 禁止：disabled

只要按照上面的這些規則整理你的psd圖層，等一下就可以完成"一鍵切圖"
其實跟著 Cut&Slice me 的規則來整理圖層，另一個好處就是可以得到一個井然有序的psd檔
不管是自已還是轉交其他人使用，都能有更好的工作效率噢。

如果本來就有整理圖層的習慣，且有自已的整理規則的人，
就算要改用 Cut&Slice me 的規則，應該也改變不大才是。

Cut&Slice me 操作面板

Cut&Slice me 操作面板很簡單

上面 3 種輸出格式選擇：

iOS：2x、 1x
Android：hdpi、mdpi、xdpi、xxdpi
Web：1x

下面也有3個輸出目標：

全部輸出 (一鍵輸出)
單一群組輸出
所選取圖層輸出

操作時，我們只要先選好上面的「輸出格式」，然後再點下面的「輸出目標」
接下來，它就會自動幫我們在目前檔案位置產生一個資料夾，
把圖(png)都切到裡面去嚕~
是不是很簡單!!

官網有提供範例檔，大家可以先去載下來試著切圖看看，熟稀一下噢~

Cut&Slice me 缺點

Cut&Slice me 的功能算是相當簡易，但基本該有的也都沒少，算是很實用工具雖然它有著一些確缺點，例如：

• 需要CS6以上才可用
• 只能輸出png圖檔
• 無法指定輸出圖檔位置
• Btn只能用它指定命名
• 輸出格式都以"縮小"來處理不同尺寸

但作者大大都佛心開放給大家Free使用了，
光是這點，就夠我們跪著用它了…