這是一個重要但是容易被忽視的領域，很多設計師沒有文檔管理和文檔規范意識。認為只有代碼工作者才需要什么編碼規范和版本控制系統，photoshop作為一個應用軟件，討論這個有什么意義呢？

• 作為工程文件，一個復雜頁面的psd源文件里有200~300個圖層是很正常的事情。
• 作為最直面客戶和boss的開發環節，以及存在對視覺表現的個體認同差異，你可能會遭遇最多的需求變動、修改建議，需求反復……。
• 作為開發協作中的一員，你的源文件會被其他設計師或開發者使用或修改。
• 作為開發文檔中的一部分，你的源文件會面臨移交、繼承和重用。
• 圖層命名無法辨識，幾百個圖層沒有分組、元件難以修改、被調用的原始素材被處理地面目全非，修改版本無法回溯、設計樣式無法復用，同組的psd文件風格或布局無法統一……如果你正在修改這樣一份psd源文件，會不會抓狂？

作為一個ui設計師，建立文檔管理和文檔規范意識，不僅能便于團隊協助和工程文件的移交，更重要的是能快速顯著地提升自己的工作效率。

作為工程管理的一部分，ps的文檔管理也具有以下特征：

• 編碼規范：命名規范。
• 架構設計：組織結構合理。
• 版本管理：不對原始素材形成不可逆的破壞，可進行版本追溯。
• 協作機制：元素和樣式便于復用和調用。
• 資源管理：通過定義預設配置庫或資源庫來提高效率。

下文中，我將和大家一一分享具體的工作方法。

一．圖層的分組和管理

ps提供了三種方式來組織圖層(layers)之間的關系：圖層組、鏈接組、剪切組。

在進行用戶界面設計的過程中，應該根據布局區塊來組織圖層分組。對圖層進行分組是一種基本的信息組織方法，將大量的、分散的、雜亂的信息經過組織、整序、優化、存貯，形成一個便于有效利用系統的過程。

1 使用圖層分組管理的主要優勢：

便于組織和檢索:

將圖層編入同一圖層組組，進行圖層組命名，并形成樹狀結構，可以方便創作者快速查找圖層在圖層面板序列中的所在。

如何快速選擇圖層：

選中移動工具，在屬性面板中 取消自動選擇前面的勾選，在下拉菜單中選中圖層。在使用移動工具的時候，按住ctrl鍵，可以直接選中 當前可視的圖層。

學習善用右鍵：

用上面的方法快速選中圖層后，點擊右鍵，可以看見右鍵菜單中顯示了 表示基于圖層組的的樹狀列表，通過這個右鍵菜單可以快速切換到所需的圖層。但前提是要有良好的圖層組織結構和圖層命名。

便于挪動修改布局:

圖層組可以作為一個整體進行移動和縮放，將位于同一布局區塊的圖層編入一組，可以快速改變某一區塊的位置和比例，方便地實行布局的調整。

便于整體管理：

圖層組可以作為一個整體進行 刪除、顯示/隱藏、修改透明度和混合模式模式。圖層形成編組，令創作者可以快速地顯/隱一批圖層進行效果預覽。對一組圖層進行整體操作。還可以創建基于組的蒙版，整體控制某一圖層組的顯示區域

在設計屬于一個網站的不同頁面時，使用圖層組可以快速創建統一的設計模版，保留共有的區域的圖層編組。

2 圖層分組和鏈接組

圖層分組具有結構特效，鏈接組更多用于表示關系。

為圖層建立鏈接組，可以鎖定幾個圖層之間的相對位置。對它們其中任何一個執行移動縮放、拖拽復制和刪除操作時，都會對整體生效。

鏈接組更容易創建和解除關系，位于同一鏈接組中的圖層可以分別位于不同的圖層組，實際上形成了另一種結構維度。

3 盡量不要合并圖層。

圖層合并操作是不可逆的，（本文中指的所有不可逆的操作都不包括在歷史記錄面板的有限步數的回溯）。可以通過執行ctrl+alt+e 來合并圖層，這個命令在被選中的圖層上方創建了一個經過合并操作的副本，生成了一個新的合并圖層。你可以對這個獨立圖層隨便進行修改和調用，而絲毫不影響原始圖層。

|||

二、圖層命名規范

