網(wǎng)頁主圖是一個網(wǎng)頁的門面,它體現(xiàn)所在網(wǎng)頁的整體風(fēng)格。例如,如圖所示是一個公司的主頁,主頁設(shè)計在很大程度上決定了整個網(wǎng)頁的主體色彩、布局以及風(fēng)格。因此,在網(wǎng)頁設(shè)計時,一般應(yīng)首先在Photoshop中網(wǎng)頁設(shè)計主頁圖形。
設(shè)計網(wǎng)頁主圖是比較關(guān)鍵的環(huán)節(jié),主圖制作得好壞,將直接關(guān)系到能否吸引瀏覽者的注意力。一個優(yōu)秀的主圖寥寥幾筆就能生動地勾畫網(wǎng)站的特點。一般來說,主圖的顏色必須與網(wǎng)頁完美融合、有獨特的創(chuàng)意,這是制作主圖時必須注意的。另外,網(wǎng)頁中的主圖不僅要好看,還應(yīng)恰當(dāng)?shù)乇憩F(xiàn)網(wǎng)頁主題思想、圖像文件大小等要求。
提示:主圖是多種多樣的,它可以是一幅極具創(chuàng)意的特效圖像,也可以是一個特別精致的小圖,或者干脆整個網(wǎng)頁就使用一幅大圖,如圖所示是兩家類型和風(fēng)格迥然不同的主頁,網(wǎng)站主題、顏色和布局都不同,但主頁中都使用了一幅大圖,而這個簡單漂亮的圖形充分體現(xiàn)出了其網(wǎng)頁的特色。
制作主頁頭部標(biāo)題和導(dǎo)航區(qū)域主頁頭部標(biāo)題和導(dǎo)航區(qū)域具體操作如下。
第1步,啟動Photoshop,新建文檔,設(shè)置畫布大小為1000像素×1000像素大小。選擇【視圖】|【標(biāo)尺】命令,顯示標(biāo)尺刻度。
第2步,在左側(cè)和頂部分別拖動輔助線,用輔助線勾畫出頁面布局的草圖。
第3步,制作頭部標(biāo)題和導(dǎo)航區(qū)域。共分4個小步驟,第1步制作頭部修飾邊框,第2步制作頭部漸變背景,第3步制作主導(dǎo)航按鈕,第4步制作次導(dǎo)航按鈕。
第4步,頭部修飾邊框需要自定義一塊紋理圖案。然后選擇【編輯】|【定義圖案】命令,把當(dāng)前圖案圖像定義為Photoshop圖案。
第5步,自定義圖案越小越好,保存在同一文件夾中。用【矩形選框工具】繪制一個1004像素×28像素的長條矩形。
第6步,新建圖層,選擇【編輯】|【填充】命令,在【填充】對話框的【使用】下拉列表框中選擇【圖案】選項,然后選擇上面定義好的背景圖案。單擊【確定】按鈕,填充選區(qū),制作頂部裝飾條。
第7步,用【直線工具】繪制一條直線,在工具選項欄中設(shè)置填充顏色為#e4b5a6,粗細(xì)為4像素,然后按住Shift鍵,在頂部拉出一條直線。
第8步,新建圖層,使用【漸變工具】在線條的下方應(yīng)用漸變填充,漸變類型為直線漸變,顏色從白色到淺黃色。
第9步,關(guān)于導(dǎo)航按鈕可以用文本制作,按鈕間隔點為直線,并設(shè)置直線點線線型。
廣告區(qū)主要是導(dǎo)入事先制作好的廣告條,并輸入裝飾性的文字。
【操作步驟】
第1步,先制作好兩條廣告條。
第2步,在Photoshop中,選擇【文件】|【置入】命令,在打開的【置入】對話框中選擇上面的廣告條。
第3步,按Ctrl+T快捷鍵,調(diào)整置入的圖像大小,并使用【移動工具】調(diào)整位置。
第4步,用【文本工具】在廣告條的圖像中輸入修飾性文本,如圖9.11所示。
標(biāo)題新聞區(qū)位于主頁的左側(cè),主要列表顯示最新最重要的新聞標(biāo)題,單擊鏈接可以打開二級頁面查看詳細(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),按向下方向鍵移動位置,重復(fù)多次操作,制作一序列間隔線和指示圖標(biāo)。
第5步,用圓角矩形繪制兩個功能區(qū),并導(dǎo)入裝飾圖標(biāo),用【文本工具】輸入跳轉(zhuǎn)按鈕。
在網(wǎng)頁設(shè)計中,標(biāo)題文字比較重要,因為標(biāo)題文字設(shè)計得是否吸引人,將直接關(guān)系著網(wǎng)頁的整體效果。而在設(shè)計標(biāo)題文字時,除了名字好聽、易懂、富有情趣之外,還要在文字效果的創(chuàng)意上下一番工夫,這樣才能引起瀏覽者的注意。
第1步,用【橢圓工具】繪制路標(biāo)指示牌前的圖標(biāo),用文本輸入路徑提示文字。用【直線工具】繪制一條寬為69.9像素、大小為1像素的直線,顏色和上面文本顏色一致,全部為土黃色(#D98359)。再用【矩形工具】繪制一個長方形,長為69.9像素,高為4像素,填充色為淺青色(#456A9.C),和上面直線緊密排列在一起。
第2步,新建一個圖層文件夾,命名為“主體區(qū)1”。用【文本工具】輸入標(biāo)題和內(nèi)容英文字母,用圓角矩形工具繪制一個區(qū)域邊框,并導(dǎo)入新聞圖片。
第3步,繪制一條虛線作為信息分隔線,用【圓角矩形工具】繪制一個圓角矩形按鈕,在【屬性】面板中應(yīng)用投影濾鏡效果。
第4步,全部設(shè)計完畢,用鼠標(biāo)拖動“主體區(qū)1”文件夾,復(fù)制該文件夾所有內(nèi)容,并用方向鍵整體移動復(fù)制的文件夾內(nèi)容。用此方式制作3個相同設(shè)計的圖片新聞區(qū)。第5步,在次主體區(qū)域繪制兩條直線,作為分隔線,并設(shè)置顏色,輸入標(biāo)題。
當(dāng)前文章標(biāo)題:制作網(wǎng)頁主圖
當(dāng)前URL:http://www.gtalker.cn/news/wzzz/3142.html
上一篇:案例實戰(zhàn):導(dǎo)出為網(wǎng)頁圖像
下一篇:制作標(biāo)題文字