設計師PSD文檔管理指南

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

　　作為工程文件，一個復雜頁面的psd源文件裡有200~300個圖層是很正常的事情。

　　作為最直面客戶和BOSS的開發環節，以及存在對視覺表現的個體認同差異，你可能會遭遇最多的需求變動、修改建議，需求反復……。

　　作為開發協作中的一員，你的源文件會被其他設計師或開發者使用或修改。

　　作為開發文檔中的一部分，你的源文件會面臨移交、繼承和重用。

　　圖層命名無法辨識，幾百個圖層沒有分組、元件難以修改、被調用的原始素材被處理地面目全非，修改版本無法回溯、設計樣式無法復用，同組的psd文件風格或布局無法統一……如果你正在修改這樣一份psd源文件，會不會抓狂?

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

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

　　編碼規范：命名規范。

　　架構設計：組織結構合理。

　　版本管理：不對原始素材形成不可逆的破壞，可進行版本追溯。

　　協作機制：元素和樣式便於復用和調用。

　　資源管理：通過定義預設配置庫或資源庫來提高效率。

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

　　一、圖層的分組和管理

　　圖01

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

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

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

　　便於組織和檢索:

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

　　如何快速選擇圖層

　　圖02

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

　　學習善用右鍵

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

　　圖03

　　便於挪動修改布局

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

　　便於整體管理

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

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

　　2、圖層分組和鏈接組

　　圖04

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

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

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

　　3、盡量不要合並圖層

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

　　圖05

　　二、圖層命名規范

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

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

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

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

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

　　整體布局：wrapper 左右中：縮寫為 L R C 水平/垂直：縮寫為H/V

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

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

　　等等……

　　三、使用蒙版

　　1、使用蒙版的好處

　　圖06

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

　　2、圖層蒙版和矢量蒙版

　　圖07

　　圖08

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

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

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

　　圖09

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

　　圖10

　　3、剪切組的優勢和弱點

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

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

　　圖11

　　PS中回溯歷史記錄的步驟是有限的，所有操作在經歷超