photoshop文檔管理與文檔規(guī)范(6)

這是一個(gè)重要但是容易被忽視的領(lǐng)域，很多設(shè)計(jì)師沒(méi)有文檔管理和文檔規(guī)范意識(shí)。認(rèn)為只有代碼工作者才需要什么編碼規(guī)范和版本控制系統(tǒng)，photoshop作為一個(gè)應(yīng)用軟件，討論這個(gè)有什么意義呢？
[list][*]作為工程文件，一個(gè)復(fù)雜頁(yè)面的psd源文件里有200~300個(gè)圖層是很正常的事情。[*]作為最直面客戶和BOSS的開(kāi)發(fā)環(huán)節(jié)，以及存在對(duì)視覺(jué)表現(xiàn)的個(gè)體認(rèn)同差異，你可能會(huì)遭遇最多的需求變動(dòng)、修改建議，需求反復(fù)……。[*]作為開(kāi)發(fā)協(xié)作中的一員，你的源文件會(huì)被其他設(shè)計(jì)師或開(kāi)發(fā)者使用或修改。[*]作為開(kāi)發(fā)文檔中的一部分，你的源文件會(huì)面臨移交、繼承和重用。[*]圖層命名無(wú)法辨識(shí)，幾百個(gè)圖層沒(méi)有分組、元件難以修改、被調(diào)用的原始素材被處理地面目全非，修改版本無(wú)法回溯、設(shè)計(jì)樣式無(wú)法復(fù)用，同組的psd文件風(fēng)格或布局無(wú)法統(tǒng)一……如果你正在修改這樣一份psd源文件，會(huì)不會(huì)抓狂？[/list]作為一個(gè)UI設(shè)計(jì)師，建立文檔管理和文檔規(guī)范意識(shí)，不僅能便于團(tuán)隊(duì)協(xié)助和工程文件的移交，更重要的是能快速顯著地提升自己的工作效率。
作為工程管理的一部分，photoshop的文檔管理也具有以下特征：
[list][*]編碼規(guī)范：命名規(guī)范。[*]架構(gòu)設(shè)計(jì)：組織結(jié)構(gòu)合理。[*]版本管理：不對(duì)原始素材形成不可逆的破壞，可進(jìn)行版本追溯。[*]協(xié)作機(jī)制：元素和樣式便于復(fù)用和調(diào)用。[*]資源管理：通過(guò)定義預(yù)設(shè)配置庫(kù)或資源庫(kù)來(lái)提高效率。[/list]下文中，我將和大家一一分享具體的工作方法。
一．圖層的分組和管理

PS提供了三種方式來(lái)組織圖層(layers)之間的關(guān)系：圖層組、鏈接組、剪切組。
在進(jìn)行用戶界面設(shè)計(jì)的過(guò)程中，應(yīng)該根據(jù)布局區(qū)塊來(lái)組織圖層分組。對(duì)圖層進(jìn)行分組是一種基本的信息組織方法，將大量的、分散的、雜亂的信息經(jīng)過(guò)組織、整序、優(yōu)化、存貯，形成一個(gè)便于有效利用系統(tǒng)的過(guò)程。
1 使用圖層分組管理的主要優(yōu)勢(shì)：便于組織和檢索:
將圖層編入同一圖層組組，進(jìn)行圖層組命名，并形成樹(shù)狀結(jié)構(gòu)，可以方便創(chuàng)作者快速查找圖層在圖層面板序列中的所在。
如何快速選擇圖層：


選中移動(dòng)工具，在屬性面板中 取消自動(dòng)選擇前面的勾選，在下拉菜單中選中圖層。在使用移動(dòng)工具的時(shí)候，按住ctrl鍵，可以直接選中 當(dāng)前可視的圖層。
學(xué)習(xí)善用右鍵：
用上面的方法快速選中圖層后，點(diǎn)擊右鍵，可以看見(jiàn)右鍵菜單中顯示了 表示基于圖層組的的樹(shù)狀列表，通過(guò)這個(gè)右鍵菜單可以快速切換到所需的圖層。但前提是要有良好的圖層組織結(jié)構(gòu)和圖層命名。



