Photoshop腳本編程簡介

自動化對每個設計師的工作來說是很有用的。它可以在重複的任務上節省寶貴的時間，還能夠幫我們更快捷、更容易的解決一系列問題。

你可以使用photoshop的動作來使工作流程自動化，這是很流行的，大多數人都知道並且已經在使用的方法。今天，我們將介紹給你一種高級的自動化技巧：腳本語言。所有的這一切僅僅需要你有一點點關於JavaScript的基本知識，這對於我們中的一些網頁設計師往往都是具備的。

我很多年前就知道Photoshop的腳本語言，但是我幾個月前纔開始決定研究它。我忽視了它是因爲我認爲那是聰明的具有數學思維能力的程序員的領域。但是我錯了，今天我將要來告訴大家，儘管它需要一些基本的程序技巧，腳本語言並不是那麼難掌握。

但是，一開始，我們得回答以下這幾個明顯的問題：

爲什麼我們需要腳本語言？

爲什麼我們在Photoshop已經有了很棒的動作之後還要需要學習腳本語言？答案是交互性！當你使用動作時，你不能真正的控制它在不同的情況下的表現，就像錄像帶不停的一遍又一遍的播放而沒有任何改變。

一個腳本語言更靈活，它表現形式的改變取決於你輸入的參數或者是應用程序的內容。聽起來很有用？不是麼？

要求

你不需要是一個會寫腳本語言的高級的程序員。我就僅僅是一個平面設計師，就像你們大多數人一樣。但是你需要對JavaScript至少有一個基本的瞭解,以及一些屬性和方法的經驗去領悟這篇文章的大部分內容。

如果你對JavaScript一點都不瞭解，別害怕！有很多地方你可以瞭解程序的一些基本知識。例如：Codecademy，有很棒的完整的交互式課程。

我使用CS5，但是這篇文章中講的也同樣適用於新版本。Adobe從CS5開始已經沒有對其腳本API進行更新。我會選擇看最新的腳本文檔版本，雖然它是cs6的.

開整

當你開始在PS中記錄動作的時候，你設定了一個達到某一結果的步驟順序，這就是你的算法。然後你按下開始動作，在PS裏面就一個接一個的重複你剛纔的動作。腳本也差不多，但是不會一步一步的在PS中完成，而是你把它們一條一條的寫出來。在PS裏面大多數你想要完成的動作都有相同的功能按鈕可以完成。

如果你需要創造一個動作將你的文件從原始大小放大到150%，你需要完成以下幾步：

１，打開圖像-圖像大小

２，長寬輸入１５０％

３，點擊確定。

同樣的腳本語言會是這樣寫：

１，爲這個應用命名爲：app

２，選中文件：activeDocument

３，把這個屬性命名爲重設圖像大小：resizeImage(width,height)

代碼就是這樣：

app.activeDocument.resizeImage("150%", "150%");

語言

有三種方式在PS裏面寫腳本：在mac上用AppleScript, Windows用VBScript，或者用JavaScript在兩者上都可以。我使用第三種方式，因爲它可以跨平臺，並且我有一定JavaScript的基礎。

工具

Adobe有它自己的寫腳本的工具，叫做：ExtendedScript　Toolkit.

這個工具包在PS裏面，你可以在這個文件夾中中找到：

Mac OSX: /Applications/Utilities/Adobe Utilities CS6/ExtendScript ToolkitCS6/

Windows: C:\Program Files\Adobe\Adobe Utilities-CS6\ExtendScriptToolkit CS6(64位的Program Files(x86))

ExtendedScript　Toolkit的用戶界面非常的簡單。開始寫代碼，第一步就是要在下拉菜單中選擇目標應用。如果PS已經在運行，就可以看下下拉菜單旁邊的綠色鏈接圖標：

這個時候，你可以像這樣寫：

alert("Hello Photoshop!");

ExtendedScript　Toolkit　有一些其他的調試代碼的不錯特性，但是這一段代碼就這樣就夠了。你可以通過：幫助-JavaScript Tools Guide學到更多如何使用它。

你可以使用任何文本編輯來寫代碼，只需要保存爲.jsx格式文件就好了。你必須在PS裏通過File-Scripts-Browse來找到並運行它。或者是，在PS裏面打開腳本文件。你也可以在腳本的前面加上一行代碼，這樣這個代碼就會常在PS裏面打開：

#target photoshop

