實(shí)例6 制作茶藝網(wǎng)站布局模板

實(shí)例說明

本實(shí)例中，將指導(dǎo)制作茶藝網(wǎng)站布局模板。茶藝網(wǎng)站布局模板整體簡單明了，主題突出，色彩以灰綠色調(diào)為主，顯得淡雅溫馨，模板中板塊設(shè)置合理，便于進(jìn)行后期的處理。

技術(shù)要點(diǎn)

在制作本實(shí)例時(shí)，首先使用矩形工具繪制選區(qū)，通過將該選區(qū)進(jìn)行填充，完成茶藝網(wǎng)站布局模板區(qū)域的制作，然后導(dǎo)入背景素材圖像，使用“色相/飽和度”命令將該圖像色調(diào)進(jìn)行調(diào)整，使其能與網(wǎng)站整體顏色相融合，最后通過添加標(biāo)識(shí)與創(chuàng)建文本完成該實(shí)例的制作。

在制作本實(shí)例時(shí)，應(yīng)注意色調(diào)的整體把握，該網(wǎng)站整體色調(diào)偏灰，使色彩與主題相吻合，并注意模塊的布局，使其更具美感，圖6-1為本實(shí)例完成后的效果。

1 運(yùn)行Photoshop CS3，執(zhí)行菜單欄中的“文件”/“新建”命令，打開“新建”對話框。在“名稱”文本框中鍵入“制作茶藝網(wǎng)站布局模板”。在“寬度”參數(shù)欄內(nèi)鍵入1024，在“高度”參數(shù)欄內(nèi)鍵入768，單位設(shè)置為“像素”，在“分辨率”參數(shù)欄內(nèi)鍵入72，在“模式”下拉式選項(xiàng)欄中選擇“RGB顏色”選項(xiàng)，在“背景內(nèi)容”下拉式選項(xiàng)欄中選擇“白色”選項(xiàng)，如圖6-2所示，單擊“確定”按鈕，創(chuàng)建一個(gè)新文件。

2 單擊工具欄中的“設(shè)置前景色”按鈕，打開“拾色器（前景色）”對話框，將R、G、B值分別設(shè)為172、173、159，如圖6-3所示。

3 按組合鍵Alt+Delete，使用前景色填充圖層。

4 選擇工具箱的“矩形選框工具”按鈕，在如圖6-4所示的位置繪制一個(gè)矩形選區(qū)，將R、G、B值分別設(shè)為183、182、169的淺灰色。

5 單擊“圖層”面板底部的“添加圖層樣式”按鈕，打開“圖層樣式”對話框，選擇“投影”復(fù)選框，在投影編輯窗口中，在“不透明度”參數(shù)欄內(nèi)鍵入19，在“角度”參數(shù)欄內(nèi)鍵入-140，在“距離”參數(shù)欄內(nèi)鍵入8，如圖6-5所示。

6 按組合鍵Ctrl+D取消選區(qū)。單擊“圖層”面板底部的“創(chuàng)建新圖層”按鈕，創(chuàng)建一個(gè)新圖層——“圖層2”。

7 選擇工具箱的“矩形選框工具”按鈕，在如圖6-6所示的位置繪制一個(gè)矩形選區(qū)，將該選區(qū)填充為R、G、B值為222、223、218的淺灰色。

8 按組合鍵Ctrl+D取消選區(qū)。選擇工具箱中的“矩形選框工具”按鈕，在如圖6-7所示的位置繪制一個(gè)矩形選區(qū)，將該選區(qū)填充為R、G、B值為229、230、225的淺灰色。

9 按組合鍵Ctrl+D取消選區(qū)。將前景色設(shè)置為R、G、B值為229、230、225的淺灰色，然后單擊工具箱中的“自定形狀工具”下拉按鈕下的“直線工具”按鈕，這時(shí)在屬性欄內(nèi)會(huì)出現(xiàn)其編輯參數(shù)，在“粗細(xì)”參數(shù)欄內(nèi)鍵入0.08，參照圖6-8在繪制三條直線。

10 選擇工具箱的“矩形選框工具”按鈕，在如圖6-9所示的位置繪制一個(gè)矩形選區(qū)，將該選區(qū)填充為R、G、B值分別為208、209、198的淺灰色。

11 按組合鍵Ctrl+D取消選區(qū)。按Shift鍵，分別繪制如圖6-10所示的選區(qū)，將該選區(qū)填充為R、G、B值為148、145、138的灰色。

12 按組合鍵Ctrl+D取消選區(qū)。使用工具箱中的“直線工具”按鈕，參照圖6-11所示繪制四條由深灰色到淺灰色過渡的直線。

13 接下來需要導(dǎo)入背景圖像。在菜單欄中執(zhí)行“文件”/“打開”命令，彈出“打開”對話框，從該對話框內(nèi)選擇本書附帶光盤中的“使用Photoshop CS3編輯網(wǎng)頁素材/實(shí)例6：制作茶藝網(wǎng)站布局模板/背景.jpg”文件，單擊“打開”按鈕，打開該文件，如圖6-12所示。

14 確定“背景.jpg”層處于可編輯狀態(tài)，使用工具箱中的“移動(dòng)工具”，將“背景.jpg”移動(dòng)至圖6-13所示的位置，在“圖層”面板中會(huì)出現(xiàn)一個(gè)新的圖層——“圖層3”。

15 確定“圖層3”處于可編輯狀態(tài)，執(zhí)行菜單欄中“圖像”/“調(diào)整”/“色相/飽和度”命令，彈出“色相/飽和度”對話框。在“色相”參數(shù)欄內(nèi)鍵入10，在“飽和度”參數(shù)欄內(nèi)鍵入-76，如圖6-14所示。單擊“確定”按鈕，退出該對話框。