便于挪動(dòng)修改布局:
圖層組可以作為一個(gè)整體進(jìn)行移動(dòng)和縮放，將位于同一布局區(qū)塊的圖層編入一組，可以快速改變某一區(qū)塊的位置和比例，方便地實(shí)行布局的調(diào)整。
便于整體管理：
圖層組可以作為一個(gè)整體進(jìn)行 刪除、顯示/隱藏、修改透明度和混合模式模式。圖層形成編組，令創(chuàng)作者可以快速地顯/隱一批圖層進(jìn)行效果預(yù)覽。對(duì)一組圖層進(jìn)行整體操作。還可以創(chuàng)建基于組的蒙版，整體控制某一圖層組的顯示區(qū)域
在設(shè)計(jì)屬于一個(gè)網(wǎng)站的不同頁(yè)面時(shí)，使用圖層組可以快速創(chuàng)建統(tǒng)一的設(shè)計(jì)模版，保留共有的區(qū)域的圖層編組。
2 圖層分組和鏈接組


圖層分組具有結(jié)構(gòu)特效，鏈接組更多用于表示關(guān)系。
為圖層建立鏈接組，可以鎖定幾個(gè)圖層之間的相對(duì)位置。對(duì)它們其中任何一個(gè)執(zhí)行移動(dòng)縮放、拖拽復(fù)制和刪除操作時(shí)，都會(huì)對(duì)整體生效。
鏈接組更容易創(chuàng)建和解除關(guān)系，位于同一鏈接組中的圖層可以分別位于不同的圖層組，實(shí)際上形成了另一種結(jié)構(gòu)維度。
3 盡量不要合并圖層。 圖層合并操作是不可逆的，（本文中指的所有不可逆的操作都不包括在歷史記錄面板的有限步數(shù)的回溯）。可以通過(guò)執(zhí)行ctrl+alt+E來(lái)合并圖層，這個(gè)命令在被選中的圖層上方創(chuàng)建了一個(gè)經(jīng)過(guò)合并操作的副本，生成了一個(gè)新的合并圖層。你可以對(duì)這個(gè)獨(dú)立圖層隨便進(jìn)行修改和調(diào)用，而絲毫不影響原始圖層。





,二、圖層命名規(guī)范一份沒(méi)有圖層命名和分組的源文件是最受前端開(kāi)發(fā)人員詬病的，建立良好文檔規(guī)范，養(yǎng)成對(duì)圖層命名的習(xí)慣，除了利于源文件的移交、繼承和重用，提供效率，也體現(xiàn)了對(duì)協(xié)作成員的尊重。同時(shí)，圖層命名是使用圖層右鍵菜單的良好前提。
建議主要使用英文命名，便于在不同系統(tǒng)平臺(tái)之間的移交。
如何命名，可以參考前端的命名規(guī)范，針對(duì)界面布局、鼠標(biāo)事件、不同的交互狀態(tài)有許多約定俗稱的叫法和縮寫，例如：
[indent]頁(yè)頭：header   內(nèi)容：content/container   頁(yè)面主體：main
頁(yè)尾：footer   導(dǎo)航：nav   側(cè)欄：sidebar   欄目：column
整體布局：wrapper   左右中：縮寫為 L R C   水平/垂直：縮寫為H/V
導(dǎo)航：nav   子菜單：submenu   摘要: summary   按鈕：btn   滾動(dòng)：scroll
鼠標(biāo)懸停：hover      點(diǎn)擊：click      已瀏覽：visited。
[/indent]等等……
三、使用蒙版1 使用蒙版的好處：


蒙版通過(guò)疊加一個(gè)蒙版圖層來(lái)控制原始圖像的顯示。最大的好處是：可以自由實(shí)現(xiàn)對(duì)原始圖像圖層的擦除、剪裁、摳圖、邊緣虛化等這些極普遍的操作，但原始圖像內(nèi)容不會(huì)受到破壞。
2 圖層蒙版和矢量蒙版：




