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

我們公司剛剛把一個(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)出都不隱藏的圖層,例如背景圖層,曲線/亮度對(duì)比度調(diào)整圖層.

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

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

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

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

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

那么,如何使用呢?
 

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

看上去它是這樣的:

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

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

于是這個(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)部包含的所有圖層名稱導(dǎo)出圖片.

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

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

后面緊跟著的單詞既是將來(lái)導(dǎo)出的圖片文件的名稱(不要加擴(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字樣的圖層,