網(wǎng)頁(yè)主圖是一個(gè)網(wǎng)頁(yè)的門(mén)面，它體現(xiàn)所在網(wǎng)頁(yè)的整體風(fēng)格。例如，如圖所示是一個(gè)公司的主頁(yè)，主頁(yè)設(shè)計(jì)在很大程度上決定了整個(gè)網(wǎng)頁(yè)的主體色彩、布局以及風(fēng)格。因此，在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，一般應(yīng)首先在Photoshop中網(wǎng)頁(yè)設(shè)計(jì)主頁(yè)圖形。

設(shè)計(jì)網(wǎng)頁(yè)主圖是比較關(guān)鍵的環(huán)節(jié)，主圖制作得好壞，將直接關(guān)系到能否吸引瀏覽者的注意力。一個(gè)優(yōu)秀的主圖寥寥幾筆就能生動(dòng)地勾畫(huà)網(wǎng)站的特點(diǎn)。一般來(lái)說(shuō)，主圖的顏色必須與網(wǎng)頁(yè)完美融合、有獨(dú)特的創(chuàng)意，這是制作主圖時(shí)必須注意的。另外，網(wǎng)頁(yè)中的主圖不僅要好看，還應(yīng)恰當(dāng)?shù)乇憩F(xiàn)網(wǎng)頁(yè)主題思想、圖像文件大小等要求。

提示：主圖是多種多樣的，它可以是一幅極具創(chuàng)意的特效圖像，也可以是一個(gè)特別精致的小圖，或者干脆整個(gè)網(wǎng)頁(yè)就使用一幅大圖，如圖所示是兩家類型和風(fēng)格迥然不同的主頁(yè)，網(wǎng)站主題、顏色和布局都不同，但主頁(yè)中都使用了一幅大圖，而這個(gè)簡(jiǎn)單漂亮的圖形充分體現(xiàn)出了其網(wǎng)頁(yè)的特色。

　制作主頁(yè)頭部標(biāo)題和導(dǎo)航區(qū)域主頁(yè)頭部標(biāo)題和導(dǎo)航區(qū)域具體操作如下。

第1步，啟動(dòng)Photoshop，新建文檔，設(shè)置畫(huà)布大小為1000像素×1000像素大小。選擇【視圖】|【標(biāo)尺】命令，顯示標(biāo)尺刻度。

第2步，在左側(cè)和頂部分別拖動(dòng)輔助線，用輔助線勾畫(huà)出頁(yè)面布局的草圖。

第3步，制作頭部標(biāo)題和導(dǎo)航區(qū)域。共分4個(gè)小步驟，第1步制作頭部修飾邊框，第2步制作頭部漸變背景，第3步制作主導(dǎo)航按鈕，第4步制作次導(dǎo)航按鈕。

第4步，頭部修飾邊框需要自定義一塊紋理圖案。然后選擇【編輯】|【定義圖案】命令，把當(dāng)前圖案圖像定義為Photoshop圖案。

第5步，自定義圖案越小越好，保存在同一文件夾中。用【矩形選框工具】繪制一個(gè)1004像素×28像素的長(zhǎng)條矩形。

第6步，新建圖層，選擇【編輯】|【填充】命令，在【填充】對(duì)話框的【使用】下拉列表框中選擇【圖案】選項(xiàng)，然后選擇上面定義好的背景圖案。單擊【確定】按鈕，填充選區(qū)，制作頂部裝飾條。

第7步，用【直線工具】繪制一條直線，在工具選項(xiàng)欄中設(shè)置填充顏色為#e4b5a6，粗細(xì)為4像素，然后按住Shift鍵，在頂部拉出一條直線。

第8步，新建圖層，使用【漸變工具】在線條的下方應(yīng)用漸變填充，漸變類型為直線漸變，顏色從白色到淺黃色。