蒙版分為圖層蒙版（我覺(jué)得像素蒙版這個(gè)叫法更好一點(diǎn)）和矢量蒙版。
兩者用法相同，一個(gè)是位圖，一個(gè)是矢量。圖層蒙版支持透明度，矢量蒙版支持路徑。
圖層蒙版通過(guò)工具欄上和圖層面板底部的創(chuàng)建蒙版按鈕來(lái)創(chuàng)建。原理跟存儲(chǔ)選區(qū)的“alpha通道”原理類似。通過(guò)灰度來(lái)記錄蒙版的區(qū)域及透明度。白色代表顯示全透明，黑色代表不透明，50%的灰色代表50%的透明度。支持濾鏡、柔化和改變透明度等操作。由于是像素對(duì)象，執(zhí)行變換操作時(shí)，蒙版邊緣會(huì)出現(xiàn)質(zhì)損。



矢量蒙版需要先創(chuàng)建一個(gè)矢量對(duì)象，然后按住crtl鍵的同時(shí)，點(diǎn)擊圖層面板底部的創(chuàng)建蒙版按鈕來(lái)完成創(chuàng)建�？梢酝ㄟ^(guò)路徑選擇和鋼筆等工具對(duì)矢量蒙版進(jìn)行編輯修改。由于是矢量對(duì)象，變化操作時(shí)蒙版對(duì)象的邊緣始終是平滑的。但不支持透明度、柔化邊緣和大部分濾鏡。



3 剪切組的優(yōu)勢(shì)和弱點(diǎn)：剪切組也是蒙版的一種形式，同樣具有不破壞原始圖像的特征，它既可以具有像素蒙版特性也可以具有矢量蒙版特性（這取決于剪切組最底部的圖層）。
剪切組的優(yōu)勢(shì)是可方便應(yīng)用于多個(gè)圖層，使用上具有直觀的組織性，但壞處，對(duì)象圖層必須在次序上緊挨著，而且在調(diào)整圖層次序的操作時(shí)，容易導(dǎo)致誤操作。



PS中回溯歷史記錄的步驟是有限的，所有操作在經(jīng)歷超過(guò)一定步數(shù)的修改后都無(wú)法進(jìn)行版本還原，以及進(jìn)行針對(duì)原版本的修改。對(duì)于一個(gè)工程文件而言，版本不可逆是災(zāi)難性的。所以針對(duì)PS，我們應(yīng)該保留素材的原始數(shù)據(jù)，盡量使用非破壞性編輯。
“非破壞性操作”是圖像處理軟件長(zhǎng)久以來(lái)面臨的問(wèn)題，Adobe從最早的版本到最新的CS4，經(jīng)過(guò)十幾年發(fā)展，ps的用戶們也遍歷變遷。最早PS的使用者為了保留歷史版本，不得不頻繁“保存副本”。直到后來(lái)有了歷史記錄面板，有了快照，有了調(diào)整圖層，有了智能對(duì)象，CS3版本中更向3dsMAX學(xué)習(xí)了屬性堆棧。
來(lái)看看PS在“非破壞性操作”的4個(gè)方面上已具備的功能（截止到CS3版本）：
[list][*]原始數(shù)據(jù)的留存：智能對(duì)象、歷史快照。[*]效果疊加：填充圖層、調(diào)整圖層、混合模式和圖層樣式[*]操作區(qū)域：上文中提到的蒙版，剪切組[*]屬性堆棧：智能對(duì)象的濾鏡庫(kù)堆棧（PS3中新功能）。[/list]

,四、使用填充圖層和調(diào)整圖層圖層面板下方的添加調(diào)整（填充）圖層按鈕


