手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

誰(shuí)說(shuō)設(shè)計(jì)師不會(huì)寫代碼?超簡(jiǎn)單Photoshop腳本語(yǔ)言介紹

2013-12-17    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.88yangsc.com  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請(qǐng)點(diǎn)這里 

自動(dòng)化對(duì)每個(gè)設(shè)計(jì)師的工作來(lái)說(shuō)是很有用的。它可以在重復(fù)的任務(wù)上節(jié)省寶貴的時(shí)間,還能夠幫我們更快捷、更容易的解決一系列問(wèn)題。

你可以使用photoshop的動(dòng)作來(lái)使工作流程自動(dòng)化,這是很流行的,大多數(shù)人都知道并且已經(jīng)在使用的方法。今天,我們將介紹給你一種高級(jí)的自動(dòng)化技巧:腳本語(yǔ)言。所有的這一切僅僅需要你有一點(diǎn)點(diǎn)關(guān)于JavaScript的基本知識(shí),這對(duì)于我們中的一些網(wǎng)頁(yè)設(shè)計(jì)師往往都是具備的。

我很多年前就知道Photoshop的腳本語(yǔ)言,但是我?guī)讉€(gè)月前才開始決定研究它。我忽視了它是因?yàn)槲艺J(rèn)為那是聰明的具有數(shù)學(xué)思維能力的程序員的領(lǐng)域。但是我錯(cuò)了,今天我將要來(lái)告訴大家,盡管它需要一些基本的程序技巧,腳本語(yǔ)言并不是那么難掌握。

但是,一開始,我們得回答以下這幾個(gè)明顯的問(wèn)題:

為什么我們需要腳本語(yǔ)言?

為什么我們?cè)赑hotoshop已經(jīng)有了很棒的動(dòng)作之后還要需要學(xué)習(xí)腳本語(yǔ)言?答案是交互性!當(dāng)你使用動(dòng)作時(shí),你不能真正的控制它在不同情況下的表現(xiàn),就像錄像帶不停的一遍又一遍的播放而沒(méi)有任何改變。

00

一個(gè)腳本語(yǔ)言更靈活,它表現(xiàn)形式的改變?nèi)Q于你輸入的參數(shù)或者是應(yīng)用程序的內(nèi)容。聽起來(lái)很有用?不是么?

要求

你不需要是一個(gè)會(huì)寫腳本語(yǔ)言的高級(jí)的程序員。我就僅僅是一個(gè)平面設(shè)計(jì)師,就像你們大多數(shù)人一樣。但是你需要對(duì)JavaScript至少有一個(gè)基本的了解,以及一些屬性和方法的經(jīng)驗(yàn)去領(lǐng)悟這篇文章的大部分內(nèi)容。

01

如果你對(duì)JavaScript一點(diǎn)都不了解,別害怕!有很多地方你可以了解程序的一些基本知識(shí)。例如:Codecademy,有很棒的完整的交互式課程。

我使用CS5,但是這篇文章中講的也同樣適用于新版本。Adobe從CS5開始已經(jīng)沒(méi)有對(duì)其腳本API進(jìn)行更新。我會(huì)選擇看的腳本文檔版本,雖然它是cs6的.

開整

當(dāng)你開始在PS中記錄動(dòng)作的時(shí)候,你設(shè)定了一個(gè)達(dá)到某一結(jié)果的步驟順序,這就是你的算法。然后你按下開始動(dòng)作,在PS里面就一個(gè)接一個(gè)的重復(fù)你剛才的動(dòng)作。腳本也差不多,但是不會(huì)一步一步的在PS中完成,而是你把它們一條一條的寫出來(lái)。在PS里面大多數(shù)你想要完成的動(dòng)作都有相同的功能按鈕可以完成。

02

如果你需要?jiǎng)?chuàng)造一個(gè)動(dòng)作將你的文件從原始大小放大到150%,你需要完成以下幾步:

1,打開圖像-圖像大小

2,長(zhǎng)寬輸入150%

3,點(diǎn)擊確定。

