本文目的：

30分鐘之內(nèi)讓你明白如何利用Photoshop（以下簡(jiǎn)稱(chēng)PS）腳本編寫(xiě)常用插件或工具，提升工作效率。

如果你是前端工程師或視覺(jué)設(shè)計(jì)師，強(qiáng)烈建議你駐足30分鐘，日后為人你節(jié)約的時(shí)間，或許是30天！

寫(xiě)在前面：

本文非掃盲貼，如果你還不清楚腳本與動(dòng)作的區(qū)別，請(qǐng)自行搜索；

本文使用Javascript作為PS腳本開(kāi)發(fā)語(yǔ)言，如果你還完全不懂Javascript，請(qǐng) 點(diǎn)擊；

本文中的實(shí)例測(cè)試運(yùn)行環(huán)境為Photoshop CS5，如何低于該版本，可能支持不完全。

PS腳本具體能干什么？

自動(dòng)導(dǎo)入設(shè)計(jì)稿固定頭尾部；

自動(dòng)生成規(guī)定寬度的參考線；

提取PSD中的文本內(nèi)容及樣式；

自動(dòng)導(dǎo)出ICON、按鈕、切割背景圖；

等等大部分操作都可以自動(dòng)完成。

比如我已完成一個(gè)PSD2HTML插件iParser。

準(zhǔn)備工作：

1、運(yùn)行Adobe ExtendScript Toolkit（強(qiáng)烈推薦使用該編輯器，Adobe套裝已默認(rèn)安裝）

2、新建文件并粘貼以下代碼。

alert('恭喜！測(cè)試通過(guò)。');

3、保存至 Photoshop安裝目錄\Presets\Scripts，命名為test.jsx。

4、運(yùn)行Photoshop，選擇 文件>腳本>test 執(zhí)行腳本。

如果看到了警告窗口，那你已經(jīng)準(zhǔn)備就緒。

實(shí)例一：入門(mén)

preferences.rulerUnits = Units.PIXELS;  
var docRef = app.documents.add(200, 200);  
var layer = docRef.artLayers.add();<br>layer.name = 'footer';

如果開(kāi)發(fā)為插件，我們通常需要根據(jù)用戶輸入的信息執(zhí)行腳本，這時(shí)候我們就需要用到對(duì)話框。

var dialogStr ="dialog { \  
    text:\ '新建模板',\  
    name:Group{\  
        label: StaticText {text:'名稱(chēng):' }, \  
        input: EditText { preferredSize: [220, 20], text: 'test'} \  
    }\  
}";  
var win = new Window(dialogStr);  
win.center();<br>win.show();

 

Photoshop對(duì)象模型：

和瀏覽器中的文檔對(duì)象模型DOM類(lèi)似，Photoshop也有它的對(duì)象模型：

常用類(lèi)型與方法簡(jiǎn)介：

[Application](app)：相當(dāng)于瀏覽器中的window，它是對(duì)象模型的根，并提供訪問(wèn)所有其他對(duì)象的接口。

activeDocument[Document]：當(dāng)前操作文檔

documents[Documents]：當(dāng)前打開(kāi)文檔的集合

preferences[Preferences]：首選項(xiàng)設(shè)置

executeAction：動(dòng)作管理器。當(dāng)你發(fā)現(xiàn)你要實(shí)現(xiàn)的功能沒(méi)有直接的API時(shí)，你可能可以用它來(lái)完成，它提供了PS低級(jí)別的訪問(wèn)。

[Application]-[Document]：圖層集合的容器

artLayers：藝術(shù)圖層集合（最常見(jiàn)的普通圖層）

layerSets：圖層組集合

layers：包括artLayers與layerSets的集合

[Application]-[Document]-[ArtLayer]：操作最頻繁的對(duì)象，訪問(wèn)圖層信息，對(duì)圖層的任何操作都能過(guò)這個(gè)對(duì)象

bounds：獲取圖層邊界坐標(biāo)

grouped：是否在圖層組內(nèi)

linkedLayers：鏈接的圖層

textItem：獲取圖層中的文檔需要通過(guò)textItem.contents

*參考文檔見(jiàn)附件

 

請(qǐng)瀏覽一遍參考文檔，并嘗試完成一個(gè)工具：

題目：完成一個(gè)設(shè)計(jì)稿模板。
功能點(diǎn)：自動(dòng)導(dǎo)入公共頭部（居頂）、生成980px的參考線、導(dǎo)入公共尾部（居底）

參考方法：

app.documents.add  
doc[Document].guides.add  
doc[Document].selection.select  
doc[Document].selection.fill  
doc[Document].selection.copy  
layer[ArtLayer].textItem.*  
file[File].*  
color[SolidColor].*  
layer[ArtLayer].move

 

常見(jiàn)問(wèn)題解答：

