整個開發流程中我最愛的就是切圖部份了,這表示改得要死的 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」,它會自動輸出各種狀態,連檔名幫你都整理好,非常貼心。

  1. normal
  2. hover
  3. clicked / pressed
  4. selected
  5. disabled

像按鈕這種靠換圖顯示 normal 或 hover 的控件,兩張圖尺寸要完全一樣。「_BTN」功能對 UI 在製作按鈕、切圖輸出,一直到 RD 套圖都很有幫助。

輸出格式


Cut&Slice me 可以輸出 3 種格式喔!iOS、Android、Web 都包了。

  1. iOS:@2x,自動縮小 1x。
  2. Android:hdpi、mdpi、xdpi、xxdpi。
  3. Web:1x。

(Cut&Slice me 所有的控制碼如 @、#、_ 都是半形,它不吃全形喔!)

其它


官網首頁最下方的問與答記得看一下。(免費的給你用還嫌!)

我超級討厭亂七八糟的圖層,從原始檔中可以看到設計師的邏輯思維,(沒做好心理準備就跟邏輯太差的人說話很容易爆腦血管。)為了使用 Cut&Slice me,會被強迫養成整理圖層的習慣,一定要大力推廣一下。雖然 Cut&Slice me 很好用沒錯,不過也是有一些問題存在,比如 Android 輸出尺寸不夠用了…之類。個人還是習慣用 Slicy,下次會介紹這套的。

comments powered by Disqus