本實例網(wǎng)頁頁面的制作,是以文字作為畫面的主要構(gòu)圖元素,在整體上給人以比較理性的視覺印象。頁面中的主要文字從字體樣式和色彩都和頁面中其他元素加以明顯的區(qū)別,在頁面中顯得出眾而奪目。如圖8-32所示,為本實例的完成效果。
圖8-32 本實例完成效果技術(shù)提示 本實例主要是以文字作為畫面的主要構(gòu)成元素的。其實文字本身也是一種藝術(shù)形式,它在個性和情感方面對人們也有著很大影響,一般來說文字部分都是理性而平靜的。因此在編排文字的過程中,需要先構(gòu)思版面,然后再考慮主要文字、次要文字以及輔助文字等的表達方式。在制作過程中將頁面的中心位置的發(fā)光字體圖像定位為主要文字,頁面上部的圖像進行細節(jié)刻畫,使之不空洞。頁面最下部的文字進行弱化處理,從而使整幅畫面具有層次感。如圖8-33所示,為本實例的制作流程。
圖8-33 本實例制作流程制作步驟1.制作機械圖像 (1)啟動Photoshop,在菜單欄中執(zhí)行“文件”→“打開”命令,打開本書附帶光盤\Chapter-08\“粗糙顆粒背景.jpg”文件,如圖8-34所示。
圖8-34 打開背景素材 (2)單擊“圖層”調(diào)板底部的“創(chuàng)建新圖層”按鈕,新建“圖層 1”。設(shè)置前景色為深藍色(R17、G19、B31),按下<Alt+Delete>鍵,使用前景色填充“圖層 1”,然后將“圖層 1”的混合模式設(shè)置為“疊加”,如圖8-35所示。
圖8-35 填充顏色并設(shè)置圖層混合模式 (3)單擊“圖層”調(diào)板底部的“添加圖層蒙版”按鈕,為“圖層 1”添加圖層蒙版,選擇工具箱中的“畫筆”工具,參照圖8-36所示設(shè)置選項欄,在視圖中對蒙版進行編輯。 提示:對圖像的中間偏上部分進行遮罩,制作出圖像的受光效果,并能顯示出底層的紋理圖像。
圖8-36 編輯蒙版 (4)新建“圖層 2”,選擇工具箱中的“自定形狀”工具,在選項欄中選擇相應(yīng)的形狀圖形,然后配合<Shift>鍵,在視圖中繪制路徑。如圖8-37所示。
圖8-37 繪制路徑 (5)使用工具箱中的“路徑選擇”工具,在視圖中選擇繪制的路徑,按下<Ctrl+C>鍵,對路徑進行復(fù)制,按下<Ctrl+V>鍵,粘貼路徑。執(zhí)行“編輯”→“自由變換路徑”命令,對路徑的角度進行調(diào)整,按下<Enter>鍵完成變換路徑操作,如圖8-38所示。 圖8-38 調(diào)整復(fù)制路徑 (6)使用“路徑選擇”工具,將這兩個路徑同時選中,確定選項欄中的 提示:使用路徑選擇工具在頁面中選擇路徑。若要選擇多個路徑組件,請按住<Shift>鍵并點按每個其他路徑組件,將其添加到選區(qū)。在選項欄中可以對路徑指定設(shè)置。
圖8-39 組合路徑 (7)接下來再次使用工具箱中的“自定形狀”工具繪制路徑,然后使用“直接選擇”工具,對繪制的路徑進行調(diào)整,如圖8-40所示。 圖8-40 調(diào)整路徑 (8)將剛繪制的路徑復(fù)制三個,并分別對復(fù)制路徑的位置和角度進行調(diào)整,然后使用工具箱中的“橢圓”工具,在中心位置繪制一個正圓路徑,如圖8-41所示。 提示:在對路徑進行調(diào)整的時候要注意保持對稱性并且路徑之間相隔的寬度要比較均勻。
圖8-41 復(fù)制并繪制其他路徑 (9)使用“路徑選擇”工具,選擇繪制的所有路徑,然后確定選項欄中的“重疊形狀區(qū)域除外”按鈕處于激活狀態(tài),按下<Ctrl+Enter>鍵,將路徑轉(zhuǎn)換為選區(qū),使用灰藍色填充選區(qū)并取消選區(qū),如圖8-42所示。
圖8-42 轉(zhuǎn)換選區(qū)并填充顏色 (10)執(zhí)行“圖層”→“圖層樣式”→“投影”命令,打開“圖層樣式”對話框,參照圖8-43所示,對參數(shù)進行設(shè)置,為圖像添加圖層樣 圖8-43 為圖像添加圖層樣式 (11)對制作好的齒輪圖像進行復(fù)制,然后參照圖8-44所示調(diào)整復(fù)制圖像的大小、位置和角度。 提示:按下<Shift>鍵的同時拖動鼠標,可以將圖像等比縮小或放大。
圖8-44 復(fù)制并調(diào)整圖像 (12)在“圖層”調(diào)板中新建“圖層 3”,確定前景色為灰藍色(R83、G87、B104),使用“圓角矩形”工具,在視圖上側(cè)繪制圓角矩形圖像,如圖8-45所示。 圖8-45 繪制圖像 (13)參照圖8-46所示為剛繪制的長條圖像添加“投影”和“斜面和浮雕”效果。
圖8-46 設(shè)置圖層樣式 (14)創(chuàng)建“圖層 4”,在視圖中再繪制圓角矩形圖像,然后參照圖8-47、圖8-48所示為圓角矩形圖像添加圖層樣式效果。
圖8-47 設(shè)置“投影”和“內(nèi)陰影”樣式 圖8-48 設(shè)置浮雕樣式 (15)新建“圖層 圖8-49 繪制圖像 (16)在“圖層 4”的圖層名稱上右擊,在彈出的菜單中執(zhí)行“拷貝圖層樣式”命令,接著在“圖層 5”的圖層名稱上右擊,在彈出的菜單中執(zhí)行“粘貼圖層樣式”命令,然后再參照圖8-50所示,對“圖層 5”的“斜面和浮雕”圖層樣式進行修改。
圖8-50 修改圖層樣式 (17)對“圖層 5”進行復(fù)制,創(chuàng)建出“圖層 5 副本”,執(zhí)行“編輯”→“變換”→“水平翻轉(zhuǎn)”命令,然后將復(fù)制圖像調(diào)整到另一側(cè),如圖8-51所示。 技巧:選擇“移動”工具,按下<Alt>鍵的同時拖動鼠標可以將圖像進行復(fù)制。 圖8-51 復(fù)制圖像 (18)在“圖層”調(diào)板中,將“圖層 3”、“圖層 4” 圖8-52 合并圖層 (19)執(zhí)行“編輯”→“變換”→“垂直翻轉(zhuǎn)”命令,使用“移動”工具,參照圖8-53所示調(diào)整圖像的位置。
圖8-53 調(diào)整圖像 (20)對“圖層 3”進行復(fù)制,將創(chuàng)建的“圖層 3 副本”調(diào)整到“圖層”調(diào)板的頂端,接著再參照圖8-54所示,對圖像大小和位置進行調(diào)整。 圖8-54 復(fù)制圖像 (21)單擊“圖層”調(diào)板底部的“創(chuàng)建新組”按鈕,新建“組 1”圖層組,然后在該圖層組內(nèi)新建“圖層 6”,接著在視圖中繪制一個矩形圖像,并為圖像添加“斜面和浮雕”效果,如圖8-55所示。
圖8-55 繪制圖像并添加圖層樣式 (22)對“圖層 6”復(fù)制,創(chuàng)建“圖層 6 副本”,按下<Ctrl+T> 提示:向右移動的多少決定了在下邊操作中兩個圖像之間間隔的大小。
圖8-56 復(fù)制并調(diào)整圖像 (23)接下來連續(xù)按下<Ctrl+Shift+Alt+T>鍵,對該圖像進行變換復(fù)制操作,制作出如圖8-57所示的圖像效果。
圖8-57 復(fù)制圖像 (24)在“圖層”調(diào)板中選擇“組 1”圖層組,使該圖層組為當前可編輯狀態(tài),按下<Ctrl+E>鍵,執(zhí)行“合并組”命令,將該圖層組合并為一個圖層,如圖8-58所示。
圖8-58 合并圖層組 (25)使用“加深”工具,對合并后圖像的兩側(cè)進行處理,如圖8-59所示。 提示:為圖像的兩側(cè)進行加深處理,使圖像與背景的光線變化一致,虛實結(jié)合,效果更加逼真。
圖8-59 處理圖像 (26)通過復(fù)制并調(diào)整圖像的方法,在視圖中制作出其他圖像,如圖8-60所示。
圖8-60 制作其他圖像 (27)在“圖層”調(diào)板中,將“背景”圖層和“圖層 圖8-61 添加圖層樣式2.制作文字效果 (1)選擇工具箱中的“橫排文字”工具,在參照圖8-62所示在視圖中創(chuàng)建字母“LV”。
圖8-62 創(chuàng)建字母 (2)在“圖層”調(diào)板中,對創(chuàng)建的文字圖層進行復(fù)制,創(chuàng)建一個副本圖層,然后參照圖8-63所示,為副本文字添加外發(fā)光效果。 圖8-63 添加“外發(fā)光”效果 (3)新建一個圖層,將“l(fā)v 副本”圖層與新建的圖層同時選中,按下<Ctrl+E>鍵,將其合并,接著再使用“矩形選框”工具,繪制矩形選區(qū),將字母圖像選取,如圖8-64所示。
圖8-64 繪制選區(qū) (4)執(zhí)行“濾鏡”→“模糊”→“徑向模糊”命令,打開“徑向模糊”對話框,參照圖8-65所示設(shè)置對話框,為圖像添加徑向模糊效果。 提示:徑向模糊是模擬縮放或旋轉(zhuǎn)的相機所產(chǎn)生的一種柔化的模糊。選取“縮放”選項,使圖像沿徑向線模糊,好像是在放大或縮小圖像,然后指定 圖8-65 設(shè)置“徑向模糊”對話框 (5)多次按下<Ctrl+F>鍵,重復(fù)上次濾鏡操作,制作出文字的射光效果,然后再將選區(qū)取消,如圖8-66所示。
圖8-66 制作射光效果 (6)再次將“l(fā)v”文字圖層復(fù)制,并將副本圖層拖動到調(diào)板的最頂端,使用“橫排文字”工具,在字母右側(cè)再添加一點,如圖8-67所示。 圖8-67 復(fù)制并修改文字 (7)參照圖8-68所示為文字圖像添加圖層樣式效果。
圖8-68 設(shè)置圖層樣式 (7)添加過圖層樣式效果的文字圖像如圖8-69所示。
圖8-69 文字效果 (6),在視圖上側(cè)分別創(chuàng)建幾組文字,接著再將這幾組文字所在圖層合并為一個圖層,如圖8-70所示。 圖8-70 創(chuàng)建文字 (7)參照圖8-71~8-72所示設(shè)置“圖層樣式”對話框,對剛創(chuàng)建的文字圖像添加圖層樣式效果。 提示:結(jié)合齒輪圖像的效果來制作具有相似效果的文字,使文字與齒輪圖像更加協(xié) 圖8-71 設(shè)置“投影”和“漸變疊加”參數(shù)
圖8-72 設(shè)置“斜面和浮雕”效果 (8)在視圖底部添加其他相關(guān)的文字信息和裝飾圖像,如圖8-73所示。
圖8-73 創(chuàng)建其他文字和圖像 (9)確定“圖層”調(diào)板頂端的圖層為當前可編輯狀態(tài),然后單擊調(diào)板底部的“創(chuàng)建新的填充或調(diào)整圖層”按鈕,在彈出的菜單中執(zhí)行“色相/飽和度”命令,參照圖8-74所示設(shè)置對話框,對整個圖像的色調(diào)進行調(diào)整。
圖8-74 設(shè)置“色相/飽和度”對話框 (10)整個實例至此已經(jīng)制作完畢,效果如圖8-75所示。如果讀者在制作的過程中遇到什么問題,可打開本書附帶光盤\Chapter-08\“l(fā)v藝術(shù)中心網(wǎng)頁.psd”文檔進行查看。
圖8-75 實例最終完成效果
推薦閱讀-Photoshop分類教程
|
|
來自: 如穎隨行 > 《PS網(wǎng)頁元素》