一份沒有圖層命名和分組的源文件是最受前端開發人員詬病的，建立良好文檔規范，養成對圖層命名的習慣，除了利于源文件的移交、繼承和重用，提供效率，也體現了對協作成員的尊重。同時，圖層命名是使用圖層右鍵菜單的良好前提。

建議主要使用英文命名，便于在不同系統平臺之間的移交。

如何命名，可以參考前端的命名規范，針對界面布局、鼠標事件、不同的交互狀態有許多約定俗稱的叫法和縮寫，例如：

頁頭：header   內容：content/container   頁面主體：main

頁尾：footer   導航：nav   側欄：sidebar   欄目：column

整體布局：wrapper   左右中：縮寫為 l r c   水平/垂直：縮寫為h/v

導航：nav   子菜單：submenu   摘要: summary   按鈕：btn   滾動：scroll

鼠標懸停：hover      點擊：click      已瀏覽：visited。

等等……

三、使用蒙版

1 使用蒙版的好處：

蒙版通過疊加一個蒙版圖層來控制原始圖像的顯示。最大的好處是：可以自由實現對原始圖像圖層的擦除、剪裁、摳圖、邊緣虛化等這些極普遍的操作，但原始圖像內容不會受到破壞。

2 圖層蒙版和矢量蒙版：

蒙版分為圖層蒙版（我覺得像素蒙版這個叫法更好一點）和矢量蒙版。

兩者用法相同，一個是位圖，一個是矢量。圖層蒙版支持透明度，矢量蒙版支持路徑。

圖層蒙版通過工具欄上和圖層面板底部的創建蒙版按鈕來創建。原理跟存儲選區的“alpha通道”原理類似。通過灰度來記錄蒙版的區域及透明度。白色代表顯示全透明，黑色代表不透明，50%的灰色代表50%的透明度。支持濾鏡、柔化和改變透明度等操作。由于是像素對象，執行變換操作時，蒙版邊緣會出現質損。

矢量蒙版需要先創建一個矢量對象，然后按住crtl鍵的同時，點擊圖層面板底部的創建蒙版按鈕來完成創建?？梢酝ㄟ^路徑選擇和鋼筆等工具對矢量蒙版進行編輯修改。由于是矢量對象，變化操作時蒙版對象的邊緣始終是平滑的。但不支持透明度、柔化邊緣和大部分濾鏡。

3 剪切組的優勢和弱點：

剪切組也是蒙版的一種形式，同樣具有不破壞原始圖像的特征，它既可以具有像素蒙版特性也可以具有矢量蒙版特性（這取決于剪切組最底部的圖層）。

剪切組的優勢是可方便應用于多個圖層，使用上具有直觀的組織性，但壞處，對象圖層必須在次序上緊挨著，而且在調整圖層次序的操作時，容易導致誤操作。

ps中回溯歷史記錄的步驟是有限的，所有操作在經歷超過一定步數的修改后都無法進行版本還原，以及進行針對原版本的修改。對于一個工程文件而言，版本不可逆是災難性的。所以針對ps，我們應該保留素材的原始數據，盡量使用非破壞性編輯。

“非破壞性操作”是圖像處理軟件長久以來面臨的問題，adobe從最早的版本到最新的cs4，經過十幾年發展，ps的用戶們也遍歷變遷。最早ps的使用者為了保留歷史版本，不得不頻繁“保存副本”。直到后來有了歷史記錄面板，有了快照，有了調整圖層，有了智能對象，cs3版本中更向3dsmax學習了屬性堆棧。

來看看ps在“非破壞性操作”的4個方面上已具備的功能（截止到cs3版本）：

• 原始數據的留存：智能對象、歷史快照。
• 效果疊加：填充圖層、調整圖層、混合模式和圖層樣式
• 操作區域：上文中提到的蒙版，剪切組
• 屬性堆棧：智能對象的濾鏡庫堆棧（ps3中新功能）。

|||

四、使用填充圖層和調整圖層

圖層面板下方的添加調整（填充）圖層按鈕

1 填充圖層：

當需要為頁面上某個版塊添加淺灰色背景，在導航上使用長條型漂亮的漸變背景時，你是習慣如何操作，創建一個空白圖層，在選區里直接填色？還是使用填充圖層？

ps中傳統方式是在空白圖層中創建選區或路徑后執行填充命令，但自從允許使用填充圖層在對象中填充純色、漸變或紋理后，油漆桶變成了最雞肋的工具之一。

