13-3 制作簡單網(wǎng)頁物體

在掌握了路徑和圖層樣式之后，我們終于可以開始“白手起家”地制作網(wǎng)頁了。這不同于以往開啟一幅圖像后對其進行調(diào)整，或?qū)蓚€圖層通過蒙版或圖層混合模式進行合成等操作，是完全在一片空白上逐步建立所需的圖像。從中大家也會學習到一些關于制作網(wǎng)頁設計稿的技巧。其實我們是很希望將全部內(nèi)容在一本書內(nèi)寫完的，但由于篇幅有限，因此將另外在專門教程中介紹。

雖然我們還未開始，但如果大家牢記以下3大原則并適當加以應用，就相當于掌握了一半知識。第一是矢量，第二是圖層樣式，第三是混合模式。注意這里的混合模式并不是圖層之間的合成，而是指圖層樣式中的混合，比如我們曾專門介紹的“純色加漸變”就屬于其中一個。在制作的過程中，基本都是以矢量方式進行的，盡管大家在最初或許會覺得不適應，但很快就會明白為何我們著重強調(diào)矢量路徑的重要性。

s1306先從局部開始，嘗試制作出一些小按鈕之類的。新建一個約200×200的白底圖像，使用圓角矩形工具〖U/SHIFT_U〗，在頂部選擇形狀圖層方式，半徑約10px。在圖像中繪制一個90×30左右的長方形(可使用信息調(diào)板〖F8〗觀察數(shù)值)。將填充色設為灰色，大致如下左圖。形狀圖層方式其實就是矢量純色填充層。這將是我們在制作過程中最經(jīng)常使用的方式，單純路徑方式其次。
看上去很難看，怎么也不像按鈕，我們需要使用圖層樣式為其營造效果。既然是按鈕，通常要具備立體感，那么使用“斜面和浮雕”樣式是比較簡單的方法，設定如下中圖，注意大小不要設定太大，還有底部陰影的不透明度要低一些以免形成太大的明暗反差。效果如下右圖。看上去有一些像按鈕了吧。

--

s1307就在這個簡單的效果中，我們要分析一下圖像大小對于樣式和其他設定的影響。大家可以看到，在圖層樣式中各項設定的數(shù)值往往都是px即像素，而很少是百分比。這就引發(fā)一個問題，剛才我們繪制出來的圓角矩形的寬度大約是90像素，我們在浮雕樣式中設定的大小是5像素，兩者的比例是16，看上去比較好，不多也不少。但如果矩形的寬度是900像素的話，兩者的比例則達到160，同樣數(shù)值的浮雕就幾乎顯現(xiàn)不出效果了。相反，如果矩形的寬度只有9像素，則浮雕的效果又會太過明顯。除此之外，也有可能在后期對物體進行放大或縮小等變換操作。
雖然我們所假設的比例比較夸張，但在現(xiàn)實中的確存在這樣的情況，即一個圖層樣式往往有其適用的尺寸。針對較大或較小的物體使用時則會出現(xiàn)效果上的偏差。所以當某個圖層樣式的效果并不明顯或過于明顯時，不要急于刪除樣式，可先嘗試更改其中設定的像素數(shù)值。物體大就改大，小就改小。百分比數(shù)值的影響較小，可不作更改或略微更改即可。角度數(shù)值一般不受影響。但如果對物體進行了旋轉(zhuǎn)變換，某些使用角度的數(shù)值就可能需要更改，其中最明顯的莫過于漸變疊加的角度。
除了圖層樣式的因素以外，對于圓角矩形來說，其圓角半徑也是一個像素值，那么當我們要繪制較大或較小的圓角矩形時，該數(shù)值也就應當相應增大或減小。其他的形狀如矩形或橢圓等則無此“煩惱”。
在Illustrator中，我們可以設定將樣式隨圖形縮放，那是一個非常實用的功能，希望以后版本的Photoshop能加入該功能。

s1308現(xiàn)在繼續(xù)設定樣式。一般斜面浮雕都與投影并存，這是一個用來體現(xiàn)立體感的最常見組合。所以現(xiàn)在添加上投影樣式，分別如下左圖和下右圖。注意投影的不透明度應低一些，太高會造成很濃重的陰影。這是初學者需要注意的問題，他們往往喜歡使用濃重的陰影來表達。實際上輕微的投影就可以達到體現(xiàn)的效果，須知要體現(xiàn)的是物體而不是投影，投影是一種襯托而不應成為主體，因此應予以淡化處理。過于濃重的投影反而會喧賓奪主，令作品顯得粗燥。

-

s1309接著我們雙擊填充層的縮覽圖，改變所填充的顏色，設為亮黃色。如下左圖。此時會覺得黃色的浮雕效果變得不明顯。這是因為浮雕效果也是通過高光和陰影體現(xiàn)的，而亮黃色自身的亮度較高，這使得浮雕的高光變得不明顯，而陰影部分則受影響不大。不過現(xiàn)在更重要的問題是亮黃色的按鈕在白色背景上不夠醒目，這就是缺少邊界感。
在圖像合成中我們都在盡量淡化邊界，那是因為要營造整體感。但是在網(wǎng)頁設計中，像按鈕等這類功能性物體應該具有明顯的邊界，這樣才能令人一目了然。否則怎么知道按鈕在哪里呢？所以我們通過設定描邊樣式解決這個問題。分別如下中圖和下右圖。注意在描邊顏色的設定中我們使用了灰色而不是黑色，這主要是為了避免造成太強烈的邊界感。

