13-4 實(shí)戰(zhàn)網(wǎng)頁(yè)設(shè)計(jì)稿(2)

s1315現(xiàn)在圖層的數(shù)量也逐漸多了起來(lái)，此時(shí)就要注意加強(qiáng)管理，否則越到后面數(shù)量越多。如下圖，將除背景層外所有圖層組成一個(gè)“Top”組，Top表示頂部的意思，然后再將所有的欄目文字組成一個(gè)組。從層次上來(lái)看，欄目文字組只要不是位于“欄目背景”層之下，在任何層次都可以正常顯示。但出于相關(guān)性原則，我們還是將其與在“欄目背景”層相鄰。這樣也有利于今后的快速查找。圖示中因?yàn)槲覀儾捎昧藷o(wú)縮覽圖的方式，因此為了讓大家看圖方便，給每一個(gè)圖層改了名字。實(shí)際操作中不必如此。
這種圖層整理工作也不是必須的，但良好的圖層組織會(huì)給今后的修改帶來(lái)方便，如果你把文件移交給別人，別人也容易看懂。

s1316接著制作兩個(gè)圓角矩形，使用恰當(dāng)?shù)膱D層樣式(漸變填充和描邊)，形成組合體，如下左圖。接著輸入一些文字，并適當(dāng)設(shè)定字體、字號(hào)、行距、不透明度等，并為下方的“在線閱讀>>”添加上些許投影。如下中圖。然后對(duì)“>>”兩個(gè)字符單獨(dú)處理為上標(biāo)形式，前面加一個(gè)空格拉開(kāi)距離；將下方的按鈕改為深色，文字相應(yīng)改為淺色并視情加粗或選用更粗筆畫(huà)的字體，如下右圖。這樣色彩的對(duì)比可以突出按鈕。

--

這個(gè)組合體應(yīng)該由5個(gè)圖層組成，現(xiàn)在講它們組成一個(gè)圖層組，然后對(duì)圖層組進(jìn)行移動(dòng)復(fù)制，形成如下左圖的布局效果�？蓪⒏膹�(fù)制出來(lái)的文字改為其他文字內(nèi)容以示區(qū)別。這里就不作介紹，大家自己動(dòng)手即即可。
現(xiàn)在感覺(jué)畫(huà)面的底部空間余留不足，可能不足以制作落款，因此要將加大畫(huà)布尺寸(非圖像尺寸)，雖然可以通過(guò)【圖像_畫(huà)布大小】〖CTRL_ALT_C〗進(jìn)行設(shè)置，但它不夠直觀。實(shí)際上直接通過(guò)裁剪工具〖C〗更方便，如下右圖，用裁減工具的裁剪框充滿全圖像，然后將裁減框底部的裁剪線向下移動(dòng)，超出圖像原有范圍。提交裁減后圖像就變大了。由于要超出原有圖像尺寸，因此事先要將圖像窗口拉大一些才好操作。以后遇到此類需求時(shí)都可以使用該方法。

-

s1317雖然中間部分還沒(méi)有完工，但是我們可以先制作底部。底部的制作較為簡(jiǎn)單，主要是版權(quán)聲明，以及聯(lián)系方式等。另外也可以放置欄目菜單，這樣方便瀏覽著在底部可以直接選擇欄目。如下圖。這些都是通常的做法，大家也可以不遵循，按照自己的想法去做。
注意在下圖中欄目菜單的文字中間是用字符“|”分隔的 ，這個(gè)字符位于]下方。圖中文字的顏色以及下劃線等都可以通過(guò)字符調(diào)板設(shè)定。

現(xiàn)在我們的網(wǎng)頁(yè)已經(jīng)初具規(guī)模，可以再進(jìn)行一次整體調(diào)整及圖層組織。加上一些文字，移動(dòng)一些圖層的位置等。如下左圖。其實(shí)我們這個(gè)設(shè)計(jì)稿是仿造一個(gè)網(wǎng)頁(yè)模板制作的，如下右圖，大家可以自行接著將其他部分仿造出來(lái)，形成整體的效果。
如果以上部分沒(méi)有完成，可開(kāi)啟光盤(pán)素材目錄中的img1302.psd文件繼續(xù)。但開(kāi)啟時(shí)可能會(huì)出現(xiàn)文字字體不相符合的情況。這樣如果修改文字的內(nèi)容，將會(huì)被替換為默認(rèn)的字體。這沒(méi)有關(guān)系，反正我們要練習(xí)的主要是矢量制作。需要注意的是字體改變后，一些文字的布局可能需要進(jìn)行調(diào)整，大家自行決定。

-

s1318做到現(xiàn)在大家會(huì)發(fā)覺(jué)我們的設(shè)計(jì)稿是灰度的，這主要是因?yàn)樵谥谱鬟^(guò)程中使用色彩可能會(huì)影響構(gòu)圖，當(dāng)然如果只是仿造，也可以在一開(kāi)始就使用色彩。不過(guò)建議大家還是先使用灰度，這樣在后期也許會(huì)萌生屬于你自己的配色方案。況且，由于我們?cè)谥谱鬟^(guò)程中大量采用了填充圖層，改變色彩是很容易的。
我們還可以通過(guò)圖層樣式增加視覺(jué)效果。效果如下圖。首先為欄目菜單的矩形使用漸變疊加、圖案疊加、描邊；為長(zhǎng)條矩形添加外發(fā)光、漸變疊加、圖案疊加；為大師之路添加投影、漸變疊加、描邊；為徽標(biāo)添加投影；為人物添加外發(fā)光。之后還可以將3個(gè)按鈕分別改為不同的顏色。
如果制作上有困難，可以開(kāi)啟光盤(pán)素材目錄中的img1303.psd文件繼續(xù)后面的制作。不過(guò)要記住，在現(xiàn)實(shí)中是不會(huì)有人給大家提供源文件的，要靠自己。如果本小節(jié)中提供的兩個(gè)PSD源文件大家都沒(méi)有使用，說(shuō)明大家已經(jīng)具備相應(yīng)的制作水平了，我希望如此。