第9步，關(guān)于導(dǎo)航按鈕可以用文本制作，按鈕間隔點(diǎn)為直線，并設(shè)置直線點(diǎn)線線型。

制作廣告區(qū)

廣告區(qū)主要是導(dǎo)入事先制作好的廣告條，并輸入裝飾性的文字。

【操作步驟】

第1步，先制作好兩條廣告條。

第2步，在Photoshop中，選擇【文件】|【置入】命令，在打開(kāi)的【置入】對(duì)話框中選擇上面的廣告條。

第3步，按Ctrl+T快捷鍵，調(diào)整置入的圖像大小，并使用【移動(dòng)工具】調(diào)整位置。

第4步，用【文本工具】在廣告條的圖像中輸入修飾性文本，如圖9.11所示。

制作標(biāo)題新聞區(qū)

標(biāo)題新聞區(qū)位于主頁(yè)的左側(cè)，主要列表顯示最新最重要的新聞標(biāo)題，單擊鏈接可以打開(kāi)二級(jí)頁(yè)面查看詳細(xì)內(nèi)容。

【操作步驟】

第1步，先導(dǎo)入欄目的標(biāo)題背景圖案，背景圖案可以事先在Photoshop中制作完成。

第2步，再導(dǎo)入欄目圖標(biāo)，用文本輸入標(biāo)題和副標(biāo)題。

第3步，在欄目標(biāo)題的下面增加欄目間隔線和指示圖標(biāo)，其中間隔線設(shè)置為虛線顯示，顏色為灰色。

第4步，復(fù)制該間隔線和指示圖標(biāo)，按向下方向鍵移動(dòng)位置，重復(fù)多次操作，制作一序列間隔線和指示圖標(biāo)。

第5步，用圓角矩形繪制兩個(gè)功能區(qū)，并導(dǎo)入裝飾圖標(biāo)，用【文本工具】輸入跳轉(zhuǎn)按鈕。

制作標(biāo)題文字

在網(wǎng)頁(yè)設(shè)計(jì)中，標(biāo)題文字比較重要，因?yàn)闃?biāo)題文字設(shè)計(jì)得是否吸引人，將直接關(guān)系著網(wǎng)頁(yè)的整體效果。而在設(shè)計(jì)標(biāo)題文字時(shí)，除了名字好聽(tīng)、易懂、富有情趣之外，還要在文字效果的創(chuàng)意上下一番工夫，這樣才能引起瀏覽者的注意。

文字的輸入和編輯

第1步，用【橢圓工具】繪制路標(biāo)指示牌前的圖標(biāo)，用文本輸入路徑提示文字。用【直線工具】繪制一條寬為69.9像素、大小為1像素的直線，顏色和上面文本顏色一致，全部為土黃色（#D98359）。再用【矩形工具】繪制一個(gè)長(zhǎng)方形，長(zhǎng)為69.9像素，高為4像素，填充色為淺青色（#456A9.C），和上面直線緊密排列在一起。

第2步，新建一個(gè)圖層文件夾，命名為“主體區(qū)1”。用【文本工具】輸入標(biāo)題和內(nèi)容英文字母，用圓角矩形工具繪制一個(gè)區(qū)域邊框，并導(dǎo)入新聞圖片。

第3步，繪制一條虛線作為信息分隔線，用【圓角矩形工具】繪制一個(gè)圓角矩形按鈕，在【屬性】面板中應(yīng)用投影濾鏡效果。

第4步，全部設(shè)計(jì)完畢，用鼠標(biāo)拖動(dòng)“主體區(qū)1”文件夾，復(fù)制該文件夾所有內(nèi)容，并用方向鍵整體移動(dòng)復(fù)制的文件夾內(nèi)容。用此方式制作3個(gè)相同設(shè)計(jì)的圖片新聞區(qū)。第5步，在次主體區(qū)域繪制兩條直線，作為分隔線，并設(shè)置顏色，輸入標(biāo)題。