1 填充圖層：當(dāng)需要為頁(yè)面上某個(gè)版塊添加淺灰色背景，在導(dǎo)航上使用長(zhǎng)條型漂亮的漸變背景時(shí)，你是習(xí)慣如何操作，創(chuàng)建一個(gè)空白圖層，在選區(qū)里直接填色？還是使用填充圖層？
Ps中傳統(tǒng)方式是在空白圖層中創(chuàng)建選區(qū)或路徑后執(zhí)行填充命令，但自從允許使用填充圖層在對(duì)象中填充純色、漸變或紋理后，油漆桶變成了最雞肋的工具之一。
相比較傳統(tǒng)方式，填充圖層具有更大的操作靈活性。單擊圖層面板中的圖層縮略圖，就可以隨時(shí)更改顏色、修改漸變、更換紋理，且具有非常直觀的預(yù)覽效果。
填充圖層中填充對(duì)象的形狀范圍實(shí)際上是一種內(nèi)置蒙版，所以這種填充方式集合了蒙版的種種優(yōu)勢(shì)，比如可以使用黑白畫(huà)筆來(lái)隨意修改填充邊緣、或使用矢量編輯工具來(lái)修改矢量形狀蒙版。



圖示案例：使用漸變填充圖層、使用畫(huà)筆/橡皮擦修改蒙版在web設(shè)計(jì)中，所有需要使用填充色塊的地方都盡可能使用矢量路徑+填充圖層來(lái)完成，這樣生成的填充色塊可以隨時(shí)隨地保持方便修改和無(wú)損形變。
2 調(diào)整圖層調(diào)整圖像的色階、色相、對(duì)比度、色彩平衡？把彩色圖像變?yōu)榛叶葓D像，色彩反相，調(diào)整照片的色溫，這些都是最常用的操作。但你經(jīng)常拿不定主意，對(duì)原始圖像施加調(diào)整效果進(jìn)行實(shí)驗(yàn)……
一個(gè)設(shè)計(jì)成淺藍(lán)色的按鈕，BOSS看了不喜歡，要求改成淺綠色。改完以后效果不好，BOSS又要求改成灰色……
如果你經(jīng)常遭遇上述情況，請(qǐng)選用“調(diào)整圖層”功能來(lái)進(jìn)行你的調(diào)色實(shí)驗(yàn)吧。
PS中可以用來(lái)實(shí)現(xiàn)圖像調(diào)整的方法：



使用調(diào)整圖層要好于其它兩種操作，調(diào)整圖層不會(huì)更改原始圖像中的像素，（會(huì)略微增加文件大�。�，也是一種內(nèi)置的蒙版�？梢噪S時(shí)更改。 在進(jìn)行多項(xiàng)調(diào)整時(shí)，使用調(diào)整圖層意味著新建多個(gè)圖層，多個(gè)調(diào)整圖層可以分別修改排序、混合樣式和透明度。



圖示案例：使用調(diào)整圖層改變?cè)渖�、使用智能�?duì)象及濾鏡堆棧1  智能對(duì)象PS從cs版本開(kāi)始增加了智能對(duì)象（smartobject）。智能對(duì)象可以保護(hù)原始像素內(nèi)容，用戶可以進(jìn)行變換操作（包括縮放，旋轉(zhuǎn)，變形等）而不會(huì)累次地降低圖像質(zhì)量。如一個(gè)400px寬的位圖素材，使用變換操作壓縮為200px寬，旋轉(zhuǎn)45°。后來(lái)又想修改為300px框，旋轉(zhuǎn)為原位。但上一次壓縮操作已經(jīng)對(duì)圖像質(zhì)量形成了不可逆的損害。如果在操作第一次變換前將該素材轉(zhuǎn)為智能對(duì)象，無(wú)論它之后變換了多少次，都可以保證是基于400px寬的原始質(zhì)量來(lái)進(jìn)行更改操作。
智能對(duì)象的另一個(gè)好處是，可以通過(guò)編輯其中一個(gè)副本來(lái)實(shí)現(xiàn)對(duì)所有副本的同步改動(dòng)。
一個(gè)使用了智能對(duì)象副本的psd源文件尺寸會(huì)小于標(biāo)準(zhǔn)的psd文件，這是因?yàn)橹悄軐?duì)象圖層的復(fù)制不會(huì)像標(biāo)準(zhǔn)圖層復(fù)制那樣生成真正的多倍像素內(nèi)容，而只是充當(dāng)了源的角色。
這一點(diǎn)和“Ai的嵌入”有很像的特征。



