• 其它網站建置相關
  • import_contacts 簡易切圖神器 Cut&Slice me
    146
適用範圍

網頁開發人員、網站管理人員

實用性:
重要性:

簡易切圖神器 Cut&Slice me

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

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

網頁設計-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

基本切圖規則

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

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

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

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使用了,
光是這點,就夠我們跪著用它了…