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

s1313現(xiàn)在我們來制作一個(gè)簡單的網(wǎng)頁設(shè)計(jì)稿。一個(gè)網(wǎng)頁一般為上中下三級結(jié)構(gòu)，如下圖，上部為網(wǎng)站的標(biāo)題及導(dǎo)航區(qū)，所謂導(dǎo)航也就是常見的欄目菜單。中部是網(wǎng)站內(nèi)容的正文。底部則是網(wǎng)站的版權(quán)聲明及其他說明。當(dāng)然這個(gè)只是一般網(wǎng)頁的結(jié)構(gòu)，也有通過其他方式組織的網(wǎng)頁。

s1314新建一個(gè)640×480的白底圖像，然后使用形狀工具〖U/SHIFT_U〗的矢量方式，畫出一個(gè)長方形。這個(gè)長方形本身具有4個(gè)錨點(diǎn)，我們使用錨點(diǎn)添加工具〖P/SHIFT_P〗，在長方形的上邊和下邊分別各增加兩個(gè)錨點(diǎn)，這樣矩形就有了8個(gè)錨點(diǎn)�，F(xiàn)在使用直接選擇工具〖A/SHIFT_A〗選中位于右側(cè)的上下4個(gè)錨點(diǎn)，將它們整體向上方移動些許。形成一個(gè)帶拐角的S形。過程如下左圖所示。
完成后使用直接選擇工具將兩條垂直邊分別向左右端移動達(dá)到畫面邊緣，如下右圖所示。

-

開啟光盤素材目錄中的model16.jpg，將人物從背景中分離。可使用魔棒工具選擇背景后反選得到人物選區(qū)，具體過程不再介紹。將人物移動到設(shè)計(jì)稿中，放置在矩形拐角處。并視情采取必要的手段調(diào)整人物的色彩。如下左圖。
再將我們之前做好的文字和徽標(biāo)放進(jìn)來，排列在左端的位置，大致如下右圖。下方的小文字使用的是“準(zhǔn)圓”，大家也可使用其它的字體。只是注意在字號比較小的時(shí)候，要嘗試各種文字抗鋸齒方式，找到最合適的。圖示中是采用了“犀利”。但依據(jù)字體的不同，這個(gè)設(shè)定也許也會不同。

-

現(xiàn)在來制作欄目菜單，在畫面的左上角繪制一個(gè)矢量的圓角矩形，其層次應(yīng)該位于之前所有圖層的下方。然后如下圖所示，將其中一個(gè)片斷向右方移動些許。這樣做是為了與原先的圖形形成較平滑的銜接。為避免視覺干擾，可暫時(shí)隱藏人物圖層。
需要注意的是，雖然新建的圓角矩形位于最下方圖層，但在對其路徑進(jìn)行操作的過程中，路經(jīng)錨點(diǎn)和片斷都會不受遮擋地顯示出來。因此大家不用擔(dān)心層次的問題。并且在圖示中我們看到實(shí)際上這個(gè)圓角矩形露出來的只是很小一部分，因此在繪制的時(shí)候大些小些都無所謂。

在組織了一些物體之后，設(shè)計(jì)稿的整體性就逐漸突出了，此時(shí)有必要將各元素進(jìn)行一次協(xié)調(diào)修改，以達(dá)到最好的配合�，F(xiàn)在我們就來進(jìn)行第一次的協(xié)調(diào)修改。如下左圖，將大師之路用自由變換工具壓扁一些；將徽標(biāo)縮小一些；增大小文字的間距；所有文字和徽標(biāo)整體略微向下移動一些；將遮擋了欄目菜單拐角的人物往左移動些許。當(dāng)然這些修改都并不是必須的，大家完全可以按照自己的想法去修改。創(chuàng)意是沒有正確與否的區(qū)別的。不必過分在乎別人的評價(jià)，只要你做出來的作品表達(dá)了你目前想要表達(dá)的效果，那就是成功的。
接著在欄目菜單區(qū)域打上文字，由于文字是白色，因此背景的圓角矩形填充色應(yīng)適當(dāng)加深一些。如下右圖。在實(shí)際的網(wǎng)頁制作中，欄目菜單文字經(jīng)常是以文本方式制作的。而我們現(xiàn)在是以圖片方式制作的，但這并無大礙。況且大家對網(wǎng)頁的一些特殊性質(zhì)也還并不了解。相應(yīng)內(nèi)容我們會在專門的網(wǎng)頁制作教程中介紹。