圖示案例：使用智能對(duì)象，編輯智能對(duì)象的原始文件，達(dá)到影響所有副本。2 智能濾鏡和濾鏡堆棧智能濾鏡是指針對(duì)智能對(duì)象應(yīng)用的一些濾鏡，在濾鏡庫(kù)里可以瀏覽濾鏡菜單，預(yù)覽并對(duì)統(tǒng)一對(duì)象使用多個(gè)濾鏡。



濾鏡堆棧和AI中的外觀面板很相似，所有施用過(guò)的智能濾鏡都顯示在PS的圖層面板。你可以再次關(guān)閉該濾鏡，調(diào)整濾鏡的透明度和疊加模式，調(diào)整多個(gè)濾鏡的施用次序。
除了上述優(yōu)點(diǎn)，還可以再次對(duì)智能對(duì)象的原始文件進(jìn)行修改，所以使用智能濾鏡，在原始文件和濾鏡使用的操作上都有極大的靈活性。同時(shí)也都是非破壞性編輯。



圖示案例：使用智能濾鏡和濾鏡堆棧。3 柵格化操作智能對(duì)象，矢量對(duì)象，文字對(duì)象有一些共性：在被柵格化（像素化）之前，隨時(shí)隨地都具備可編輯性，這個(gè)特性讓上述對(duì)象類型在任何時(shí)候都應(yīng)該成為你的首選。但是有些濾鏡和變形操作是其失效的。
所以要非常謹(jǐn)慎地操作柵格化命令，柵格化和圖層合并一樣是破壞性的，不可逆的。
如果必須要使用某些濾鏡效果或變形，建議不妨為上述對(duì)象創(chuàng)建一個(gè)副本，隱藏保留原本，在副本上施行操作。
對(duì)于邊緣修改，邊緣羽化、擦除這類操作，可以使用蒙版技術(shù)來(lái)完成。這同樣是非破壞性操作。


,七、使用圖層樣式(layer style)


圖層樣式可以實(shí)現(xiàn)非常豐富的特效，包括投影，光澤，紋理，發(fā)光。
除了常用的發(fā)光、投影、浮雕外（在webUI設(shè)計(jì)中其實(shí)它們反而不常用），
[list=1][*]圖層樣式可用于填充純色、漸變和紋理。比較與填充圖層，圖層樣式最顯著的特點(diǎn)是便于移植。[*]描邊可用于創(chuàng)建border。內(nèi)發(fā)光可用于創(chuàng)建padding。外發(fā)光可用于創(chuàng)建margin和小圓角邊框。[*]混合模式、透明度、填充透明度都是圖層樣式的一部分。他們可以被一起方便地移植[*]單純使用樣式可以創(chuàng)建多種玻璃質(zhì)感、水晶效果、金屬拉絲、塑膠質(zhì)感的按鈕樣式。[/list]
圖層樣式的優(yōu)點(diǎn)：圖層樣式可以通過(guò)復(fù)制、粘貼操作來(lái)傳遞到其它圖層中。可以通過(guò)多選，一次向多個(gè)圖層粘貼某個(gè)樣式。還可以通過(guò)快捷鍵來(lái)操作。Alt+拖拽，是移動(dòng)某個(gè)圖層樣式，alt+crtl+拖拽是復(fù)制圖層樣式。（使用鼠標(biāo)快捷時(shí)，透明度，填充透明度和混合模式這3個(gè)屬性將無(wú)法像粘貼圖層樣式那樣也傳遞過(guò)去。）



圖層樣式不會(huì)破壞原始圖像質(zhì)量，允許隨時(shí)修改樣式的配置參數(shù)。
更改原始圖像時(shí)，應(yīng)用其上的圖層樣式會(huì)立即自動(dòng)變換以適應(yīng)新圖像。
圖層樣式支持無(wú)損縮放。(涉及像素紋理的除外)。另外當(dāng)psd文件的圖像大�。ǚ直媛剩┌l(fā)生改變時(shí)，圖層樣式可同步縮放。必須保證“圖像大小”的設(shè)置對(duì)話框里，

如圖這個(gè)復(fù)選框被選中，同步縮放才能起作用。
圖層樣式可保存為預(yù)設(shè)配置，進(jìn)入資源庫(kù)，在多個(gè)pad文件之間復(fù)用，保證樣式的繼承和統(tǒng)一。



