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

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)，將它們整體向上方移動(dòng)些許。形成一個(gè)帶拐角的S形。過程如下左圖所示。
完成后使用直接選擇工具將兩條垂直邊分別向左右端移動(dòng)達(dá)到畫面邊緣，如下右圖所示。

-

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

-

現(xiàn)在來制作欄目菜單，在畫面的左上角繪制一個(gè)矢量的圓角矩形，其層次應(yīng)該位于之前所有圖層的下方。然后如下圖所示，將其中一個(gè)片斷向右方移動(dòng)些許。這樣做是為了與原先的圖形形成較平滑的銜接。為避免視覺干擾，可暫時(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)一些；將遮擋了欄目菜單拐角的人物往左移動(dòng)些許。當(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)頁制作教程中介紹。

-