同樣的腳本語(yǔ)言會(huì)是這樣寫:

1,為這個(gè)應(yīng)用命名為:app

2,選中文件:activeDocument

3,把這個(gè)屬性命名為重設(shè)圖像大?。簉esizeImage(width,height)

代碼就是這樣:

03

語(yǔ)言

有三種方式在PS里面寫腳本:在mac上用AppleScript, Windows用VBScript,或者用JavaScript在兩者上都可以。我使用第三種方式,因?yàn)樗梢钥缙脚_(tái),并且我有一定JavaScript的基礎(chǔ)。

工具

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

04

ExtendedScript Toolkit的主界面就是這樣的

這個(gè)工具包在PS里面,你可以在這個(gè)文件夾中中找到:

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的用戶界面非常的簡(jiǎn)單。開始寫代碼,第一步就是要在下拉菜單中選擇目標(biāo)應(yīng)用。如果PS已經(jīng)在運(yùn)行,就可以看下下拉菜單旁邊的綠色鏈接圖標(biāo):

05

這個(gè)時(shí)候,你可以像這樣寫:


06

按cmd+R(或者直接在工具欄上點(diǎn)擊“播放”按鈕)來(lái)運(yùn)行你寫的代碼。ExtendedScript Toolkit將會(huì)轉(zhuǎn)換到PS里面然后彈出提示框:


07

ExtendedScript Toolkit 有一些其他的調(diào)試代碼的不錯(cuò)特性,但是這一段代碼就這樣就夠了。你可以通過(guò):幫助-JavaScript Tools Guide學(xué)到更多如何使用它。

你可以使用任何文本編輯來(lái)寫代碼,只需要保存為.jsx格式文件就好了。你必須在PS里通過(guò)File-Scripts-Browse來(lái)找到并運(yùn)行它。 或者是,在PS里面打開腳本文件。你也可以在腳本的前面加上一行代碼,這樣這個(gè)代碼就會(huì)常在PS里面打開:

08

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

ExtendedScript Toolkit可以在整合的開發(fā)環(huán)境下運(yùn)行和調(diào)試代碼,同時(shí)它還有一個(gè)目標(biāo)模型指示器來(lái)安裝,這是很有用的。所以我推薦使用toolkit來(lái)寫腳本。不幸的是,Mac版本的有時(shí)候會(huì)崩潰,所以要記住這一點(diǎn)。

Photoshop對(duì)象模型

為了使腳本寫起來(lái)簡(jiǎn)單些,你需要懂得在Photoshop文件對(duì)象模型(DOM)中事件是怎樣互相聯(lián)系的。如果你觀察PS本身,理解起來(lái)并不困難。PS的DOM里面最主要的對(duì)象就是應(yīng)用程序。在應(yīng)用程序里面,我們有一個(gè)文件夾在PS里面是當(dāng)前打開的。

每一個(gè)文件包含一些元素:例如圖層(被稱為Artlayers),圖層組(layerSets),通道,歷史記錄等等–就像一個(gè)普通的PSD文件。

下面就是一個(gè)簡(jiǎn)單的可視化的PS的DOM。更詳細(xì)的包含層級(jí)的可以在”Adobe Photoshop CS6 Scripting Guide”Pdf文件中12頁(yè)里找到。

09

一個(gè)簡(jiǎn)單的可視化的Photoshop DOM

這里面的每一個(gè)目標(biāo)都有它自己的屬性和方法你可以編輯它。例如,在一個(gè)文件中改變所選圖層的透明度,你就可以前往Application-Document-layer-Opacity然后選擇你的期望值。代碼就是這樣寫:

10

你應(yīng)該可以猜到,activeDocument和activelayer決定了當(dāng)前選擇的文件和圖層。

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

讓我們來(lái)看看在一個(gè)真實(shí)的例子中是如何運(yùn)行的。在接下來(lái)的段落中,我們將會(huì)基于一個(gè)動(dòng)作寫一段我們自己的代碼。

用代碼來(lái)重現(xiàn)自我旋轉(zhuǎn)動(dòng)作