直接保存你的代碼在　Photoshop/Presets/Scripts/，然後通過File-Scripts訪問它們。你也可以設定一個快捷鍵，前往 Edit-Keyboard Shortcuts，鏈接到 File-Script-[你的代碼名稱],然後選擇一個你想要設定的快捷鍵。

ExtendedScript　Toolkit可以在整合的開發環境下運行和調試代碼，同時它還有一個目標模型指示器來安裝，這是很有用的。所以我推薦使用toolkit來寫腳本。不幸的是，Mac版本的有時候會崩潰，所以要記住這一點。

Photoshop對象模型

爲了使腳本寫起來簡單些，你需要懂得在Photoshop文件對象模型（DOM）中事件是怎樣互相聯繫的。如果你觀察PS本身，理解起來並不困難。PS的DOM裏面最主要的對象就是應用程序。在應用程序裏面，我們有一個文件夾在PS裏面是當前打開的（翻譯錯誤！本人認爲應該糾正爲：應用程序裏有photoshop當前打開的一系列文件）。

每一個文件包含一些元素：例如圖層（被稱爲Artlayers）,圖層組（layerSets）,通道，歷史記錄等等–就像一個普通的PSD文件。

下面就是一個簡單的可視化的PS的DOM。更詳細的包含層級的可以在”Adobe Photoshop CS6 Scripting Guide”Pdf文件中１２頁裏找到。

一個簡單的可視化的Photoshop　DOM

這裏面的每一個目標都有它自己的屬性和方法你可以編輯它。例如，在一個文件中改變所選圖層的透明度，你就可以前往Application-Document-layer-Opacity然後選擇你的期望值。代碼就是這樣寫：

app.activeDocument.activeLayer.opacity = 50;

你應該可以猜到，activeDocument和activelayer決定了當前選擇的文件和圖層。

你可以在“Adobe Photoshop CS6 JavaScript Scripting Reference”PDF文件中找到大部分的目標和它們的屬性和方法的說明，或者在ExtendedScript　Toolkit中通過前往help-object Model Viewer.

讓我們來看看在一個真實的例子中是如何運行的。在接下來的段落中，我們將會基於一個動作寫一段我們自己的代碼。

用代碼來重現自我旋轉動作

幾年前的聖誕節，我有一個想法就是用動作幫助我畫一個雪花。

畫雪花

１，首先畫一支雪花的圖案。

２，複製這一支，同時旋轉一定的角度。

3，重複第二步直到一個完整的圓。

手動去複製和旋轉每一個元素非常麻煩，所以我想出了一個自動的動作(an action to automate it)去完成它。算法是這樣的：

１，複製元素。

２，使用變化工具按照你所選擇的角度去旋轉這個元素。

３，複製圖層。

４，使用“重複變換”功能。

５，重複動作４和５直到一個完整的圓。

非常不錯！但是這個動作有一個缺點：根據你在第三步設定的角度數值的算法，你只能設定一定數量的雪花的分支。

回到當我還不是很熟悉腳本的時候，我做了幾個版本的動作，每一種產生的雪花都是不同的分支數。

今天，我們將用你輸入分支的數值的動態腳本來重繪這個動作，讓我們開始吧。

算法

當你開始寫腳本的時候，在挖掘代碼本身之前先設定算法是個不錯的主意。在我們的情況下，算法將會是這樣的：

１，詢問用戶輸入分支的數目。

２，計算旋轉的角度。

３，通過第一步設定的數目來複制並旋轉圖層。

首先讓我們從把當前或選定的圖層作爲變量保存起來，爲了將來使用：

// Save selected layer to variable:
var originalStem = app.activeDocument.activeLayer;

