Photoshop制作網(wǎng)站首頁:首頁內(nèi)容的制作_PhotoShop網(wǎng)頁設(shè)計

編輯Tag賺U幣

教程Tag：暫無Tag,歡迎添加,賺取U幣!

因?yàn)橄鄬τ谥黧w來說，內(nèi)容部分并不是很輕易出彩，所以其設(shè)計比主體更加需要清楚的思路，并非常考驗(yàn)制作者的耐心。通常情況下內(nèi)容部分的主要工作都是在Dreamweaver 中，所以這里我們在Photoshop 中所設(shè)計的只是一個供參照的外觀。

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

圖1-2-1

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

圖1-2-2

　　3. 我們用多張“橋”和“花園”的圖片合成了這部分的圖像內(nèi)容，這里使用的石橋剪影字體為“方正古隸簡體”，合成的方法因?yàn)榉浅：唵危@里就不再贅述，如圖1-2-3 所示。

圖1-2-3

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

圖1-2-4

　　5. 在隔斷下面再繪制一個較淺的灰色矩形，十六進(jìn)制值為“#7a7a7a”。在該矩形上面再并排繪制兩個顏色更淺的灰色矩形，十六進(jìn)制值為“#efefef”。這些矩形的繪制主要是用來布局，頻繁的使用灰色有兩個原因，一是因?yàn)榛疑ǔＴ谠O(shè)計中表示高級，另外，網(wǎng)頁的主體過于鮮艷，使用灰色可以平衡一下，以避免“搶了主角兒的戲”，如圖1-2-5 所示。