幾年前的圣誕節(jié),我有一個(gè)想法就是用動(dòng)作幫助我畫一個(gè)雪花。

畫雪花

1,首先畫一支雪花的圖案。

11

2,復(fù)制這一支,同時(shí)旋轉(zhuǎn)一定的角度。


12

3,重復(fù)第二步直到一個(gè)完整的圓。


13

手動(dòng)去復(fù)制和旋轉(zhuǎn)每一個(gè)元素非常麻煩,所以我想出了一個(gè)自動(dòng)的動(dòng)作(an action to automate it)去完成它。算法是這樣的:

1,復(fù)制元素。

2,使用變化工具按照你所選擇的角度去旋轉(zhuǎn)這個(gè)元素。

3,復(fù)制圖層。

4,使用“重復(fù)變換”功能。

5,重復(fù)動(dòng)作4和5直到一個(gè)完整的圓。

非常不錯(cuò)!但是這個(gè)動(dòng)作有一個(gè)缺點(diǎn):根據(jù)你在第三步設(shè)定的角度數(shù)值的算法,你只能設(shè)定一定數(shù)量的雪花的分支。

回到當(dāng)我還不是很熟悉腳本的時(shí)候,我做了幾個(gè)版本的動(dòng)作,每一種產(chǎn)生的雪花都是不同的分支數(shù)。

今天,我們將用你輸入分支的數(shù)值的動(dòng)態(tài)腳本來(lái)重繪這個(gè)動(dòng)作,讓我們開始吧。

算法

當(dāng)你開始寫腳本的時(shí)候,在挖掘代碼本身之前先設(shè)定算法是個(gè)不錯(cuò)的主意。在我們的情況下,算法將會(huì)是這樣的:

1,詢問(wèn)用戶輸入分支的數(shù)目。

2,計(jì)算旋轉(zhuǎn)的角度。

3,通過(guò)第一步設(shè)定的數(shù)目來(lái)復(fù)制并旋轉(zhuǎn)圖層。

首先讓我們從把當(dāng)前或選定的圖層作為變量保存起來(lái),為了將來(lái)使用:

14

在JavaScript 中注意,你可以標(biāo)記兩條雙斜線(//)做注解。注解被用來(lái)為未來(lái)相關(guān)部分的代碼做解釋但是不影響腳本的運(yùn)行。

現(xiàn)在讓我們回到我們的算法上。

1,要求用戶輸入

我們通過(guò)prompt(message,defaultvalue[,tittle])這個(gè)功能來(lái)獲取用戶的輸入信息:。這個(gè)功能表明一個(gè)有著”message”對(duì)話框和一個(gè)包含這”fefault value”的輸入框。當(dāng)用戶點(diǎn)擊“確定”,這個(gè)給你功能就回到輸入值;因此,我們需要保存它為一個(gè)可是用的變量。

15

注意我使用了“orginalStem.name”在這段信息里面。所以對(duì)話框會(huì)現(xiàn)實(shí)所選擇圖層的名稱。

在Mac OS X中,在信息中的第一行是寬的,作用是標(biāo)題。因此,我們主要的信息應(yīng)該在第二行。另起一行,輸入“\n”.

在Windows中,你可以在功能中指定第三種參數(shù)來(lái)設(shè)定一個(gè)標(biāo)題:

16

如果我們?cè)赑S中運(yùn)行這個(gè)代碼,將會(huì)看到這樣一個(gè)對(duì)話框:


17

當(dāng)用戶點(diǎn)擊“確定”,輸入值將會(huì)保存到stemsAmount變量中。如果用去點(diǎn)擊“取消”,這個(gè)功能將會(huì)返回一個(gè)無(wú)效值。這個(gè)我們后面要使用到。

2,計(jì)算旋轉(zhuǎn)的角度

為了計(jì)算旋轉(zhuǎn)的角度,我們需要通過(guò)分支的數(shù)目來(lái)分360度(一個(gè)整圓):

18

3,復(fù)制和旋轉(zhuǎn)