相比較傳統方式，填充圖層具有更大的操作靈活性。單擊圖層面板中的圖層縮略圖，就可以隨時更改顏色、修改漸變、更換紋理，且具有非常直觀的預覽效果。

填充圖層中填充對象的形狀范圍實際上是一種內置蒙版，所以這種填充方式集合了蒙版的種種優勢，比如可以使用黑白畫筆來隨意修改填充邊緣、或使用矢量編輯工具來修改矢量形狀蒙版。

圖示案例：使用漸變填充圖層、使用畫筆/橡皮擦修改蒙版

在web設計中，所有需要使用填充色塊的地方都盡可能使用矢量路徑+填充圖層來完成，這樣生成的填充色塊可以隨時隨地保持方便修改和無損形變。

圖示案例：使用矢量工具+填充圖層 創建常用元件。

2 調整圖層

調整圖像的色階、色相、對比度、色彩平衡？把彩色圖像變為灰度圖像，色彩反相，調整照片的色溫，這些都是最常用的操作。但你經常拿不定主意，對原始圖像施加調整效果進行實驗……

一個設計成淺藍色的按鈕，boss看了不喜歡，要求改成淺綠色。改完以后效果不好，boss又要求改成灰色……

如果你經常遭遇上述情況，請選用“調整圖層”功能來進行你的調色實驗吧。

ps中可以用來實現圖像調整的方法：

使用調整圖層要好于其它兩種操作，調整圖層不會更改原始圖像中的像素，（會略微增加文件大?。?，也是一種內置的蒙版。可以隨時更改。 在進行多項調整時，使用調整圖層意味著新建多個圖層，多個調整圖層可以分別修改排序、混合樣式和透明度。

圖示案例：使用調整圖層改變元件配色

|||

六、使用智能對象及濾鏡堆棧

1  智能對象

ps從cs版本開始增加了智能對象（smart object）。智能對象可以保護原始像素內容，用戶可以進行變換操作（包括縮放，旋轉，變形等）而不會累次地降低圖像質量。如一個400px寬的位圖素材，使用變換操作壓縮為200px寬，旋轉45°。后來又想修改為300px框，旋轉為原位。但上一次壓縮操作已經對圖像質量形成了不可逆的損害。如果在操作第一次變換前將該素材轉為智能對象，無論它之后變換了多少次，都可以保證是基于400px寬的原始質量來進行更改操作。

智能對象的另一個好處是，可以通過編輯其中一個副本來實現對所有副本的同步改動。

一個使用了智能對象副本的psd源文件尺寸會小于標準的psd文件，這是因為智能對象圖層的復制不會像標準圖層復制那樣生成真正的多倍像素內容，而只是充當了源的角色。

這一點和“ai的嵌入”有很像的特征。

圖示案例：使用智能對象，編輯智能對象的原始文件，達到影響所有副本。

2 智能濾鏡和濾鏡堆棧

智能濾鏡是指針對智能對象應用的一些濾鏡，在濾鏡庫里可以瀏覽濾鏡菜單，預覽并對統一對象使用多個濾鏡。

濾鏡堆棧和ai中的外觀面板很相似，所有施用過的智能濾鏡都顯示在ps的圖層面板。你可以再次關閉該濾鏡，調整濾鏡的透明度和疊加模式，調整多個濾鏡的施用次序。

除了上述優點，還可以再次對智能對象的原始文件進行修改，所以使用智能濾鏡，在原始文件和濾鏡使用的操作上都有極大的靈活性。同時也都是非破壞性編輯。

圖示案例：使用智能濾鏡和濾鏡堆棧。

3 柵格化操作

智能對象，矢量對象，文字對象有一些共性：在被柵格化（像素化）之前，隨時隨地都具備可編輯性，這個特性讓上述對象類型在任何時候都應該成為你的首選。但是有些濾鏡和變形操作是其失效的。

所以要非常謹慎地操作柵格化命令，柵格化和圖層合并一樣是破壞性的，不可逆的。

如果必須要使用某些濾鏡效果或變形，建議不妨為上述對象創建一個副本，隱藏保留原本，在副本上施行操作。

對于邊緣修改，邊緣羽化、擦除這類操作，可以使用蒙版技術來完成。這同樣是非破壞性操作。

|||

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

圖層樣式可以實現非常豐富的特效，包括投影，光澤，紋理，發光。

