Photoshop制作網(wǎng)站首頁(yè)(1):首頁(yè)主體制作

Photoshop制作網(wǎng)站首頁(yè)(1):首頁(yè)主體制作作者：薛欣 來(lái)源：xuexin.com
本教程是一系列教程,主要講解如何用photoshop制作一個(gè)網(wǎng)站的首頁(yè).
　　第1講 制作首頁(yè)的主體部分



　　課程總覽

　　在本課程中，朋友們將學(xué)習(xí)到以下內(nèi)容：

　　•• 如何通過(guò)Photoshop CS3 進(jìn)行網(wǎng)站首頁(yè)的版面設(shè)計(jì)

　　•• 各種網(wǎng)頁(yè)版面元素的設(shè)計(jì)技巧和方法

　　•• 如何進(jìn)行網(wǎng)頁(yè)的切圖以及切片的屬性設(shè)置

　　•• 如何創(chuàng)建與Flash 整合的FLV 視頻

　　•• 在Dreamweaver CS3 中使用“Spry 選項(xiàng)卡”構(gòu)件

　　•• Photoshop、Flash、Dreamweaver 的協(xié)同工作

　　第1 講 制作首頁(yè)的主體部分

　　本文以“石橋花園”的網(wǎng)站首頁(yè)為例，來(lái)演示頁(yè)面創(chuàng)作的整個(gè)過(guò)程。其實(shí)“石橋花園”是不存在的，筆者虛構(gòu)出來(lái)也并非只為完成本例，我一直向往生活在幽靜、閑雅之所，雖然“石橋花園”離我的初衷有很多差異，但也多少能表達(dá)我的一些想法吧。

　　書歸正傳，早先的網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)一般是以Dreamweaver 為中心，由Photoshop 或Flash 等軟件來(lái)提供各種素材，如圖片、動(dòng)畫、文字等。自從Photoshop 出現(xiàn)了“切圖”等專為網(wǎng)頁(yè)設(shè)計(jì)所定制的功能后，設(shè)計(jì)的中心已慢慢轉(zhuǎn)向了Photoshop。因?yàn)镻hotoshop 本身以圖像為基礎(chǔ)的特性，決定了他能對(duì)版面施以更精確的控制，使網(wǎng)頁(yè)的頁(yè)面能夠更加靈活和生動(dòng)的布局，這幾乎完全解放了網(wǎng)頁(yè)設(shè)計(jì)師的創(chuàng)作靈感，不再受方方正正的網(wǎng)頁(yè)表格所約束?，F(xiàn)在我們要制作的是“石橋花園”首頁(yè)的主體部分，主體部分包括標(biāo)題、主展示圖片和導(dǎo)航條。


　　1. 打開(kāi)Photoshop CS3, 執(zhí)行菜單“文件> 新建”。在新建對(duì)話框中設(shè)置名稱為“石橋花園”，寬度為“777”、高度為“800”，這個(gè)數(shù)字并不“官方”，只是我在平時(shí)工作當(dāng)中測(cè)試出來(lái)的而已。對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)，一般只用于屏幕顯示，所以分辨率為“72”、顏色模式為“RGB 顏色”，其它參數(shù)保持默認(rèn)。

　　2. 按下Ctrl A 全選頁(yè)面，執(zhí)行菜單“編輯> 填充”將頁(yè)面填為純黑色。在工具箱中選擇矢量的“矩形工具”，繪制一個(gè)如圖1-1-1 所示長(zhǎng)方形A。然后使用白色的“直接選擇工具”將該矢量形狀扭曲成如圖1-1-1 中B 所示外觀，該形狀的十六進(jìn)制顏色值為“#246b34”，一種厚重的深綠色。




圖1-1-1




　　3. 使用橫排文字工具，輸入“石橋花園”字樣，字體為“方正流行體簡(jiǎn)體”。再輸入“ShiQiaoGarden”，字體為“Bickham Script Pro”，字號(hào)均為“30 點(diǎn)”，文字如圖1-1-2 所示布局。




圖1-1-2
　　4. 這是一張拍攝自龍亭的花卉原始素材，采用了微距加上2.8 的大光圈，實(shí)現(xiàn)了淺景深的背景模糊效果，讀者可以使用模糊工具或鏡頭模糊濾鏡實(shí)現(xiàn)類似的效果，如圖1-1-3 所示。




圖1-1-3
　　5. 我們對(duì)圖片進(jìn)行簡(jiǎn)單的處理，執(zhí)行菜單“圖像> 調(diào)整> 色階”，從兩側(cè)向中間調(diào)整黑色和白色滑塊的位置以使圖片主體更加突出，更富有感染力。原素材本身是16:9 寬屏的，我們使用選區(qū)工具加刪除鍵進(jìn)行適當(dāng)?shù)牟们校鐖D1-1-4 所示。



圖1-1-4
　　5. 為了增加花卉的現(xiàn)代感和時(shí)尚感，我們進(jìn)一步對(duì)圖片進(jìn)行加工，隨意找一張圖片，執(zhí)行菜單“濾鏡> 像素化> 馬賽克”，數(shù)值調(diào)大，產(chǎn)生大色塊的馬賽克效果。然后通過(guò)素材或自己制作一張扭曲后的網(wǎng)格，這些都是待合成的素材，如圖1-1-5 所示。




圖1-1-5




　　6. 現(xiàn)在有網(wǎng)格、花卉和馬賽克三層圖片，網(wǎng)格放在最上層，將圖層的混合模式設(shè)為“顏色加深”，不透明度設(shè)為“68%”。花卉層的混合模式設(shè)為“強(qiáng)光”，馬賽克圖層不變，三者的合成效果如圖1-1-6所示。




圖1-1-6

　　7. 下面要制作的是首頁(yè)的導(dǎo)航條部分，使用矢量的“矩形工具”繪制一個(gè)長(zhǎng)方形，注意該長(zhǎng)方形不要畫滿，留一些黑邊在周圍，黑邊上窄下粗，使其具有一定的層次感。十六進(jìn)制顏色值為“#c8fcc5”，一種清淡的綠色，如圖1-1-7 所示。




圖1-1-7
　　8. 使用橫排文字工具輸入導(dǎo)航條上的文字，使用大括號(hào)“{}”進(jìn)行裝飾，字體為“方正小標(biāo)宋_GBK”, 消除鋸齒的方法為“渾厚”，如圖1-1-8 所示。這里所制作的導(dǎo)航只起到占位作用，后面的教程中將設(shè)置導(dǎo)航條按鈕的翻轉(zhuǎn)效果。




圖1-1-8
　　舉一反三：

　　嘗試用類似的方法設(shè)計(jì)個(gè)人主頁(yè)的標(biāo)題和導(dǎo)航條等部分。

　　未完待續(xù)……

搜索更多相關(guān)主題的帖子:網(wǎng)站首頁(yè) Photoshop photoshop 體制 課程