Photoshop制作網(wǎng)站首頁(2):首頁內(nèi)容的制作

Photoshop制作網(wǎng)站首頁(2):首頁內(nèi)容的制作來源：xuexin.com 薛欣
因?yàn)橄鄬?duì)于主體來說，內(nèi)容部分并不是很容易出彩，所以其設(shè)計(jì)比主體更加需要清晰的思路，并非常考驗(yàn)制作者的耐心。通常情況下內(nèi)容部分的主要工作都是在Dreamweaver 中，所以這里我們?cè)赑hotoshop 中所設(shè)計(jì)的只是一個(gè)供參照的外觀。

　　1. 在頁面的右側(cè)用矢量“矩形工具”繪制一個(gè)淡綠色的背景填充，該綠色的十六進(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 提供的一個(gè)龐大的圖片素材庫，包含在Adobe Bridge CS3中，低質(zhì)量的圖片小樣是完全免費(fèi)的。因?yàn)榫W(wǎng)頁需較高的下載速度，因此低質(zhì)量的照片反而更適合于網(wǎng)頁設(shè)計(jì)師。需要注意的是，該搜索功能暫時(shí)還不支持中文，所以這里我們搜索“bridge”來下載一些關(guān)于橋的照片，如圖1-2-2 所示。



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



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




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




圖1-2-5




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





圖1-2-6

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



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




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




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




圖1-2-10
　　11. 在我們?yōu)檫@個(gè)矩形描個(gè)邊兒，同樣是右鍵選擇“混合選項(xiàng)”，在描邊中設(shè)置大小為“3”像素，位置同樣的內(nèi)部，顏色為較淺的灰色，十六進(jìn)制顏色值為“#7a7a7a”，如圖1-2-11 所示。



圖1-2-11




　　12. 因?yàn)槭莾?nèi)部描邊，在描過邊后，您也許會(huì)發(fā)現(xiàn)較粗的描邊已過多占用了本來就不富裕的“灰色長(zhǎng)條”。為了增大一些空間，也為了這個(gè)描邊更具有裝飾性，這里需要把上邊緣的描邊去掉。不過我們知道，Photoshop 的描邊設(shè)置中沒有直接對(duì)單獨(dú)邊緣的設(shè)置方法，因此我們需要有一個(gè)小彎路。

　　選擇“灰色長(zhǎng)條”層，執(zhí)行菜單“圖層> 圖層樣式> 創(chuàng)建圖層”，這樣可以使樣式從圖層中分離而成為一個(gè)單獨(dú)的普通圖層，如圖1-2-12 所示。




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




圖1-2-13

　　舉一反三：

　　嘗試按照自己的思路來設(shè)計(jì)內(nèi)容部分的網(wǎng)頁布局。

搜索更多相關(guān)主題的帖子:Photoshop 首頁 Dreamweaver 薛欣 十六進(jìn)制