現(xiàn)在我們已經(jīng)有了我們需要復(fù)制的分支的一切。為了這樣去做,我們將使用“for”循環(huán)。它可以讓我們按照我們想要的次數(shù)來(lái)反復(fù)的運(yùn)行一段代碼。我們的循環(huán)將會(huì)是這樣的:

19

注意第一個(gè)在程序中的對(duì)象例子已經(jīng)有了值為0,但是因?yàn)槲覀兊谝粋€(gè)圖層已經(jīng)在畫布上了,我們從1開始這個(gè)循環(huán)。

為了輔助和旋轉(zhuǎn)我們的圖層,我們將會(huì)使用:duplicate()和rotate(angle,AnchorPosition)函數(shù):在angle里面被旋轉(zhuǎn)圖層的數(shù)目通過(guò)復(fù)制的指數(shù)相乘而得。 Anchorposition決定了哪個(gè)圖層將會(huì)旋轉(zhuǎn)的點(diǎn)。當(dāng)你在PS中使用旋轉(zhuǎn)工具的時(shí)候你可以看到這個(gè)點(diǎn)—它看起來(lái)是一個(gè)小小的加了十字的圓圈。在腳本中,它僅有9個(gè)指定的值-i.e.9個(gè)位置的錨點(diǎn):

20

在我們這個(gè)情況下,它是這個(gè)圖層按鈕的中心。BOTTOMCENTER. PS在這里或那里的一些功能上使用了很多其他的一些常量,你可以在”Adobe Photoshop CS6JavaScript Reference”PDF文件中的197頁(yè)找到。因此我們的循環(huán)就是這個(gè)樣子:


21

完整的代碼就是下面這個(gè)樣子,你可以試著運(yùn)行:


22

最后的潤(rùn)色

我通常會(huì)試著使用腳本來(lái)完成我的主要目的。當(dāng)一切都正確的運(yùn)行起來(lái)的時(shí)候,我將會(huì)開始優(yōu)化代碼。在我們這種情況下,我們需要確保用戶在提示框中輸入一個(gè)有效的數(shù)值—i.e.一個(gè)正整數(shù),而且要大于1。

當(dāng)然,為了不讓PS瘋掉,我們會(huì)限制分支的書目,我們規(guī)定,小于100.為了這么做, 當(dāng)他們提交了一個(gè)無(wú)效的數(shù)值的時(shí)候 ,我們需要使用一個(gè)“while”循環(huán)來(lái)告訴用戶一個(gè)錯(cuò)誤的信息。而且這個(gè)提示框?qū)?huì)一直存在,直到用戶輸入一個(gè)有效值或者點(diǎn)擊“取消”按鈕。(記住如果用戶點(diǎn)擊取消將會(huì)提示無(wú)效值)。

新的代碼將會(huì)是這樣的:

23

你可能注意到:我們使用了“isNaN(value)”這個(gè)功能,它返回 “true”如果 “value”不是一個(gè)數(shù)字,同時(shí)當(dāng)我們計(jì)算旋轉(zhuǎn)的角度的時(shí)候,“parseInt(value)”把“value”轉(zhuǎn)換成一個(gè)整數(shù)。

接下來(lái)我們要做的事情是管理圖層,通過(guò)為它們?cè)黾右粋€(gè)索引來(lái)重命名我們的圖層。同事也要確保我們不會(huì)把文件的圖層搞亂,讓我們把我們的分支編組。

為圖層重命名不是一個(gè)很難的事情。我們只需要使用圖層的“name”屬性,然后為它們?cè)黾右粋€(gè)索引數(shù)字:

24

PS應(yīng)用程序界面里的編組被稱為“LayerSet”,我們通過(guò)“l(fā)ayerSets”屬性可以進(jìn)入文件的所有編組。為了給文件增加一個(gè)新的組,我們需要稱“l(fā)ayerSet”方法為“add()”:


25

然后,為了把一個(gè)圖層增加到組里面,我們會(huì)使用“move(relativeobject,ElementPlacement)”函數(shù)。請(qǐng)注意,“move()”函數(shù)只是把圖層移動(dòng)到圖層堆,而不是移動(dòng)到畫布上。(你可以用“trabslate(deltaX[,deltaY])”函數(shù)把圖層移動(dòng)到畫布上)

