當前位置:首頁>ps入門教程>ps基礎(chǔ)教程>新手教程>教程內(nèi)容

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

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

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


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



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


圖層分組具有結(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)用,而絲毫不影響原始圖層。





,二、圖層命名規(guī)范一份沒有圖層命名和分組的源文件是最受前端開發(fā)人員詬病的,建立良好文檔規(guī)范,養(yǎng)成對圖層命名的習慣,除了利于源文件的移交、繼承和重用,提供效率,也體現(xiàn)了對協(xié)作成員的尊重。同時,圖層命名是使用圖層右鍵菜單的良好前提。
建議主要使用英文命名,便于在不同系統(tǒng)平臺之間的移交。
如何命名,可以參考前端的命名規(guī)范,針對界面布局、鼠標事件、不同的交互狀態(tài)有許多約定俗稱的叫法和縮寫,例如:
[indent]頁頭: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。
[/indent]等等……
三、使用蒙版1 使用蒙版的好處:


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




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



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



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



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版本):
[list][*]原始數(shù)據(jù)的留存:智能對象、歷史快照。[*]效果疊加:填充圖層、調(diào)整圖層、混合模式和圖層樣式[*]操作區(qū)域:上文中提到的蒙版,剪切組[*]屬性堆棧:智能對象的濾鏡庫堆棧(PS3中新功能)。[/list]

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


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



圖示案例:使用漸變填充圖層、使用畫筆/橡皮擦修改蒙版在web設(shè)計中,所有需要使用填充色塊的地方都盡可能使用矢量路徑+填充圖層來完成,這樣生成的填充色塊可以隨時隨地保持方便修改和無損形變。
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)整的方法:



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



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



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



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



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


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


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



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

如圖這個復選框被選中,同步縮放才能起作用。
圖層樣式可保存為預(yù)設(shè)配置,進入資源庫,在多個pad文件之間復用,保證樣式的繼承和統(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è)配置對于交互界面設(shè)計這種存在大量需要風格統(tǒng)一的工程文件和多人團隊協(xié)作的項目而言,資源管理是必須的工作。
和程序?qū)懽饕粯,需要先統(tǒng)一接口、函數(shù),PS里也有許多可以預(yù)先配置好的元素。
包括 漸變、紋理、色卡、圖層樣式、矢量形狀、畫筆、等高線、工具、圖案等,更專業(yè)的還需要做統(tǒng)一的顏色配置。
PS提供在”菜單: 編輯 — 預(yù)算管理器”里管理這些資源。可對資源進行分組,命名,添加,刪除,存儲,載入等操作。



每一種資源都有對應(yīng)的控制面板,每一個面板右側(cè)都有折疊小三角。點擊后展開統(tǒng)一的管理菜單。



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

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!