--

好了，這個按鈕就做好了。是不是有上當?shù)母杏X？開頭那大張旗鼓地介紹原來也就是兩三步而已。其實這個按鈕是用來讓大家理解網(wǎng)頁設計稿的特點的。我們不能盲目地去使用各種功能制作各種效果，網(wǎng)頁設計稿不是效果的堆砌，而應該有選擇有風格地使用適當?shù)氖侄稳I造。
可以說，在網(wǎng)頁設計稿中只會應用到Photoshop非常少的部分功能，比如我們不會使用濾鏡，也基本不需要進行色彩調(diào)整，連選區(qū)也難得一見。所使用的就是矢量路徑和圖層樣式而已。雖然如此，但矢量方式將令大大提升我們的工作效率，因為在創(chuàng)造性方面，矢量具有很強的優(yōu)勢。真正的設計師，用的不是Photoshop而是Illustrator，原因就在于后者提供了更廣泛的創(chuàng)作空間。以后有機會我們還會撰寫Illustrator的教程供大家學習。

立體感和邊界感是網(wǎng)頁設計稿的基本要素，立體感令物體顯得飽滿，邊界感劃分出頁面的功能區(qū)域。營造立體感的手法通常就是斜面浮雕，而邊界感的產(chǎn)生可以使用描邊樣式，也可以是顏色反差。頁面功能區(qū)的劃分一般是通過線條或色塊。

s1310使用矢量的好處，是不是在變換上具有不失真不損失質(zhì)量的優(yōu)勢呢？是的。作為設計稿，在后期肯定有改動的可能性，這其中當然內(nèi)包括放大縮小等變換。不過我們之所以再三強調(diào)使用矢量圖形，除了它在變換這個層次上使損失質(zhì)量的優(yōu)勢以外，還具有改變外形上的優(yōu)勢。
一般來說，無論放大或是縮小，都是對物體整體的拉伸或壓縮，假設我們現(xiàn)在要將這圓角長方形變短一些，大家首先想到的就是〖CTRL_T〗用變換工具縮小寬度，如下圖上部。但仔細觀察結果，會發(fā)現(xiàn)圓角也被壓縮了。然而如果通過直接選擇工具將右端的4個紅色錨點向左方移動一定距離，則在縮短寬度的同時仍然能保留其圓角不變。很明顯，我們在大多數(shù)情況下是需要后者那種效果的。

運用我們在路徑章節(jié)所學習的知識，可以將圓角矩形改為更多的外形。如下圖，分別是刪除56錨點并下移47錨點；刪除78錨點；將2345錨點整體移動到1678錨點的左方。注意這里的操作并非使用刪除錨點工具，而是用直接選擇工具選擇后按DELETE鍵刪除，雖然這樣會造成開放路徑，但對于填充及圖層樣式?jīng)]有影響。
在改變外形上，矢量圖形的優(yōu)勢是很明顯的，只要有足夠的耐心，大家可以將這個圓角矩形變?yōu)榛疖囷w機大炮等各種各樣的形狀。中國古典名著《西游記》中描述孫悟空有改變外形的特殊能力，那么按照今天的觀點，可以判定孫悟空也是由矢量路徑構成的。

s1311除了在物體自身上作變化外，還可以將其復制并修改，形成一個組合體。過程如下左圖，將之前的按鈕復制一個，將相應的錨點向下移動以增加其高度。并取消浮雕樣式，增加圖案疊加樣式制作出掃描線的效果。再將原來的按鈕修改成“平底”并取消浮雕和投影。最后將兩者組合在一起，這就形成了一個帶標題的文字框。圖案疊加樣式的設定如下右圖。

-

這個組合體雖然結構簡單，但在制作過程中的復制技巧是非常有用的。由于兩個物體的寬度一致，如果重新繪制則較為麻煩，必須借助信息調(diào)板的數(shù)值或其他手段才能保證。而采用復制的方法產(chǎn)生新物體就可以直接繼承前者的尺寸，并且利用矢量路徑特有的優(yōu)勢，通過移動錨點位置去改變物體尺寸，我們稱之為“矢量克隆并移動錨點”法。雖然此法的名稱長了些(要不就簡稱為“矢克移”吧)，但從強調(diào)的“矢量”二字中就可知道它并不適用于點陣圖形。具體原因不必多說。

其實組合物體并不具備“樣式”這樣的說法，我們的意思是指那些組成組合體的單個成員物體。在形成組合之前，各個物體可以由各自不同的樣式設定，怎樣設定都沒設么關系。但在形成組合體后，有些樣式就需要改變。比如我們剛才所作的那些圓角矩形本身都具備陰影樣式，但如果兩個矩形形成組合后還各自保留陰影，則效果就不好。就是要避免樣式的重復。就算必須使用相同的樣式，在參數(shù)上也要有所不同。但這些參數(shù)并不包括光照角度，因為在一個組合體中出現(xiàn)兩種陰影方向明顯是不正確的。

s1312這個組合體由兩個圖層組成，如果在標題區(qū)域還有文字的話，那就應該是3個圖層，雖然嚴格說來標題的文字不算是物體之一，不過像這樣的組合體一定要有標題文字才算完整。那我們就加上標題文字，并將它們歸為一個圖層組，如下左圖和下中圖。
將這個圖層組復制幾份并移動到不同位置，然后更改一下尺寸及顏色，就可以形成一個簡單的網(wǎng)頁布局了。如下右圖。

--