Photoshop制作網站首頁(2):首頁內容的制作來源：xuexin.com 薛欣
因為相對于主體來說，內容部分并不是很容易出彩，所以其設計比主體更加需要清晰的思路，并非常考驗制作者的耐心。通常情況下內容部分的主要工作都是在Dreamweaver 中，所以這里我們在Photoshop 中所設計的只是一個供參照的外觀。

　　1. 在頁面的右側用矢量“矩形工具”繪制一個淡綠色的背景填充，該綠色的十六進制值為“#eefded”，幾乎接近于白色，這是為了突出前景深綠色的文字。這里的文字內容都是虛構的，其十六進制顏色值為“#054d00”，布局的位置如圖1-2-1 所示。





圖1-2-1
　　2. 在文字的下面是播放在線視頻的地方，我們這里插入一些圖片進行占位。圖片推薦在Adobe Stock Photos CS3 中進行查找，這是Adobe 提供的一個龐大的圖片素材庫，包含在Adobe Bridge CS3中，低質量的圖片小樣是完全免費的。因為網頁需較高的下載速度，因此低質量的照片反而更適合于網頁設計師。需要注意的是，該搜索功能暫時還不支持中文，所以這里我們搜索“bridge”來下載一些關于橋的照片，如圖1-2-2 所示。



圖1-2-2
　　3. 我們用多張“橋”和“花園”的圖片合成了這部分的圖像內容，這里使用的石橋剪影字體為“方正古隸簡體”，合成的方法因為非常簡單，這里就不再贅述，如圖1-2-3 所示。



圖1-2-3
　　4. 在下面繪制深灰色矩形，十六進制顏色值為“#2a2a2a”。輸入文字“ShiQiao Garden”，字體為“Trajan Pro”，這些均是作為中間的隔斷和裝飾，如圖1-2-4 所示。




圖1-2-4
　　5. 在隔斷下面再繪制一個較淺的灰色矩形，十六進制值為“#7a7a7a”。在該矩形上面再并排繪制兩個顏色更淺的灰色矩形，十六進制值為“#efefef”。這些矩形的繪制主要是用來布局，頻繁的使用灰色有兩個原因，一是因為灰色通常在設計中表示高級，另外，網頁的主體過于鮮艷，使用灰色可以平衡一下，以避免“搶了主角兒的戲”，如圖1-2-5 所示。




圖1-2-5




　　6. 在Adobe Stock Photos CS3 中搜索茶壺和棋子的圖片，均在Photoshop 中處理為90 X 90 像素的大小。在茶壺層上右擊，選擇“混合選項”，設置“描邊”的參數為大小“6”像素，位置為“內部”，“內部”描邊可以保證四個角均為直角，描邊的十六進制顏色值為“#067f18”，如圖1-2-6 所示。





圖1-2-6

　　7. 在茶壺層單擊右鍵，選擇“拷貝圖層樣式”，如圖1-2-7 所示。接下來再選擇棋子層, 單擊右鍵選擇“粘貼圖層樣式”，這樣做可以保證兩者的圖層樣式完全相同，并且更加快捷方便。



圖1-2-7
　　8. 在添加文字“石橋茶舍”和“石橋棋坊”，字體為“方正古隸簡體”，顏色值為“#646464”。介紹文字為“宋體”，大小“12 點”，消除鋸齒的方法為“無”，這樣設置可以保證非常清晰的小字，這類的清晰小字普便應用于網頁設計中，如圖1-2-8 所示。




圖1-2-8
　　9. 在頁面的左側位置，是用來放“Spry 選項卡式面板”的，這里我同樣是做了一個外觀占位，具體的操作會在后面的教程中詳述，如圖1-2-9 所示。




圖1-2-9
　　10. 在頁面的最下放，我們繪制一個深灰色的矩形，起圖層名為“灰色長條”，十六進制顏色值為“#2a2a2a”，上面輸入版權信息、地址、管理員和聯系人的姓名，聯系人是我剛出生的女兒，估計你聯系她，她也不會理你，哈哈，如圖1-2-10 所示。




圖1-2-10
　　11. 在我們為這個矩形描個邊兒，同樣是右鍵選擇“混合選項”，在描邊中設置大小為“3”像素，位置同樣的內部，顏色為較淺的灰色，十六進制顏色值為“#7a7a7a”，如圖1-2-11 所示。



圖1-2-11




　　12. 因為是內部描邊，在描過邊后，您也許會發現較粗的描邊已過多占用了本來就不富裕的“灰色長條”。為了增大一些空間，也為了這個描邊更具有裝飾性，這里需要把上邊緣的描邊去掉。不過我們知道，Photoshop 的描邊設置中沒有直接對單獨邊緣的設置方法，因此我們需要有一個小彎路。

　　選擇“灰色長條”層，執行菜單“圖層> 圖層樣式> 創建圖層”，這樣可以使樣式從圖層中分離而成為一個單獨的普通圖層，如圖1-2-12 所示。




圖1-2-12
　　13. 我們可以注意一下圖層面板中“灰色長條”層和其樣式的變化?，F在選擇“灰色長條”的內描邊層，然后使用選區工具把上邊緣的描邊刪除，看不清可以放到足夠大，如圖1-2-13 所示。說到這里，可能很多讀者會覺得為了這一點兒差別大動干戈沒什么必要，其實不然，網頁設計其實就種很瑣碎的工作，只有在細節中才能表現出精致的頁面，成功的頁面設計永遠都是由無數個精雕細刻的“小零件”組成的。至此我們首頁的圖樣就已經制作完成了。




圖1-2-13

　　舉一反三：

　　嘗試按照自己的思路來設計內容部分的網頁布局。

搜索更多相關主題的帖子:Photoshop 首頁 Dreamweaver 薛欣 十六進制