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

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

PandaCUT 熊貓切圖

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

進(jìn)行自動(dòng)的,批量的,跨越圖層的,自由的切圖.

為什么需要一個(gè)新的切圖工具?
 

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

本項(xiàng)目并不使用外部的工具,而是使用photoshop自帶的javas cript腳本功能,也就是說(shuō):

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

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

完全由photoshop渲染,就如同手動(dòng)導(dǎo)出一模一樣,photoshop里什么樣,導(dǎo)出就什么樣.

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

那么,如何使用呢?
 

我們來(lái)假設(shè)一種情況,老板讓我繪制一個(gè)按鈕,于是我先畫(huà)了一個(gè)按鈕的底板:

看上去它是這樣的:

然后,我又在它上面畫(huà)了一個(gè)按鈕:

在它上面,我寫(xiě)了一行字:

于是這個(gè)圖看上去是這樣的:

當(dāng)然,有按鈕抬起來(lái),就有按下去,于是我又新建了兩個(gè)圖層,分別是按鈕和按鈕上的文字:

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

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

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

把這個(gè)組的名字改成“@PandaCUT_MASKS”，

當(dāng)一個(gè)組被起名叫“@PandaCUT_MASKS”后,

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

于是,我們新建一個(gè)叫做"@PandaCUT_MASKS”的組,由于我們要導(dǎo)出兩張圖片,

于是我們?cè)诮M內(nèi)部添加兩個(gè)圖層, 圖層必須以"@"開(kāi)頭命名,

后面緊跟著的單詞既是將來(lái)導(dǎo)出的圖片文件的名稱(chēng)(不要加擴(kuò)展名):

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

分別拉出最終生成的每張圖片需要截圖的范圍,對(duì)于本例來(lái)說(shuō),

我們要對(duì)著兩個(gè)圖層各拉出一個(gè)包裹著按鈕的矩形,當(dāng)然,由于按鈕的位置是一樣的,

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

接下來(lái),我們給矢量矩形圖層起名叫做"@button1"和"@button1_down",它們會(huì)被作為一個(gè)標(biāo)示,

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

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

為什么要這樣做,而不是直接導(dǎo)出圖層呢?

我們知道,一個(gè)需要裁切并導(dǎo)出的 元素并不一定只畫(huà)在一個(gè)圖層里,

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

繪制一個(gè)橫版過(guò)關(guān)游戲中的人物動(dòng)畫(huà),腿部有三幀動(dòng)畫(huà)被放在ABC三個(gè)圖層中,

身體不動(dòng), 放在D圖層,手部有EFG三幀. 繪制時(shí),繪制的邏輯很可能是

腿部被身體遮擋,身體被手部遮擋. 這樣一來(lái),如果我們要導(dǎo)出這三幀的

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

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

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

接下來(lái),我們將腿部的ABC三個(gè)圖層的圖層名稱(chēng)中 分別打上"@frame1","@frame2"和"@frame3"

三個(gè)標(biāo)簽,在EFG圖層中也分別打上"@frame1","@frame2"和"@frame3"

三個(gè)標(biāo)簽,然后我們給D,即身體這一層上打上全部的三個(gè)標(biāo)簽!

那么在自動(dòng)導(dǎo)出時(shí), 就會(huì)分別導(dǎo)出"ADE","BDF","CDG"三種組合了.

回到本例中,在本例中,我們要導(dǎo)出兩個(gè)元素,一個(gè)是button1,另一個(gè)是button1_down,

那么,我們就這樣寫(xiě):

可以看到,text1和button1,text1_down和button1_down這四個(gè)圖層被打上了與"@PandaCUT_MASKS"組中 相對(duì)應(yīng)的標(biāo)簽.這說(shuō)明,text1和button1

將被導(dǎo)出到名為"button1.png"的文件中,而text1_down和button1_down兩個(gè)

圖層將被導(dǎo)出到名為"button1_down.png"的文件中.

選擇您想要的目錄后,讓熊貓來(lái)工作吧! 當(dāng)它完成工作后,您將看到以下提示:

打開(kāi)你剛才選定的文件夾,文件已經(jīng)導(dǎo)好啦!

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

同一個(gè)圖層可以被多個(gè)標(biāo)示共享
 

由于底板圖層和背景圖層都沒(méi)有所有沒(méi)加過(guò)@button1標(biāo)志,

所以它們不會(huì)被導(dǎo)入到button1所對(duì)應(yīng)的文件中.