16 進(jìn)入“圖層”面板，在“圖層3”的“不透明度”參數(shù)欄內(nèi)鍵入80，如圖6-15所示。

17 接下來為茶藝網(wǎng)站布局模板添加標(biāo)識(shí)與文字說明。創(chuàng)建一個(gè)新圖層——“圖層4”。然后單擊工具箱中的“直線工具”下拉按鈕下的“自定形狀工具”按鈕，這時(shí)在屬性欄內(nèi)會(huì)出現(xiàn)其編輯參數(shù)，單擊“點(diǎn)按可打開‘自定形狀’拾色器”下拉按鈕，打開該選項(xiàng)欄，選擇如圖6-16所示的“后退”選項(xiàng)。

18 將前景色設(shè)置為白色，按住Shift鍵，在如圖6-17所示的位置繪制該圖形。

19 創(chuàng)建一個(gè)新圖層——“圖層5”。選擇工具箱中的“自定形狀工具”，這時(shí)在屬性欄內(nèi)會(huì)出現(xiàn)其編輯參數(shù)，單擊“點(diǎn)按可打開‘自定形狀’拾色器”下拉按鈕，打開該選項(xiàng)欄，選擇“箭頭2”選項(xiàng)。在如圖6-18所示的位置繪制圖形。

20 創(chuàng)建一個(gè)新圖層——“圖層6”。使用繪制箭頭的方法，參照圖6-19再次繪制一個(gè)箭頭圖形。然后在“圖層”面板中的“不透明度”參數(shù)欄內(nèi)鍵入60。

提示

在繪制第二個(gè)箭頭時(shí)，應(yīng)使該箭頭略小于第一個(gè)。

21 創(chuàng)建一個(gè)新圖層——“圖層7”。使用繪制箭頭的方法，參照圖6-20繪制一個(gè)箭頭圖形。然后在“圖層”面板中的“不透明度”參數(shù)欄內(nèi)鍵入30。

22 接下來將創(chuàng)建完成后的箭頭標(biāo)識(shí)進(jìn)行復(fù)制。按住Ctrl鍵，選擇“圖層5”、“圖層6”、“圖層7”三個(gè)圖層，然后按組合鍵Ctrl+E，將選擇的圖層進(jìn)行合并，合并后的圖層為“圖層7”。

技巧

為了便于編輯，確定創(chuàng)建完成的圖層在不需要更改的情況下可將其進(jìn)行合并，這樣不僅可以減少圖層數(shù)量，便于編輯，還可以大大提高工作效率。

23 選擇“圖層7”層，將其拖至“圖層”面板底部的“創(chuàng)建新圖層”按鈕中，復(fù)制得到“圖層7副本”層。

24 選擇工具箱中的“移動(dòng)工具”，將“圖層7副本”層中的圖像移動(dòng)至圖6-21所示的位置，并縮放該圖像的大小。

25 使用同樣的方法，將該圖像復(fù)制2次，并參照圖6-22移動(dòng)對象的位置。

26 接下為茶藝網(wǎng)站布局模板添加文本。單擊工具箱中的“橫排文字工具”按鈕，在屬性欄內(nèi)的“設(shè)置字體系列”下拉式選項(xiàng)欄中選擇“方正黑繁體”選項(xiàng)，在“字體大小”參數(shù)欄內(nèi)鍵入18，將“設(shè)置文本顏色”顯示窗內(nèi)的顏色設(shè)置為R、G、B值為151、135、123的灰色。在如圖6-23所示的位置鍵入DIGG。

27 單擊工具箱中的“橫排文字工具”按鈕，在屬性欄內(nèi)的“設(shè)置字體系列”下拉式選項(xiàng)欄中選擇“方正黑繁體”選項(xiàng)，在“字體大小”參數(shù)欄內(nèi)鍵入14，將“設(shè)置文本顏色”顯示窗內(nèi)的顏色設(shè)置為白色。在如圖6-24所示的位置鍵入http://www.yishuchayin.com。

28 單擊工具箱中的“橫排文字工具”按鈕，在屬性欄內(nèi)的“設(shè)置字體系列”下拉式選項(xiàng)欄中選擇BankGothic Md BT選項(xiàng)，在“字體大小”參數(shù)欄內(nèi)鍵入12，將“設(shè)置文本顏色”顯示窗內(nèi)的顏色設(shè)置為R、G、B值為251、249、211的黃色。在如圖6-25所示的位置鍵入REFRESHMENTS。

29 使用步驟28中設(shè)置字體的基本參數(shù)，在圖6-26所示的位置鍵入COZE。

30 單擊工具箱中的“橫排文字工具”按鈕，在屬性欄內(nèi)的“設(shè)置字體系列”下拉式選項(xiàng)欄中選擇Italic選項(xiàng)，在“字體大小”參數(shù)欄內(nèi)鍵入10，將“設(shè)置文本顏色”顯示窗內(nèi)的顏色設(shè)置為黑色。在如圖6-27所示的位置鍵入afternoon tea。

31 使用步驟30中設(shè)置字體的基本參數(shù)，分別在圖6-28所示的位置鍵入black tea和green tea。

32 現(xiàn)在制作茶藝網(wǎng)站布局模板就全部完成了，完成后的效果如圖6-29所示。如果讀者在制作過程中遇到了什么問題，可以打開本書附帶光盤中的“使用Photoshop CS3編輯網(wǎng)頁素材/實(shí)例6：制作茶藝網(wǎng)站布局模板/制作茶藝網(wǎng)站布局模板.psd”文件，該文件為本實(shí)例完成后的效果。