本教程是一系列教程,主要講解如何用photoshop制作一個網站的首頁.

　　第1講 制作首頁的主體部分

　　課程總覽

　　在本課程中，朋友們將學習到以下內容：

　　•• 如何通過photoshop cs3 進行網站首頁的版面設計

　　•• 各種網頁版面元素的設計技巧和方法

　　•• 如何進行網頁的切圖以及切片的屬性設置

　　•• 如何創建與flash 整合的flv 視頻

　　•• 在dreamweaver cs3 中使用“spry 選項卡”構件

　　•• photoshop、flash、dreamweaver 的協同工作

　　第1 講 制作首頁的主體部分

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

　　書歸正傳，早先的網頁頁面設計一般是以dreamweaver 為中心，由photoshop 或flash 等軟件來提供各種素材，如圖片、動畫、文字等。自從photoshop 出現了“切圖”等專為網頁設計所定制的功能后，設計的中心已慢慢轉向了photoshop。因為photoshop 本身以圖像為基礎的特性，決定了他能對版面施以更精確的控制，使網頁的頁面能夠更加靈活和生動的布局，這幾乎完全解放了網頁設計師的創作靈感，不再受方方正正的網頁表格所約束。現在我們要制作的是“石橋花園”首頁的主體部分，主體部分包括標題、主展示圖片和導航條。

　　1. 打開photoshop cs3, 執行菜單“文件> 新建”。在新建對話框中設置名稱為“石橋花園”，寬度為“777”、高度為“800”，這個數字并不“官方”，只是我在平時工作當中測試出來的而已。對于網頁來說，一般只用于屏幕顯示，所以分辨率為“72”、顏色模式為“rgb 顏色”，其它參數保持默認。

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

圖1-1-1

|||

　　3. 使用橫排文字工具，輸入“石橋花園”字樣，字體為“方正流行體簡體”。再輸入“shiqiaogarden”，字體為“bickham script pro”，字號均為“30 點”，文字如圖1-1-2 所示布局。

圖1-1-2

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

圖1-1-3

　　5. 我們對圖片進行簡單的處理，執行菜單“圖像> 調整> 色階”，從兩側向中間調整黑色和白色滑塊的位置以使圖片主體更加突出，更富有感染力。原素材本身是16:9 寬屏的，我們使用選區工具加刪除鍵進行適當的裁切，如圖1-1-4 所示。

圖1-1-4

　　5. 為了增加花卉的現代感和時尚感，我們進一步對圖片進行加工，隨意找一張圖片，執行菜單“濾鏡> 像素化> 馬賽克”，數值調大，產生大色塊的馬賽克效果。然后通過素材或自己制作一張扭曲后的網格，這些都是待合成的素材，如圖1-1-5 所示。

圖1-1-5

|||

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

圖1-1-6

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

圖1-1-7

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

圖1-1-8

　　舉一反三：

　　嘗試用類似的方法設計個人主頁的標題和導航條等部分。

　　未完待續……