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

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

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

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

--

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

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

-

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

--

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

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

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

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

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

-

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

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

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

--