ElementPlacement是另外一個(gè)常量,這個(gè)常量決定我們?cè)鯓影训膱D層跟 relativeobject 關(guān)聯(lián)在一起。在我們的案例里,我們使用ElementPlacement.INSIDE 把一個(gè)普通圖層放進(jìn)一個(gè)組里面:

26

我們使用 ElementPlacement.PLACEATEND.把每一個(gè)拷貝的新圖層放在所有圖層租的底部。結(jié)果就是我們的所有圖層都是以上升的順序排列,第一個(gè)圖層在頂部,最后一個(gè)圖層在底部:


27

你可以在”Adobe Photoshop CS6 Scripting Guide”Pdf文件中202頁(yè)里

找到更多關(guān)于“ElementPlacement”的內(nèi)容。

最終代碼

就是它,RotateMe.jsx搞定! 我們最終的代碼就是這樣:

28

29

沒(méi)那么難,哈?


30

現(xiàn)在,你可以把這個(gè)保存在photoshop/presets/Scripts/文件夾里面,然后前

往File-Script運(yùn)行。使用不同的形狀和不同的賦值可以產(chǎn)生有趣的結(jié)果:

31

總結(jié)

你可以從在后面的資源包里面鏈接序號(hào)看到,除了文章中介紹的之外還有很多想要講的。但是我希望我們今天所講的能夠激發(fā)你的興趣,向你展示了腳本的作用和巨大潛力。

32

如果你想下水試試,讓我們一起來(lái)學(xué)習(xí)和交流經(jīng)驗(yàn)吧。你在后面的評(píng)論中提出問(wèn)題或者分享你所做的。如果你不是一個(gè)程序員,可以考慮留下一個(gè)關(guān)于腳本編寫的好主意吧!或許其他的讀者會(huì)實(shí)現(xiàn)它。讓我們一起來(lái)使PS更加有用吧!

資源

1,Adobe Photoshop Scripting ,Adobe Developer Connection

所有的腳本文件和實(shí)用功能

2,Adobe Introduction to Scripting ,(PDF),Adobe

這個(gè)是一些Adobe應(yīng)用程序的基本代碼。不錯(cuò)的是PS的腳本可以適用于所有的其他Adobe產(chǎn)品,你只需要學(xué)習(xí)應(yīng)用的DOM,你就可以上路了。

3,Adobe Photoshop CS6 Scripting Guide ,Adobe

在這個(gè)PS腳本介紹指南里面,你可以學(xué)到寫腳本的基本知識(shí)。

4, Adobe Photoshop JavaScript Reference ,(PDF),Adobe

這個(gè)文件描述了你可以在PS里面用到的所有的對(duì)象和他們的函數(shù)以及方法。這也是我在寫腳本的時(shí)候用的最多的文件。

5, JavaScript, Mozilla Developer Network

這里面有關(guān)于一般的JavaScript函數(shù)和用法的各種問(wèn)題的答案。

6,JavaScript Tools Guide, PDF,Adobe

這里面有一些關(guān)于“ExtendedScript Toolkit”的基本信息,和一些高級(jí)技

巧。例如文件系統(tǒng)的存取,ScriptUI, XML的使用,sockets等等。

7,PS-Script

一個(gè)獨(dú)立的關(guān)于PS腳本的論壇。我不能注冊(cè)參與討論(因?yàn)槟承┪催m應(yīng)系統(tǒng)),但是它有很多可以被發(fā)現(xiàn)的解決問(wèn)題的答案。

8, Photoshop Scripting,Adobe Community

Adobe的PS腳本官方論壇,有一些很好的在用戶使用的過(guò)程中遇到的問(wèn)題的討論。

原文地址:smashingmagazine
譯文地址:mxd.tencent

編譯:騰訊timmliu  校正:sevenshao&charrywang

分享本文至:

日歷

鏈接

個(gè)人資料

存檔