-

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

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

--

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

-

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

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

-

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

s1319大家注意到在模板網(wǎng)頁圖片中，在人物的長條背景內(nèi)有環(huán)狀的圖案。我們也可以來制作同樣的效果。首先開啟光盤素材目錄下的art17.jpg，如下左圖，使用【濾鏡_扭曲_極坐標(biāo)】將其變?yōu)榄h(huán)狀，設(shè)定如下中圖，效果如下右圖。

--

將素材圖片移動到設(shè)計(jì)稿中，為了達(dá)到讓其只出現(xiàn)在長條矩形區(qū)域內(nèi)的目的，我們可以使用剪貼蒙板。將其放置于長條矩形的上一層，在圖層調(diào)板中按住ALT鍵單擊兩個(gè)圖層的接縫處，建立剪貼蒙板，效果如下左圖，圖層調(diào)板如下右圖。為了達(dá)到更好的融和效果，我們使用了“顏色減淡”混合模式，并另外對其建立了點(diǎn)陣蒙版，在其圖層邊界處用黑色涂抹，以避免明顯的接縫產(chǎn)生。

-

雖然我們還沒有學(xué)習(xí)濾鏡的使用，但濾鏡不同于濾鏡或畫筆，本身沒什么技術(shù)性可言。濾鏡的效果很出色，為了不讓大家過早沉迷于濾鏡帶來的虛幻中，我們一直不予正式介紹。雖然如此，不過這并不影響我們使用濾鏡。況且，大家在經(jīng)過了這么長久的學(xué)習(xí)后，也該是收獲的季節(jié)了。
將剛才的圖層復(fù)制一個(gè)，復(fù)制出來的圖層也保留著剪貼蒙板的特性。對其使用【濾鏡_模糊_動感模糊】，設(shè)定如下左圖，之后將其往左方移動一些，混合模式改為“濾色”，并刪除隨復(fù)制而來的點(diǎn)陣蒙板，圖層調(diào)板如下中圖，圖像效果如下右圖。

--

原先我們制作環(huán)狀圖像是為了仿造模板圖像，現(xiàn)在我們也可以有自己的創(chuàng)造性，不就是濾鏡嗎？現(xiàn)在就對原先的環(huán)形圖像使用【濾鏡_模糊_徑向模糊】，設(shè)定如下左圖。圖像效果如下中圖。我們可以將其移動到大師之路文字附近，形成一種光芒發(fā)散的效果。如下右圖。

--

我們現(xiàn)在還處在創(chuàng)意的缺乏期，因此仿造一些成品的網(wǎng)頁是一個(gè)很好的學(xué)習(xí)方法。這同時(shí)也是在對以往學(xué)過的技術(shù)知識做回顧。從此大家在網(wǎng)絡(luò)上或街上看到一些比較出色的作品，就可以嘗試仿造。用于網(wǎng)頁的布局有許多種，由于網(wǎng)頁的特殊性，網(wǎng)頁設(shè)計(jì)稿在制作中有許多需要注意的地方。一些好看的效果未必適合在網(wǎng)頁上。我們將在另外的教程中專門介紹網(wǎng)頁設(shè)計(jì)稿的制作。

相信大家現(xiàn)在對路徑的優(yōu)點(diǎn)已經(jīng)非常熟悉了。如果有人覺得或許這稱不上方便，那不妨將所有路徑的部分全部改為點(diǎn)陣來制作�？纯袋c(diǎn)陣圖像在后期修改上是怎樣得麻煩。一般說來，一個(gè)Photoshop使用者在相當(dāng)長的一段時(shí)間內(nèi)，即使他的技術(shù)已經(jīng)非常熟練了，也還只會停留在使用點(diǎn)陣進(jìn)行制作的階段。在某一天某一個(gè)人的指點(diǎn)下，或自己無意之中，才會得到路徑的“真?zhèn)?rdquo;。我本人就是如此，從點(diǎn)陣到矢量花了相當(dāng)長的時(shí)間摸索。所以在把我的知識寫成教材的同時(shí)，在很早就著重講述了矢量這個(gè)方面。不夸張地說，會矢量才算是會設(shè)計(jì)。
除了不能使用濾鏡以外，路徑在縮放不失真以及改變錨點(diǎn)從而改變外形等方面有著很大的優(yōu)勢。因此大家今后都要優(yōu)先使用矢量進(jìn)行制作。另外在Illustrator中，矢量式可以使用濾鏡的。