如果一個(gè)圖層沒(méi)有添加任何一個(gè)"@"開(kāi)頭的標(biāo)識(shí),或者添加了"@"標(biāo)示,但在最上層的“@PandaCUT_MASKS”中沒(méi)有它對(duì)應(yīng)的正確名稱(chēng),那么這個(gè)圖層永遠(yuǎn)不可能被導(dǎo)出.

因此,我們只需給按鈕底板添加一個(gè)@button標(biāo)志就行了,但這里有個(gè)問(wèn)題,按鈕的底板同時(shí)被@button1和@button1_down兩個(gè)元素使用,它們都要導(dǎo)出按鈕底板,這怎么辦呢?

很簡(jiǎn)單! 寫(xiě)兩個(gè)名字,中間加個(gè)空格就行了:

再導(dǎo)一個(gè)看看:

哈哈! 這回有啦!

再加一個(gè)按鈕試試?

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

想要導(dǎo)出它,只需要按照上文所述方式,添加一個(gè)"@button2"和"@button2_down"標(biāo)示即可:

"可是,底板怎么辦?"

聰明的你可能會(huì)想到一個(gè)問(wèn)題,假如我不是有2個(gè)按鈕,而是有100個(gè),那豈不是按鈕底板圖層要寫(xiě)好多好多標(biāo)示來(lái)表明它在每一個(gè)文件中都不隱藏? 就像這樣:

實(shí)際上這是不用的,如果你需要無(wú)論如何都不會(huì)隱藏的圖層存在,只需要在這個(gè)圖層的名稱(chēng)中加入特殊標(biāo)志“@PandaCUT_NEVERHIDE”:

這樣,無(wú)論我導(dǎo)出多少個(gè)文件,標(biāo)示了"@PandaCUT_NEVERHIDE"的圖層均不會(huì)隱藏!!

導(dǎo)出一下,一共出來(lái)四個(gè)圖! 都帶著底板!

添加調(diào)整圖層? 沒(méi)問(wèn)題!

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

添加曲線(xiàn)圖層:

打上NEVERHIDE標(biāo)簽:

導(dǎo)出吧!

再來(lái)個(gè)反色:

導(dǎo)出吧!

能不能再給力一點(diǎn)啊,老濕?

 

當(dāng)然能! 只要按照我們之前的原則,我們可以玩出各種花樣! 例如,有時(shí)候我們 需要底圖不變而按鈕上的文字內(nèi)容變,我們可以這樣玩:

建立五個(gè)不同的按鈕上的字樣圖層,寫(xiě)不同的文本內(nèi)容,打上不同的標(biāo)簽,將按鈕本身以及其底圖 設(shè)立"NEVER_HIDE"標(biāo)簽保證其永遠(yuǎn)不會(huì)隱藏:

執(zhí)行腳本!就點(diǎn)一下鼠標(biāo),看看我們得到了什么:

同理,我們可以利用同樣的底色,在按鈕之上添加幾個(gè)用來(lái)修改顏色的調(diào)整圖層,改名,加標(biāo)簽:

然后執(zhí)行腳本!點(diǎn)一下鼠標(biāo)!看看我們得到了什么:

能不能再給力一點(diǎn)啊,老濕?

每一次導(dǎo)出,根據(jù)位置,腳本都會(huì)自動(dòng)生成一個(gè)txt文件,其中記錄著各個(gè)文件的位置和尺寸,如果你是前端工程師,你應(yīng)該知道我在說(shuō)什么!

不過(guò),因?yàn)槲乙膊恢滥銓?duì)代碼有何種需求,目前導(dǎo)出的格式是針對(duì)特定的GUI庫(kù)的,如果你希望能再再給力一點(diǎn),告訴我們!

美中不足的,是我們目前還沒(méi)有x2,x0.5支持,點(diǎn)9圖支持這種高大上的東西,如果大家用著爽,

我們會(huì)把這些功能加上的!

說(shuō)了半天,在哪里可以買(mǎi)到呢?

不需要買(mǎi)! 開(kāi)源免費(fèi)!請(qǐng)點(diǎn)擊:https://github.com/jiangduoduo/PandaCUT

本站備份：http://pic.16xx8.com/allimg/150703/16xx8.zip

進(jìn)入我們的項(xiàng)目.詳細(xì)教程,下載方式均有!

另外麻煩大家下載的話(huà)看看網(wǎng)頁(yè)里最底下的文字~謝謝!