本文目的: 30分鐘之內(nèi)讓你明白如何利用Photoshop(以下簡稱PS)腳本編寫常用插件或工具,提升工作效率。 如果你是前端工程師或視覺設(shè)計師,強(qiáng)烈建議你駐足30分鐘,日后為人你節(jié)約的時間,或許是30天! 寫在前面: 本文非掃盲貼,如果你還不清楚腳本與動作的區(qū)別,請自行搜索; 本文使用Javascript作為PS腳本開發(fā)語言,如果你還完全不懂Javascript,請 點擊; 本文中的實例測試運行環(huán)境為Photoshop CS5,如何低于該版本,可能支持不完全。 PS腳本具體能干什么? 自動導(dǎo)入設(shè)計稿固定頭尾部; 自動生成規(guī)定寬度的參考線; 提取PSD中的文本內(nèi)容及樣式; 自動導(dǎo)出ICON、按鈕、切割背景圖; 等等大部分操作都可以自動完成。 比如我已完成一個PSD2HTML插件iParser。 準(zhǔn)備工作: 1、運行Adobe ExtendScript Toolkit(強(qiáng)烈推薦使用該編輯器,Adobe套裝已默認(rèn)安裝) 2、新建文件并粘貼以下代碼。 alert('恭喜!測試通過。'); 3、保存至 Photoshop安裝目錄\Presets\Scripts,命名為test.jsx。 4、運行Photoshop,選擇 文件>腳本>test 執(zhí)行腳本。 如果看到了警告窗口,那你已經(jīng)準(zhǔn)備就緒。 實例一:入門 preferences.rulerUnits = Units.PIXELS; var docRef = app.documents.add(200, 200); var layer = docRef.artLayers.add();<br>layer.name = 'footer'; 實例二:對話框 如果開發(fā)為插件,我們通常需要根據(jù)用戶輸入的信息執(zhí)行腳本,這時候我們就需要用到對話框。 var dialogStr ="dialog { \ text:\ '新建模板',\ name:Group{\ label: StaticText {text:'名稱:' }, \ input: EditText { preferredSize: [220, 20], text: 'test'} \ }\ }"; var win = new Window(dialogStr); win.center();<br>win.show(); Photoshop對象模型: 和瀏覽器中的文檔對象模型DOM類似,Photoshop也有它的對象模型: ![]() 常用類型與方法簡介: [Application](app):相當(dāng)于瀏覽器中的window,它是對象模型的根,并提供訪問所有其他對象的接口。 activeDocument[Document]:當(dāng)前操作文檔 documents[Documents]:當(dāng)前打開文檔的集合 preferences[Preferences]:首選項設(shè)置 executeAction:動作管理器。當(dāng)你發(fā)現(xiàn)你要實現(xiàn)的功能沒有直接的API時,你可能可以用它來完成,它提供了PS低級別的訪問。 [Application]-[Document]:圖層集合的容器 artLayers:藝術(shù)圖層集合(最常見的普通圖層) layerSets:圖層組集合 layers:包括artLayers與layerSets的集合 [Application]-[Document]-[ArtLayer]:操作最頻繁的對象,訪問圖層信息,對圖層的任何操作都能過這個對象 bounds:獲取圖層邊界坐標(biāo) grouped:是否在圖層組內(nèi) linkedLayers:鏈接的圖層 textItem:獲取圖層中的文檔需要通過textItem.contents *參考文檔見附件 請瀏覽一遍參考文檔,并嘗試完成一個工具: 題目:完成一個設(shè)計稿模板。 功能點:自動導(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 常見問題解答: 如果你已經(jīng)嘗試用腳本完成一些功能,可能碰到了一些問題,比如PS的文檔模型似乎并沒想像中的完美,參考文檔不詳盡,甚至存在錯誤,那參考一下我曾碰到過的一些問題。 1、如何創(chuàng)建一個選區(qū)? 答:doc[Document].selection.select([[x1, y1], [x1, y2], [x2, y2], [x2, y1]]); 注:之所以把它當(dāng)成一個問題,是因為文檔中未提及具體參數(shù),極易弄錯。它的坐標(biāo)順序是(左上、左下、右下、右上)。 2、如何獲取選中的圖層/組? 答:這是一個學(xué)習(xí)過程中必犯的錯誤,你肯定會嘗試doc[Document].activeLayer,但該方法只獲取到當(dāng)前激活的圖層,并不能獲取到所有選中的圖層。 正確答案- a、臨時圖層組中轉(zhuǎn)(低效,低風(fēng)險)。 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)險) 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; }, *注:以上代碼可能暫時不能看懂,沒關(guān)系,這些低層的數(shù)據(jù)訪問,實踐多了慢慢就懂了。 3、如何獲取文本圖層的顏色? 答:如果你用[ArtLayer].textItem.color,在實踐中很難正確獲取的文本顏色,因為設(shè)計師很可能是選擇文本填充顏色的,這個顏色值在range上。 參考方法: charIDToTypeID("Txt ") - 圖層的文本數(shù)據(jù) charIDToTypeID("Txtt") - 圖層文本range數(shù)據(jù) 具體可參考我的另一篇文章,PS腳本函數(shù)庫。 4、如何合并選中的圖層? 答: 錯誤答案 - layer[ArtLayer].merge 正確答案 - var idMrgtwo = charIDToTypeID( "Mrg2" ); executeAction( idMrgtwo, undefined, DialogModes.NO ); *面板開發(fā)(進(jìn)階) 如果我們開發(fā)的插件是需要用戶不斷在文檔與插件之間進(jìn)行操作,對話框已經(jīng)不能滿足需求了,那么我們需要用到面板。 由于面板編程涉及adobe air,可以先作大致了解,非必須掌握的內(nèi)容。 如下圖: ![]() 具體操作方式如下: 1、使用flex/builder開發(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í)行指令。 全面的介紹需要另起篇幅,不便于多作介紹,如有興趣,請點擊。 |
|