下面這些鏈接中可以提供大量的圖層樣式下載，雙擊.sal文件，可以直接加載樣式在預(yù)設(shè)配置里。
42 photoshop Layer Styles for Button Design - Free Download
131 Ultimate Web 2.0 Layer Styles
220 Amazing Free photoshop Layer Styles


,八、資源管理——定義預(yù)設(shè)配置對(duì)于交互界面設(shè)計(jì)這種存在大量需要風(fēng)格統(tǒng)一的工程文件和多人團(tuán)隊(duì)協(xié)作的項(xiàng)目而言，資源管理是必須的工作。
和程序?qū)懽饕粯樱枰冉y(tǒng)一接口、函數(shù)，PS里也有許多可以預(yù)先配置好的元素。
包括 漸變、紋理、色卡、圖層樣式、矢量形狀、畫(huà)筆、等高線、工具、圖案等，更專業(yè)的還需要做統(tǒng)一的顏色配置。
PS提供在”菜單: 編輯 — 預(yù)算管理器”里管理這些資源�？蓪�(duì)資源進(jìn)行分組，命名，添加，刪除，存儲(chǔ)，載入等操作。



每一種資源都有對(duì)應(yīng)的控制面板，每一個(gè)面板右側(cè)都有折疊小三角。點(diǎn)擊后展開(kāi)統(tǒng)一的管理菜單。



在項(xiàng)目開(kāi)始前，
[list][*]將logo和標(biāo)志性裝飾圖形 作為 矢量形狀預(yù)設(shè)載入。[*]將主配色作為 色板預(yù)設(shè)載入[*]將常用漸變作為 漸變預(yù)設(shè)載入[*]將主按鈕和背景條樣式作為 圖層樣式預(yù)設(shè)載入[*]將常用紋理作為 圖案或填充紋理預(yù)設(shè)載入[*]將常用虛線作為 畫(huà)筆或圖案載入[*]……[/list]花一些前期準(zhǔn)備時(shí)間，將設(shè)計(jì)風(fēng)格進(jìn)行商討統(tǒng)一，然后新建組別存儲(chǔ)。并將不同類別的預(yù)設(shè)分別存儲(chǔ)為預(yù)設(shè)文件：如色塊文件：***_pro.aco , 漸變文件：***_pro.grd。分發(fā)給協(xié)作設(shè)計(jì)師使用。除了能大幅度提高工作效率，還能保證文檔工作的專業(yè)和規(guī)范。
且無(wú)論項(xiàng)目持續(xù)了多長(zhǎng)時(shí)間，或者經(jīng)歷時(shí)間漫長(zhǎng)的頻繁改版，或者更換過(guò)幾個(gè)設(shè)計(jì)師，都能保證基礎(chǔ)風(fēng)格的協(xié)調(diào)和統(tǒng)一。
九. 多人協(xié)作項(xiàng)目的ps文檔版本控制Adobe的從CS版本開(kāi)始，在套裝中提供了Version cue 和 Bridge.
Version cue:  用戶PSD文檔的版本控制，多人在線協(xié)作管理
Bridge：圖片管理/瀏覽工具。支持Adobe的所有工程文件預(yù)覽（得保存為pdf兼容格式）。擁有支持 tag , 圖片尺寸，類型 等多種維度的強(qiáng)大過(guò)濾器，用于管理本地?cái)?shù)量龐大的素材庫(kù)很好。
這兩個(gè)小工具軟件很容易被忽略，（我覺(jué)得是它們2.0之前的版本都做得太差了，Bridge曾經(jīng)導(dǎo)致我頻頻死機(jī)。但是從cs3版本后，這兩個(gè)小工具都在性能上做了很大優(yōu)化，變得非常好用）
關(guān)于結(jié)合使用Version cue 和 Bridge，創(chuàng)建一個(gè)屬于設(shè)計(jì)師的SVN系統(tǒng)，對(duì)工程文件進(jìn)行版本控制，這有一篇寫得很好很詳細(xì)的教程。