除了常用的發光、投影、浮雕外（在webui設計中其實它們反而不常用），

1. 圖層樣式可用于填充純色、漸變和紋理。比較與填充圖層，圖層樣式最顯著的特點是便于移植。
2. 描邊可用于創建border。內發光可用于創建padding。外發光可用于創建margin和小圓角邊框。
3. 混合模式、透明度、填充透明度都是圖層樣式的一部分。他們可以被一起方便地移植
4. 單純使用樣式可以創建多種玻璃質感、水晶效果、金屬拉絲、塑膠質感的按鈕樣式。

圖層樣式的優點：

圖層樣式可以通過復制、粘貼操作來傳遞到其它圖層中。可以通過多選，一次向多個圖層粘貼某個樣式。還可以通過快捷鍵來操作。alt+拖拽，是移動某個圖層樣式，alt+crtl+拖拽是復制圖層樣式。（使用鼠標快捷時，透明度，填充透明度和混合模式這3個屬性將無法像粘貼圖層樣式那樣也傳遞過去。）

圖層樣式不會破壞原始圖像質量，允許隨時修改樣式的配置參數。

更改原始圖像時，應用其上的圖層樣式會立即自動變換以適應新圖像。

圖層樣式支持無損縮放。(涉及像素紋理的除外)。另外當psd文件的圖像大?。ǚ直媛剩┌l生改變時，圖層樣式可同步縮放。必須保證“圖像大小”的設置對話框里，如圖這個復選框被選中，同步縮放才能起作用。

圖層樣式可保存為預設配置，進入資源庫，在多個pad文件之間復用，保證樣式的繼承和統一。

下面這些鏈接中可以提供大量的圖層樣式下載，雙擊.sal文件，可以直接加載樣式在預設配置里。

42 photoshop layer styles for button design - free download

131 ultimate web 2.0 layer styles

220 amazing free photoshop layer styles

|||

八、資源管理——定義預設配置

對于交互界面設計這種存在大量需要風格統一的工程文件和多人團隊協作的項目而言，資源管理是必須的工作。

和程序寫作一樣，需要先統一接口、函數，ps里也有許多可以預先配置好的元素。

包括 漸變、紋理、色卡、圖層樣式、矢量形狀、畫筆、等高線、工具、圖案等，更專業的還需要做統一的顏色配置。

ps提供在”菜單: 編輯 —> 預算管理器”里管理這些資源。可對資源進行分組，命名，添加，刪除，存儲，載入等操作。

每一種資源都有對應的控制面板，每一個面板右側都有折疊小三角。點擊后展開統一的管理菜單。

在項目開始前，

• 將logo和標志性裝飾圖形 作為 矢量形狀預設載入。
• 將主配色 作為 色板預設載入
• 將常用漸變 作為 漸變預設載入
• 將主按鈕和背景條樣式 作為 圖層樣式預設載入
• 將常用紋理 作為 圖案或填充紋理預設載入
• 將常用虛線 作為 畫筆或圖案載入
• ……

花一些前期準備時間，將設計風格進行商討統一，然后新建組別存儲。并將不同類別的預設分別存儲為預設文件：如色塊文件：***_pro.aco , 漸變文件：***_pro.grd。分發給協作設計師使用。除了能大幅度提高工作效率，還能保證文檔工作的專業和規范。

且無論項目持續了多長時間，或者經歷時間漫長的頻繁改版，或者更換過幾個設計師，都能保證基礎風格的協調和統一。

九. 多人協作項目的ps文檔版本控制

adobe的從cs版本開始，在套裝中提供了version cue 和 bridge.

version cue:  用戶psd文檔的版本控制，多人在線協作管理

bridge：圖片管理/瀏覽工具。支持adobe的所有工程文件預覽（得保存為pdf兼容格式）。擁有支持 tag , 圖片尺寸，類型 等多種維度的強大過濾器，用于管理本地數量龐大的素材庫很好。

這兩個小工具軟件很容易被忽略，（我覺得是它們2.0之前的版本都做得太差了，bridge曾經導致我頻頻死機。但是從cs3版本后，這兩個小工具都在性能上做了很大優化，變得非常好用）

關于結合使用version cue 和 bridge，創建一個屬于設計師的svn系統，對工程文件進行版本控制，這有一篇寫得很好很詳細的教程。