切圖教程，分享一個切圖神器(4)

來源：站酷作者：Nathan_J 學習：23913人次

我們公司剛剛把一個用于批量切圖的內(nèi)部工具收拾了一下發(fā)布了,自以為
非常方便,歡迎大家試用,內(nèi)部工具免不了帶著內(nèi)部人員的使用習慣,所以
如果使用中出現(xiàn)問題還請海涵. 下面是工具介紹:

PandaCUT 熊貓切圖

一個photoshop CC的javas cript腳本,可以幫助任何被PS切圖折磨的人

進行自動的,批量的,跨越圖層的,自由的切圖.

為什么需要一個新的切圖工具?

世界上有不少切圖工具,但大部分是基于圖層的切圖,但事實上,我們經(jīng)常會遇到跨越多個圖層的切圖需求,例如從后向前ABC三個圖層,PandaCUT可以實現(xiàn)先隱藏B圖層, 打開A和C圖層導出,再隱藏A圖層,打開C和B圖層導出.如此批量導出圖片,幾乎是全自動化! 你還可以設置無論怎么導出都不隱藏的圖層,例如背景圖層,曲線/亮度對比度調(diào)整圖層.

本項目并不使用外部的工具,而是使用photoshop自帶的javas cript腳本功能,也就是說:

你不需要安裝photoshop之外的任何東西

所有的第三方濾鏡,素材什么的均可使用.

完全由photoshop渲染,就如同手動導出一模一樣,photoshop里什么樣,導出就什么樣.

性能? photoshop撐得住,PandaCUT就撐得住!

那么,如何使用呢?

我們來假設一種情況,老板讓我繪制一個按鈕,于是我先畫了一個按鈕的底板:

看上去它是這樣的:

然后,我又在它上面畫了一個按鈕:

在它上面,我寫了一行字:

于是這個圖看上去是這樣的:

當然,有按鈕抬起來,就有按下去,于是我又新建了兩個圖層,分別是按鈕和按鈕上的文字:

按鈕按下去的狀態(tài)是這樣的:

現(xiàn)在,我們要導出它了!

首先，我們先需要創(chuàng)建一個組，這個組的位置需要在所有圖層的最上面,

把這個組的名字改成“@PandaCUT_MASKS”，

當一個組被起名叫“@PandaCUT_MASKS”后,

意味著PandaCUT將按照這個組內(nèi)部包含的所有圖層名稱導出圖片.

于是,我們新建一個叫做"@PandaCUT_MASKS”的組,由于我們要導出兩張圖片,

于是我們在組內(nèi)部添加兩個圖層, 圖層必須以"@"開頭命名,

后面緊跟著的單詞既是將來導出的圖片文件的名稱(不要加擴展名):

然后,我們把當前,"@PandaCUT_MASKS"組內(nèi)部的每個圖層,使用photoshop的"矩形工具",

分別拉出最終生成的每張圖片需要截圖的范圍,對于本例來說,

我們要對著兩個圖層各拉出一個包裹著按鈕的矩形,當然,由于按鈕的位置是一樣的,

所以這兩個矩形是完全重疊的,(顏色無所謂,但不能是純透明的),就像這樣:

接下來,我們給矢量矩形圖層起名叫做"@button1"和"@button1_down",它們會被作為一個標示,

任何在"@PandaCUT_MASKS"組之外的圖層中,一旦出現(xiàn)了名字中有@button1字樣的圖層,

即會被導出在@button1圖片中.一旦出現(xiàn)名字中有@button1_down的圖層,即會被導出在@button2圖片中.無論這些圖層的層疊狀態(tài)如何,無論圖層是矢量圖層,文字圖層,調(diào)整圖層.

為什么要這樣做,而不是直接導出圖層呢?

我們知道,一個需要裁切并導出的元素并不一定只畫在一個圖層里,

它可能遍布于很多個圖層,有些甚至還會跨越一些圖層, 例如我們

繪制一個橫版過關游戲中的人物動畫,腿部有三幀動畫被放在ABC三個圖層中,

身體不動, 放在D圖層,手部有EFG三幀. 繪制時,繪制的邏輯很可能是

腿部被身體遮擋,身體被手部遮擋. 這樣一來,如果我們要導出這三幀的

三張圖片中,傳統(tǒng)的批量導出工具是很難實現(xiàn)的.但PandaCUT 可以

輕松解決這個問題! 首先我們創(chuàng)建一個"@PandaCUT_MASKS"組,

在組里添加三個圖層, 分別命名為"@frame1","@frame2"和"@frame3",

接下來,我們將腿部的ABC三個圖層的圖層名稱中分別打上"@frame1","@frame2"和"@frame3"

三個標簽,在EFG圖層中也分別打上"@frame1","@frame2"和"@frame3"

三個標簽,然后我們給D,即身體這一層上打上全部的三個標簽!

那么在自動導出時, 就會分別導出"ADE","BDF","CDG"三種組合了.

回到本例中,在本例中,我們要導出兩個元素,一個是button1,另一個是button1_down,

那么,我們就這樣寫:

可以看到,text1和button1,text1_down和button1_down這四個圖層被打上了與"@PandaCUT_MASKS"組中相對應的標簽.這說明,text1和button1

將被導出到名為"button1.png"的文件中,而text1_down和button1_down兩個

圖層將被導出到名為"button1_down.png"的文件中.

選擇您想要的目錄后,讓熊貓來工作吧! 當它完成工作后,您將看到以下提示:

打開你剛才選定的文件夾,文件已經(jīng)導好啦!

"老濕,好是好,可是底板和背景哪里去了?"

同一個圖層可以被多個標示共享

由于底板圖層和背景圖層都沒有所有沒加過@button1標志,

所以它們不會被導入到button1所對應的文件中.

如果一個圖層沒有添加任何一個"@"開頭的標識,或者添加了"@"標示,但在最上層的“@PandaCUT_MASKS”中沒有它對應的正確名稱,那么這個圖層永遠不可能被導出.

因此,我們只需給按鈕底板添加一個@button標志就行了,但這里有個問題,按鈕的底板同時被@button1和@button1_down兩個元素使用,它們都要導出按鈕底板,這怎么辦呢?

很簡單! 寫兩個名字,中間加個空格就行了:

再導一個看看:

哈哈! 這回有啦!

再加一個按鈕試試?

假如我們現(xiàn)在需要畫一個新按鈕,顏色不同,我們把原來的圖層復制然后繪制一個新按鈕,就像這個:

想要導出它,只需要按照上文所述方式,添加一個"@button2"和"@button2_down"標示即可:

"可是,底板怎么辦?"

聰明的你可能會想到一個問題,假如我不是有2個按鈕,而是有100個,那豈不是按鈕底板圖層要寫好多好多標示來表明它在每一個文件中都不隱藏? 就像這樣:

實際上這是不用的,如果你需要無論如何都不會隱藏的圖層存在,只需要在這個圖層的名稱中加入特殊標志“@PandaCUT_NEVERHIDE”:

這樣,無論我導出多少個文件,標示了"@PandaCUT_NEVERHIDE"的圖層均不會隱藏!!

導出一下,一共出來四個圖! 都帶著底板!

添加調(diào)整圖層? 沒問題!

我們現(xiàn)在看看我們導出的圖片.....恩,或許會顯得有些"太亮了",在這種時候,除了破壞性編輯, 我們還喜歡在工程的最上層添加"調(diào)整圖層",比如調(diào)個色啊,調(diào)調(diào)對比度啊,這些一般都是位于最上層圖層的.有"@PandaCUT_NEVERHIDE"在,這些都不是事!

添加曲線圖層: