設(shè)計師PSD文檔管理指南

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

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

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

作為開發(fā)協(xié)作中的一員，你的源文件會被其他設(shè)計師或開發(fā)者使用或修改。

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

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

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

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

編碼規(guī)范：命名規(guī)范。

架構(gòu)設(shè)計：組織結(jié)構(gòu)合理。

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

協(xié)作機制：元素和樣式便于復用和調(diào)用。

資源管理：通過定義預(yù)設(shè)配置庫或資源庫來提高效率。

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

一、圖層的分組和管理

圖01

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

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

1、使用圖層分組管理的主要優(yōu)勢

便于組織和檢索:

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

如何快速選擇圖層

圖02

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

學習善用右鍵

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

圖03

便于挪動修改布局

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

便于整體管理

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

在設(shè)計屬于一個網(wǎng)站的不同頁面時，使用圖層組可以快速創(chuàng)建統(tǒng)一的設(shè)計模版，保留共有的區(qū)域的圖層編組。

2、圖層分組和鏈接組

圖04

圖層分組具有結(jié)構(gòu)特效，鏈接組更多用于表示關(guān)系。

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

鏈接組更容易創(chuàng)建和解除關(guān)系，位于同一鏈接組中的圖層可以分別位于不同的圖層組，實際上形成了另一種結(jié)構(gòu)維度。

3、盡量不要合并圖層

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

圖05

二、圖層命名規(guī)范

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

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

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

頁頭：header 內(nèi)容：content/container 頁面主體：main

頁尾：footer 導航：nav 側(cè)欄：sidebar 欄目：column

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

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

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

等等……

三、使用蒙版

1、使用蒙版的好處

圖06

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

2、圖層蒙版和矢量蒙版

圖07

圖08

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

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

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

圖09

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

圖10

3、剪切組的優(yōu)勢和弱點

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

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

圖11

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

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

來看看PS在“非破壞性操作”的4個方面上已具備的功能(截止到CS3版本)：

原始數(shù)據(jù)的留存：智能對象、歷史快照。

效果疊加：填充圖層、調(diào)整圖層、混合模式和圖層樣式

操作區(qū)域：上文中提到的蒙版，剪切組

屬性堆棧：智能對象的濾鏡庫堆棧(PS3中新功能)。

四、使用填充圖層和調(diào)整圖層

圖層面板下方的添加調(diào)整(填充)圖層按鈕

圖12

1、填充圖層

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

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

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

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

圖13

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

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

圖14

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

2、調(diào)整圖層

調(diào)整圖像的色階、色相、對比度、色彩平衡?把彩色圖像變?yōu)榛叶葓D像，色彩反相，調(diào)整照片的色溫，這些都是最常用的操作。但你經(jīng)常拿不定主意，對原始圖像施加調(diào)整效果進行實驗……

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

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

PS中可以用來實現(xiàn)圖像調(diào)整的方法

圖15

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

圖16

圖示案例：使用調(diào)整圖層改變元件配色

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

1、智能對象

PS從cs版本開始增加了智能對象(smart object)。智能對象可以保護原始像素內(nèi)容，用戶可以進行變換操作(包括縮放，旋轉(zhuǎn)，變形等)而不會累次地降低圖像質(zhì)量。如一個400px寬的位圖素材，使用變換操作壓縮為200px寬，旋轉(zhuǎn)45°。后來又想修改為300px框，旋轉(zhuǎn)為原位。但上一次壓縮操作已經(jīng)對圖像質(zhì)量

[設(shè)計師PSD文檔管理指南]相關(guān)文章：

1.設(shè)計師PSD文檔管理指南

【設(shè)計師PSD文檔管理指南】相關(guān)文章：

文檔管理實訓報告08-13

辦公室文檔管理辦法08-03

工作失職通告文檔04-07

員工偷盜通告文檔04-24

食堂禁止浪費通告文檔05-23

設(shè)計師管理制度07-04

如何快速歸類電腦文檔07-12

我的家鄉(xiāng)作文范文文檔06-25

公司衛(wèi)生檢查罰款通告文檔03-25

在 ThemeForest 購買 PSD 網(wǎng)頁設(shè)計，或者 Site Templates，有源代碼提供嗎？07-09