如果你已經(jīng)嘗試用腳本完成一些功能，可能碰到了一些問(wèn)題，比如PS的文檔模型似乎并沒(méi)想像中的完美，參考文檔不詳盡，甚至存在錯(cuò)誤，那參考一下我曾碰到過(guò)的一些問(wèn)題。

1、如何創(chuàng)建一個(gè)選區(qū)？

答：doc[Document].selection.select([[x1, y1], [x1, y2], [x2, y2], [x2, y1]])；

注：之所以把它當(dāng)成一個(gè)問(wèn)題，是因?yàn)槲臋n中未提及具體參數(shù)，極易弄錯(cuò)。它的坐標(biāo)順序是(左上、左下、右下、右上)。

2、如何獲取選中的圖層/組？

答：這是一個(gè)學(xué)習(xí)過(guò)程中必犯的錯(cuò)誤，你肯定會(huì)嘗試doc[Document].activeLayer，但該方法只獲取到當(dāng)前激活的圖層，并不能獲取到所有選中的圖層。

正確答案-

a、臨時(shí)圖層組中轉(zhuǎn)（低效，低風(fēng)險(xiǎn)）。

getSelectedLayer: function(){  
    var A=[];  
        var desc11 = new ActionDescriptor();  
            var ref9 = new ActionReference();  
            ref9.putClass( stringIDToTypeID('layerSection') );  
        desc11.putReference( charIDToTypeID('null'), ref9 );  
            var ref10 = new ActionReference();  
            ref10.putEnumerated( charIDToTypeID('Lyr '), charIDToTypeID('Ordn'), charIDToTypeID('Trgt') );  
        desc11.putReference( charIDToTypeID('From'), ref10 );  
        executeAction( charIDToTypeID('Mk  '), desc11, DialogModes.NO );  
    var gL = activeDocument.activeLayer.layers;  
    for(var i=0;i<gL.length;i++){   
        A.push(gL[i]);   
    }   
    executeAction( charIDToTypeID('undo'), undefined, DialogModes.NO);  
    return A;               
}

b、 設(shè)為鏈接圖層中轉(zhuǎn)。（高效，高風(fēng)險(xiǎn)）

getSelectedLayer: function(){  
    var selects = [app.activeDocument.activeLayer];  
    try {  
        var idlinkSelectedLayers = stringIDToTypeID( "linkSelectedLayers" );  
        var desc929 = new ActionDescriptor();  
        var idnull = charIDToTypeID( "null" );  
        var ref617 = new ActionReference();  
        var idLyr = charIDToTypeID( "Lyr " );  
        var idOrdn = charIDToTypeID( "Ordn" );  
        var idTrgt = charIDToTypeID( "Trgt" );  
        ref617.putEnumerated( idLyr, idOrdn, idTrgt );  
        desc929.putReference( idnull, ref617 );  
        executeAction( idlinkSelectedLayers, desc929, DialogModes.NO );  
    } catch(e) {}  
    if(selects[0].linkedLayers) selects = selects.concat(selects[0].linkedLayers);  
    return selects;  
},

 *注：以上代碼可能暫時(shí)不能看懂，沒(méi)關(guān)系，這些低層的數(shù)據(jù)訪問(wèn)，實(shí)踐多了慢慢就懂了。

 

3、如何獲取文本圖層的顏色？

答：如果你用[ArtLayer].textItem.color，在實(shí)踐中很難正確獲取的文本顏色，因?yàn)樵O(shè)計(jì)師很可能是選擇文本填充顏色的，這個(gè)顏色值在range上。

參考方法：

charIDToTypeID("Txt ") - 圖層的文本數(shù)據(jù)

charIDToTypeID("Txtt") - 圖層文本range數(shù)據(jù)

具體可參考我的另一篇文章，PS腳本函數(shù)庫(kù)。

4、如何合并選中的圖層？

答：

錯(cuò)誤答案 - layer[ArtLayer].merge

 

正確答案 -

var idMrgtwo = charIDToTypeID( "Mrg2" );  
executeAction( idMrgtwo, undefined, DialogModes.NO );

 

*面板開(kāi)發(fā)（進(jìn)階）

如果我們開(kāi)發(fā)的插件是需要用戶不斷在文檔與插件之間進(jìn)行操作，對(duì)話框已經(jīng)不能滿足需求了，那么我們需要用到面板。

由于面板編程涉及adobe air，可以先作大致了解，非必須掌握的內(nèi)容。

如下圖：

具體操作方式如下：

1、使用flex/builder開(kāi)發(fā)flash面板，發(fā)布成extension-name.swf文件；

2、創(chuàng)建PS腳本 extension-name.jsx；

3、將extension-name.swf、extension-name.jsx放入Photoshop安裝目錄\Plug-ins\Panels\extension-name

原理：

Photoshop作為flash面板的宿主環(huán)境，flash與PS腳本通信執(zhí)行指令。

全面的介紹需要另起篇幅，不便于多作介紹，如有興趣，請(qǐng)點(diǎn)擊。