在JavaScript 中注意，你可以標記兩條雙斜線(//)做註解。註解被用來爲未來相關部分的代碼做解釋但是不影響腳本的運行。

現在讓我們回到我們的算法上。

1，要求用戶輸入

我們通過prompt(message,defaultvalue[,tittle])這個功能來獲取用戶的輸入信息：。這個功能表明一個有着”message”對話框和一個包含這”fefault value”的輸入框。當用戶點擊“確定”，這個給你功能就回到輸入值；因此，我們需要保存它爲一個可是用的變量。

// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt("Processing \""+originalStem.name+"\"\nHow many stems do you need?", 12);

注意我使用了“orginalStem.name”在這段信息裏面。所以對話框會現實所選擇圖層的名稱。

在Mac OS X中，在信息中的第一行是寬的，作用是標題。因此，我們主要的信息應該在第二行。另起一行，輸入“\n”.

在Windows中，你可以在功能中指定第三種參數來設定一個標題：

// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt("How many stems do you need?", 12, "Processing "+originalStem.name);

如果我們在PS中運行這個代碼，將會看到這樣一個對話框：

當用戶點擊“確定”，輸入值將會保存到stemsAmount變量中。如果用去點擊“取消”，這個功能將會返回一個無效值。這個我們後面要使用到。

2，計算旋轉的角度

爲了計算旋轉的角度，我們需要通過分支的數目來分３６０度（一個整圓）：

// Calculate the rotation angle
var angle = 360 / stemsAmount;

3，複製和旋轉

現在我們已經有了我們需要複製的分支的一切。爲了這樣去做，我們將使用“for”循環。它可以讓我們按照我們想要的次數來反覆的運行一段代碼。我們的循環將會是這樣的：

for(var i = 1; i < stemsAmount; i++){
// This code will run "stemAmount - 1" of times
};

注意第一個在程序中的對象例子已經有了值爲0,但是因爲我們第一個圖層已經在畫布上了，我們從１開始這個循環。

爲了輔助和旋轉我們的圖層，我們將會使用：duplicate()和rotate(angle,AnchorPosition)函數：在angle 裏面被旋轉圖層的數目通過複製的指數相乘而得。 Anchorposition決定了哪個圖層將會旋轉的點。當你在PS中使用旋轉工具的時候你可以看到這個點—它看起來是一個小小的加了十字的圓圈。在腳本中，它僅有９個指定的值-i.e.９個位置的錨點：

在我們這個情況下，它是這個圖層按鈕的中心。BOTTOMCENTER. PS在這裏或那裏的一些功能上使用了很多其他的一些常量，你可以在”Adobe Photoshop CS6JavaScript Reference”PDF文件中的１９７頁找到。因此我們的循環就是這個樣子：

// Duplicate and rotate layers:
for(var i = 1; i < stemsAmount; i++){
// Duplicate original layer and save it to the variable
var newStem = originalStem.duplicate();
// Rotate new layer
newStem.rotate(angle * i, AnchorPosition.BOTTOMCENTER);
};

完整的代碼就是下面這個樣子，你可以試着運行：

// Save selected layer to variable:
var originalStem = app.activeDocument.activeLayer;
// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt("Processing \""+originalStem.name+"\"\nHow many stems do you need?", 12);
// Calculate the rotation angle:
var angle = 360 / stemsAmount;
// Duplicate and rotate layers:
for(var i = 1; i < stemsAmount; i++){
// Duplicate original layer and save it to the variable
var newStem = originalStem.duplicate();
// Rotate new layer
newStem.rotate(angle * i, AnchorPosition.BOTTOMCENTER);
};

最後的潤色

我通常會試着使用腳本來完成我的主要目的。當一切都正確的運行起來的時候，我將會開始優化代碼。在我們這種情況下，我們需要確保用戶在提示框中輸入一個有效的數值—i.e.一個正整數，而且要大於１。

當然，爲了不讓PS瘋掉，我們會限制分支的書目，我們規定，小於１００.爲了這麼做，當他們提交了一個無效的數值的時候，我們需要使用一個“while”循環來告訴用戶一個錯誤的信息。而且這個提示框將會一直存在，直到用戶輸入一個有效值或者點擊“取消”按鈕。（記住如果用戶點擊取消將會提示無效值）。

新的代碼將會是這樣的：

// Save selected layer to variable:
var originalStem = app.activeDocument.activeLayer;
// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt ("Processing \""+originalStem.name+"\"\nHow many stems do you need? (From 2 to 100)", 12);
// Check that user entered a valid number and, if invalid, show error message and ask for input again
while(isNaN(stemsAmount) || stemsAmount <= 0 || stemsAmount > 100){
// If user clicks "Cancel" button, then exit loop
if(stemsAmount == null) break;
// Show error message…
alert("Please enter number in range from 2 to 100");
// …and ask for input again
stemsAmount = prompt("Processing \""+originalStem.name+"\"\nHow many stems do you need? (From 2 to 100)", 12);
};
// Run the copying process
if(stemsAmount != null){
// Calculate the rotation angle
var angle = 360 / parseInt(stemsAmount);
// Duplicate and rotate layers:
for(var i = 1; i < stemsAmount; i++){
// Duplicate original layer and save it to the variable
var newStem = originalStem.duplicate();
// Rotate new layer
newStem.rotate(angle * i, AnchorPosition.BOTTOMCENTER);
};
};

你可能注意到：我們使用了“isNaN(value)”這個功能，它返回 “true”如果 “value”不是一個數字，同時當我們計算旋轉的角度的時候，“parseInt(value)”把“value”轉換成一個整數。

接下來我們要做的事情是管理圖層，通過爲它們增加一個索引來重命名我們的圖層。同事也要確保我們不會把文件的圖層搞亂，讓我們把我們的分支編組。

爲圖層重命名不是一個很難的事情。我們只需要使用圖層的“name”屬性，然後爲它們增加一個索引數字：

// Add index to new layers
newStem.name = originalStem.name + " " + (i+1);

PS應用程序界面裏的編組被稱爲“LayerSet”,我們通過“layerSets”屬性可以進入文件的所有編組。爲了給文件增加一個新的組，我們需要稱“layerSet”方法爲“add()”：

// Create a group for stems
var stemsGroup = app.activeDocument.layerSets.add();
stemsGroup.name = originalStem.name + " ("+stemsAmount+" stems)";

然後，爲了把一個圖層增加到組裏面，我們會使用“move(relativeobject,ElementPlacement)”函數。請注意，“move()”函數只是把圖層移動到圖層堆，而不是移動到畫布上。（你可以用“trabslate(deltaX[,deltaY])”函數把圖層移動到畫布上）

ElementPlacement是另外一個常量，這個常量決定我們怎樣把的圖層跟 relativeobject 關聯在一起。在我們的案例裏，我們使用ElementPlacement.INSIDE　把一個普通圖層放進一個組裏面：

// Place original layer in group
originalStem.move(stemsGroup, ElementPlacement.INSIDE);

我們使用 ElementPlacement.PLACEATEND.把每一個拷貝的新圖層放在所有圖層租的底部。結果就是我們的所有圖層都是以上升的順序排列，第一個圖層在頂部，最後一個圖層在底部：

// Place new layer inside stems group
newStem.move(stemsGroup, ElementPlacement.PLACEATEND);

你可以在”Adobe Photoshop CS6 Scripting Guide”Pdf文件中２０２頁裏，找到更多關於“ElementPlacement”的內容。

最終代碼

這就是它！RotateMe.jsx已經完成。我們的最終代碼看起來像這樣：

// Save selected layer to variable:
var originalStem = app.activeDocument.activeLayer;

// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt ("Processing \""+originalStem.name+"\"\nHow many stems do you need? (From 2 to 100)", 12);

// Check that user entered a valid number and, if invalid, show error message and ask for input again
while(isNaN(stemsAmount) || stemsAmount <= 0 || stemsAmount > 100){
	// If user clicks "Cancel" button, then exit loop
	if(stemsAmount == null) break;

	// Show error message…
	alert("Please enter number in range from 2 to 100");
	// …and ask for input again
	stemsAmount = prompt("Processing \""+originalStem.name+"\"\nHow many stems do you need? (From 2 to 100)", 12);
};

// Run the copying process
if(stemsAmount != null){ 
	// Calculate the rotation angle
	var angle = 360 / parseInt(stemsAmount);

	// Create a group for stems
	var stemsGroup = app.activeDocument.layerSets.add();
		stemsGroup.name = originalStem.name + " ("+stemsAmount+" stems)";
	// Place original layer in group
	originalStem.move(stemsGroup, ElementPlacement.INSIDE);

	// Duplicate and rotate layers:
	for(var i = 1; i < stemsAmount; i++){
		// Duplicate original layer and save it to the variable
		var newStem = originalStem.duplicate();

		// Rotate new layer
		newStem.rotate(angle * i, AnchorPosition.BOTTOMCENTER);

		// Add index to new layers
		newStem.name = originalStem.name + " " + (i+1);

		// Place new layer inside stems group
		newStem.move(stemsGroup, ElementPlacement.PLACEATEND);
	};

	// Add index to the original layer
	originalStem.name += " 1";
};

怎麼樣，不難吧？

現在你可以把它放在這個目錄下 Photoshop/Presets/Scripts/ 然後操作 File → Scripts 運行腳本. 不同的圖形不同的輸入值都會產生不一樣的有趣效果: