Photoshop外掛-Cut&Slice me將檔案輸出與命名成《iOS、Android》APP專用圖檔格式

梅問題_Photoshop 外掛-Cut&Slice me將圖片輸出成iOS、Android專用的圖片格式
  那天在Facebook中,看到奶綠老師,分享一個很棒的Photoshop外掛,可將製作好的手機APP樣版,直接輸出成iOS、Android、PC用的格式,同時還會自動命名,這對於身為視覺設計的朋友來說,可說是一件相當棒的事,之前梅干都是利用Photoshop的分割工具,將要用的區塊一一的分割,再轉存成png檔,現在只要利用「Cut&Slice me」,點一下就可快速的將製作好的APP樣版,直接輸出成手機APP專用的格式,同時還支援Retina,經梅干實測後,真的很不錯,同時該外掛有個相當特別的地方,就是利用群組資料夾命名規則,來辨示所要轉出的檔案,真是簡單又方便,現在就一塊來看看吧!

Cut&Slice me:
外掛名稱:Cut&Slice me
外掛版本:1.1.1
外掛語言:英文
適用版本:Photoshop CS6
外掛下載:本站下載 | 官方下載

Cut&Slice me外掛安裝:
Step1
下載解壓縮,雙響「CutAndSliceME.zxp」檔。
梅問題_Photoshop 外掛-Cut&Slice me將圖片輸出成iOS、Android專用的圖片格式
Step2
按「接受」。
梅問題_Photoshop 外掛-Cut&Slice me將圖片輸出成iOS、Android專用的圖片格式
Step3
安裝成功後,在Adobe CS6擴充元件清單中,就會看到CutAndSliceMe的資訊。
梅問題_Photoshop 外掛-Cut&Slice me將圖片輸出成iOS、Android專用的圖片格式
Cut&Slice me應用:
Step1
開啟Photoshop,接著點視窗 / 延伸功能 / Cut and Slice me 選項。
梅問題_Photoshop 外掛-Cut&Slice me將圖片輸出成iOS、Android專用的圖片格式
Step2
接著就會看到Cut and Slice me控制面板,上方可切換要轉出的裝置,下方則會要轉出的方式,可全轉也可單一轉出。
梅問題_Photoshop 外掛-Cut&Slice me將圖片輸出成iOS、Android專用的圖片格式
Step3
比方要輸出LOGO,只要點一下app_logo@群組名稱,再點Cut and Slice me面板的Cut Selected
梅問題_Photoshop 外掛-Cut&Slice me將圖片輸出成iOS、Android專用的圖片格式
Step4
接著在檔案的同一目錄下,就會看到一個資料夾,點進去後會看到一個app_logo.png檔,和一個@2x而檔,這一個就是給Retina用的。
梅問題_Photoshop 外掛-Cut&Slice me將圖片輸出成iOS、Android專用的圖片格式
Step5
若選擇Android的話,就會將logo放到一堆資料夾中,由於梅干對於Android開發並不是很清楚,因此不確定這樣的目錄結構是否正確。
梅問題_Photoshop 外掛-Cut&Slice me將圖片輸出成iOS、Android專用的圖片格式
Cut&Slice me命名規則:
而Cut&Slice me的外掛中,有幾個命名規則需要注意的,所有的東西都要放到群組資料夾中,群組名稱為輸出後的檔名。
@:表示輸出為透明背景。
#:表示該圖層是用來,標示圖示的區塊範圍,因此該圖層不會被輸出。
BTN:表示該群組為按鈕結構,這時裡面的子群組目錄,需命名為normal、hover、clicked、selected。
梅問題_Photoshop 外掛-Cut&Slice me將圖片輸出成iOS、Android專用的圖片格式

相關文章

「Icons8」上萬個扁平圖示產生器,可直接拖拉到Photoshop中使用

「Icons8」上萬個扁平圖示產生器,可直接拖拉到Photoshop中使用

Adobe Photoshop CC2017開新檔案大改版,加入Adobe Stock素材模板

Adobe Photoshop CC2017開新檔案大改版,加入Adobe Stock素材模板

使用舊版「Photoshop的儲存為網頁用」也可輸出Retina的各種影像尺寸

使用舊版「Photoshop的儲存為網頁用」也可輸出Retina的各種影像尺寸

Photoshop CC 將圖片批次轉存Retina各種不同的尺寸規格

Photoshop CC 將圖片批次轉存Retina各種不同的尺寸規格

「ElemisFreebies」上百個免費超質感網頁版型PSD檔下載 (可商用)

「ElemisFreebies」上百個免費超質感網頁版型PSD檔下載 (可商用)





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 3 梅留言

  • 第3梅
    Natsuo 說道:

    阿,這個外掛實在是太實用了!
    可以節省不少時間跟功夫耶!
    謝謝大大的教學~

  • 第2梅
    柏元 說道:

    很實用,不過連Jquery都還沒學透><

    回應:
    阿!這個跟jquery無關呀!!!
  • 第1梅
    王寶弟 說道:

    android那樣沒有問題唷。:D
    不同資料夾內的圖示尺寸也要不一樣

    回應:
    了解~~感謝告知,
    當初轉出時,還讓梅干嚇了一大跳