切圖教程，分享一個切圖神器

我們公司剛剛把一個用于批量切圖的內(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圖層導出.如此批量導出圖片,幾乎是全自動化! 你還可以設(shè)置無論怎么導出都不隱藏的圖層,例如背景圖層,曲線/亮度對比度調(diào)整圖層.

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

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

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

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

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

那么,如何使用呢?
 

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

看上去它是這樣的:

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

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

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

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

按鈕按下去的狀態(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字樣的圖層,