網(wǎng)頁美工設(shè)計 第6章

第6章網(wǎng)頁元素設(shè)計（下）情景模擬隨著電子商務(wù)的發(fā)展，網(wǎng)上店鋪越來越多，競爭壓力越來越大。為了從眾多店鋪中脫穎而出，除了需要提供優(yōu)質(zhì)的產(chǎn)品和服務(wù)外，還需要通過優(yōu)質(zhì)的網(wǎng)頁商品廣告和商品主圖等吸引消費者的點擊。因此，許多網(wǎng)店經(jīng)營者找到小張的創(chuàng)業(yè)團隊，希望他們幫助設(shè)計符合需要的網(wǎng)頁廣告和商品主圖等。掌握網(wǎng)頁Banner、懸浮廣告、彈窗廣告、通欄廣告和商品主圖的設(shè)計知識，能夠根據(jù)需要設(shè)計這些廣告。掌握網(wǎng)頁按鈕的設(shè)計知識，能夠根據(jù)需要設(shè)計網(wǎng)頁按鈕。學(xué)習(xí)目標(biāo)6.1網(wǎng)頁廣告設(shè)計網(wǎng)頁廣告設(shè)計是一種能充分激發(fā)設(shè)計師想象力和靈感的工作，一個好的網(wǎng)頁廣告不僅能夠有效傳遞信息，還能給予人們藝術(shù)上的享受。常見的網(wǎng)頁廣告可分為Banner、懸浮廣告、彈窗廣告和通欄廣告。6.1.1網(wǎng)頁廣告分類5

6

Banner也稱旗幟廣告、橫幅廣告，是最基本的網(wǎng)頁廣告形式之一，用于宣傳企業(yè)或產(chǎn)品，如圖6-1所示。Banner一般置于網(wǎng)站頁首，使用GIF或JPEG格式的圖像文件。Banner的尺寸和內(nèi)容可以根據(jù)網(wǎng)站的需要靈活設(shè)置，目的都是吸引瀏覽者的注意。在頁面同一版塊中展示多張Banner時，可通過代碼將Banner按順序輪播展示。1．Banner圖6-1輪播Banner圖6-2懸浮廣告7

懸浮廣告一般位于頁面主體內(nèi)容兩側(cè)，并會隨滾動條上下移動。懸浮廣告的覆蓋面廣，互動性強，受眾群體鮮明，廣告費用低，但廣告隨頁面移動會降低訪問者的瀏覽體驗。懸浮廣告的具體尺寸可根據(jù)實際頁面寬度而定。圖6-2所示網(wǎng)頁中位于頁面右側(cè)的就是懸浮廣告。2．懸浮廣告8

圖6-3彈窗廣告彈窗廣告是用戶打開網(wǎng)頁時以彈窗的形式出現(xiàn)在頁面中的廣告，如圖6-3所示。彈窗廣告具有很強的廣告效應(yīng)，但由于彈窗出現(xiàn)前沒有任何征兆，突然出現(xiàn)時會使瀏覽者產(chǎn)生反感。彈窗廣告的尺寸不固定，可以是小型彈窗，也可以是全屏彈窗。3．彈窗廣告9

4．通欄廣告通欄廣告與網(wǎng)頁等寬，但高度較低，呈長條狀，內(nèi)容多以文字和簡單的圖像為主。圖6-4中位于導(dǎo)航欄和Banner之間的就是通欄廣告，它起到傳遞信息、美化頁面等作用。圖6-4通欄廣告不同的構(gòu)圖形式可達(dá)到不同的視覺效果。在制作網(wǎng)頁廣告時應(yīng)根據(jù)產(chǎn)品、主題、素材等選擇合適的構(gòu)圖形式進行制作，使畫面中的各元素相互呼應(yīng)并達(dá)到平衡。6.1.2網(wǎng)頁廣告的構(gòu)圖形式10

以Banner廣告為例，常見的構(gòu)圖形式如圖6-5所示，下面分別說明。圖6-5網(wǎng)頁廣告的構(gòu)圖形式11

圖6-6圖文居中式構(gòu)圖12

1．圖文居中式圖文居中式是Banner廣告中最常用的構(gòu)圖方式之一，是指將Banner中的圖文以畫面的中軸線居中對稱進行組合，從而讓視覺焦點集中到畫面中間，使畫面平衡、穩(wěn)定，如圖6-6所示。圖6-7左右對稱式構(gòu)圖2．左右對稱式圖文左右對稱排列也能夠使畫面達(dá)到平衡，如圖6-7所示。14

圖6-8對角式構(gòu)圖3．對角式對角式構(gòu)圖是指將主體內(nèi)容傾斜放置，形成對角對稱。這樣的構(gòu)圖形式動感活潑又不失穩(wěn)定，具有很強的設(shè)計感，如圖6-8所示。15

圖6-9平鋪式構(gòu)圖4．平鋪式平鋪式構(gòu)圖適用于產(chǎn)品數(shù)量較多的廣告，是指將每個產(chǎn)品平鋪排列，并保持間距相等，再將文案置于產(chǎn)品上方或疊加在產(chǎn)品上。這種構(gòu)圖形式秩序感強，能給人整潔、規(guī)范的感覺，如圖6-9所示。輻射式構(gòu)圖是指利用素材運動趨勢將瀏覽者的視覺中心集中到一點。這樣的構(gòu)圖形式空間感、次序感強，能夠有效地突出產(chǎn)品或主題內(nèi)容，如圖6-10所示。圖6-10輻射式構(gòu)圖16

5．輻射式課堂互動欣賞圖6-11所示的網(wǎng)頁廣告，并簡要分析其廣告分類和構(gòu)圖形式。圖6-11網(wǎng)頁廣告網(wǎng)頁廣告設(shè)計的常見誤區(qū)包括主題混亂、字體風(fēng)格與廣告內(nèi)容背離、顏色搭配失衡、裝飾元素?zé)┈嵉取＞W(wǎng)頁美工在制作廣告前應(yīng)明確廣告主題，確定是打折減價、節(jié)日活動、產(chǎn)品推銷還是其他，再確定各信息間的層級關(guān)系。6.1.3網(wǎng)頁廣告設(shè)計誤區(qū)18

19

主題是廣告的核心價值所在，是廣告最應(yīng)突出的點。圖6-12（a）所示為銷售服裝網(wǎng)站的Banner，該Banner中沒有模特或衣服，只有抽象的文字和單調(diào)的色彩，并且文字層級模糊，無法起到宣傳效果。圖6-12（b）所示的Banner主題明確，色彩對比鮮明，文案層級清晰，圖文聯(lián)系緊密，具有很強的視覺沖擊力。1．主題混亂圖6-12主題混亂與主體清晰的Banner（a）（b）20

為了體現(xiàn)“可愛”的主題，圖6-13（a）所示的Banner背景運用了手繪元素，而標(biāo)題字體卻使用了力量感較強的黑體，這與背景圖像的風(fēng)格相悖，造成圖文搭配不協(xié)調(diào)，弱化了主題。圖6-13（b）所示同樣是“可愛”主題的Banner，圖像與文字的風(fēng)格統(tǒng)一，營造了清爽、活力、可愛的氣氛。2．字體風(fēng)格與廣告內(nèi)容背離圖6-13字體風(fēng)格與廣告內(nèi)容背離和契合的Banner（a）（b）21

色彩是廣告組成中的重要部分。優(yōu)秀的色彩搭配能夠吸引瀏覽者，而失衡的色彩搭配會嚴(yán)重影響廣告的美觀性。圖6-14（a）所示的Banner色彩搭配失衡，導(dǎo)致色彩明度相近，文案層級區(qū)分不明顯，不易于閱讀。圖6-14（b）所示的Banner能夠給人強烈的代入感，將床、背景和文案的色彩用色相、純度做區(qū)分，從而更好地體現(xiàn)了家具的品質(zhì)。3．顏色搭配失衡圖6-14顏色搭配失衡和協(xié)調(diào)的Banner（a）（b）22

廣告中的裝飾元素如果運用得當(dāng)，能夠烘托主題，豐富畫面。圖6-15（a）所示的Banner中裝飾元素過于煩瑣，不僅沒有起到應(yīng)有作用，還使畫面混亂。圖6-15（b）所示的Banner則將裝飾元素虛化，融入背景，起到了很好的輔助作用。4．裝飾元素?zé)┈崍D6-15裝飾元素?zé)┈嵑秃啙嵉腂anner（a）（b）小張的創(chuàng)業(yè)團隊接到了一個工業(yè)制造企業(yè)的Banner設(shè)計項目。在與該項目負(fù)責(zé)人溝通時，對方是這樣描述需求的：“我們是一家從事工業(yè)制造的企業(yè)，現(xiàn)需要制作一個宣傳企業(yè)文化的廣告，以此體現(xiàn)我公司的博大、生機。廣告最好視覺感受強烈，效果明顯，尺寸為1920×800像素?！?.1.4課堂案例——設(shè)計企業(yè)網(wǎng)站Banner23

視頻講解24

圖6-16企業(yè)網(wǎng)站Banner作品展示圖6-16所示為根據(jù)需求分析設(shè)計出的企業(yè)網(wǎng)站Banner。該Banner整體色調(diào)統(tǒng)一，主題明確；以深藍(lán)色的宇宙作為背景，以翱翔的飛機作為主體，通過宏大的場景表現(xiàn)企業(yè)博大的氣質(zhì)；以飛機后方的光芒體現(xiàn)生機、希望。設(shè)計思路①選擇主體物、背景素材。由于客戶是機械制造行業(yè)，因此選擇與之相關(guān)的飛機、宇宙素材。②光代表希望、夢想、生機等，通過飛機圖像后耀眼的光芒體現(xiàn)企業(yè)的實力。③通過左右結(jié)構(gòu)將文字置于畫面左側(cè)，使畫面達(dá)到平衡。26

在Photoshop中新建圖像文檔，設(shè)置文檔尺寸為1920×800像素，分辨率為72像素/英寸，顏色模式為RGB顏色，并命名為“企業(yè)網(wǎng)站Banner”。步驟1圖6-17填充漸變背景案例步驟在工具箱中選擇“漸變工具”，在工具屬性欄中將漸變樣式設(shè)為“徑向漸變”，單擊“點按可編輯漸變”打開“漸變編輯器”對話框，分別設(shè)置左右色標(biāo)的顏色為#163985和#141e3f，然后在圖像中拖動鼠標(biāo)填充漸變色，如圖6-17所示。步驟227

按【Ctrl+O】組合鍵打開本章案例一“星空.jpg”素材圖像，將其移至“企業(yè)網(wǎng)站Banner”文檔中的合適位置，并利用“圖層”面板調(diào)整混合模式為“線性減淡”，然后按【Ctrl+L】組合鍵打開“色階”對話框，將圖像亮度壓暗，如圖6-18所示。步驟3圖6-18導(dǎo)入“星空”圖像素材并調(diào)整圖像明暗28

更改星空圖像的圖層名稱為“星空”，然后單擊“圖層”面板下方的“添加圖層蒙版”按鈕，添加圖層蒙版；將前景色設(shè)為黑色，選擇工具箱中的“畫筆工具”，從工具屬性欄中設(shè)置畫筆大小為40，硬度為0，然后在過亮的星光處拖動鼠標(biāo)涂抹。在涂抹處將顯示下層的背景圖像，從而將過亮的星光覆蓋，如圖6-19所示。步驟4圖6-19處理“星空”圖像素材29

按【Ctrl+O】組合鍵打開本章案例一“地球.png”“白云.jpg”素材圖像，將“地球.jpg”圖像移至“企業(yè)網(wǎng)站Banner”文檔中，更改圖層名稱為“地球”；按【Ctrl+T】組合鍵執(zhí)行“自由變換”命令，按住【Shift】鍵拖動變換框四個角的控制點之一等比例縮小圖像，再分別拖動上方和左側(cè)中間的控制點垂直翻轉(zhuǎn)和水平翻轉(zhuǎn)圖像，接著將圖像移至合適位置，按【Enter】鍵確認(rèn)變形；更改圖層混合模式為“濾色”，如圖6-20所示。步驟5圖6-20導(dǎo)入并處理“地球”圖像素材30

將“白云.jpg”素材圖像移至“企業(yè)網(wǎng)站Banner”文檔中地球圖像上方，按【Ctrl+T】組合鍵執(zhí)行“自由變換”命令，調(diào)整大小并旋轉(zhuǎn)，然后移至合適位置，按【Enter】鍵確認(rèn)；更改圖層名稱為“白云”并添加圖層蒙版，然后參考步驟4的操作使用“畫筆工具”處理蒙版（可根據(jù)情況調(diào)整畫筆大小），使白云圖像變得稀疏，如圖6-21所示。步驟6圖6-21導(dǎo)入并處理“白云”素材圖像31

按【Ctrl+O】組合鍵打開本章案例一“光效.psd”圖像素材，如圖6-22（a）所示；使用“移動工具”將“01光效”圖像移動至“企業(yè)網(wǎng)站Banner”文檔中的合適位置，并將該圖層命名為“01”；按【Ctrl+T】組合鍵進入自由變換圖像狀態(tài)，再右擊圖像，執(zhí)行“變形”命令，接著通過拖動變形網(wǎng)格的控制點和控制柄調(diào)整光線弧度，使其貼合地球邊緣，如圖6-22（b）所示。最后按【Enter】鍵確認(rèn)變形。步驟7圖6-22打開“光效”素材并處理“01光效”圖像（a）（b）32

提示在為圖像或文字添加光效時，應(yīng)根據(jù)其形狀、走勢對光效的形狀進行處理，才能達(dá)到逼真的效果。圖6-22（b）所示就是貼合地球形狀處理光效的。33

按步驟7的操作方法，將“02光效”圖像移至“企業(yè)網(wǎng)站Banner”文檔中的合適位置并做變形處理，然后將該圖層命名為“02”，效果如圖6-23（a）所示；將“03光效”圖像移至“企業(yè)網(wǎng)站Banner”文檔中，使其光源與02光效的光源重合；分別為“02”“03”圖層添加圖層蒙版，并使用“畫筆工具”編輯蒙版，處理的光效中的雜色，效果如圖6-23（b）（c）所示。步驟8圖6-23處理“光效02”“光效03”圖像（a）（b）（c）34

按【Ctrl+O】組合鍵打開本章案例一“月球.png”素材圖像，使用“移動工具”將其移動至“企業(yè)網(wǎng)站Banner”文檔中的合適位置，然后選擇“02”圖層，按【Ctrl+J】組合鍵復(fù)制圖層，再按【Ctrl+T】組合鍵執(zhí)行“自由變換”命令，調(diào)整光線大小、位置和角度，使其貼合“月球”圖像的下邊緣，效果如圖6-24所示。步驟9圖6-24導(dǎo)入并處理“月球”素材35

按【Ctrl+O】組合鍵打開本章案例一“飛機.png”圖像素材，使用“移動工具”將其移動至“企業(yè)網(wǎng)站Banner”文檔中的合適位置，如圖6-25所示。步驟10圖6-25導(dǎo)入“飛機”素材36

使用“橫排文字工具”在飛機圖像的左側(cè)輸入主體文案（字體都為微軟雅黑，字號分別是135、34和20點，顏色為白色），并將各文字左對齊，然后在畫面右下角輸入敘述文字，使畫面達(dá)到平衡，效果如圖6-26所示。到此，就完成了企業(yè)網(wǎng)站Banner的設(shè)計。步驟11圖6-26添加文案某網(wǎng)店決定在七夕節(jié)推出特惠活動，網(wǎng)站運營人員請小張的創(chuàng)業(yè)團隊以“約惠吧”為主題，為他們制作電飯煲和熱水壺促銷廣告。6.1.5課堂案例——設(shè)計家電促銷Banner37

視頻講解38

圖6-27家電Banner作品展示根據(jù)需求分析設(shè)計出的家電Banner如圖6-27所示。該Banner為紫色調(diào)，以此呼應(yīng)七夕浪漫神秘的感覺。Banner文案層次分明，將文字與產(chǎn)品組合放置，并添加發(fā)光效果，能夠有效吸引瀏覽者的視線，達(dá)到很好的宣傳效果。設(shè)計思路①該Banner尺寸較寬，因此應(yīng)將商品圖與文字集中放置，使視覺中心集中到畫面中間；②Banner的背景選在舞臺，配合射燈、熒光等光效，突出促銷活動的熱烈；③選擇紫色作為廣告的色調(diào)，渲染七夕浪漫的氛圍。40

在Photoshop中新建圖像文檔，設(shè)置文檔尺寸為1920×730像素，分辨率為300像素/英寸，顏色模式為RGB顏色，并命名為“家電Banner”。步驟1圖6-28導(dǎo)入并復(fù)制“背景”圖像素材案例步驟按【Ctrl+O】組合鍵打開本章案例二“背景.jpg”圖像素材，使用“移動工具”將其移動至“家電Banner”文檔中合適位置，更改圖層名稱為“背景”，然后按【Ctrl+J】組合鍵復(fù)制圖層，如圖6-28所示。步驟241

執(zhí)行“濾鏡”>“模糊”>“高斯模糊”命令，在“高斯模糊”對話框中設(shè)置“半徑”為5.0，單擊“確定”按鈕，然后為“背景拷貝”圖層添加圖層蒙版，將前景色設(shè)為黑色，并使用“畫筆工具”涂抹舞臺部分，做出近實遠(yuǎn)虛的效果，如圖6-29所示。步驟3圖6-29處理“背景拷貝”圖層42

按【Ctrl+O】組合鍵打開本章案例二“店招.png”“水壺.png”“電飯煲.png”“榨汁機.png”“頂燈.png”“光束.png”圖像素材，使用“移動工具”將圖像移至“家電Banner”文檔中合適位置，并更改圖層名稱為素材原始名稱，如圖6-30所示（注意圖層排列順序）。步驟4圖6-30導(dǎo)入主體素材圖像43

選擇“背景拷貝”圖層，然后新建圖層，命名為“光效”，設(shè)置前景色為#c191c0，選擇“畫筆工具”，設(shè)置畫筆大小為1300，畫筆形狀為柔邊圓，不透明度為50，如圖6-31所示。步驟5圖6-31設(shè)置畫筆參數(shù)44

使用“畫筆工具”在主體物圖像上單擊3次，然后更改圖層混合模式為“顏色減淡”；為該圖層添加圖層蒙版，然后適當(dāng)調(diào)整畫筆大小，涂抹多余的光效部分，如圖6-32所示。步驟6圖6-32繪制并處理光效圖像45

選擇“電飯煲”圖層，單擊“調(diào)整”面板中的“自然飽和度”按鈕創(chuàng)建調(diào)整層，然后在“屬性”面板調(diào)整參數(shù)并將其剪貼在“電飯煲”圖層上；按住【Ctrl】鍵單擊“電飯煲”圖層縮略圖，制作電飯煲選區(qū)；新建圖層，將新圖層的混合模式設(shè)為“顏色減淡”，使用“畫筆工具”涂抹電飯煲圖像邊緣，制作環(huán)境色，如圖6-33所示。步驟7圖6-33繪制“電飯煲”圖像的環(huán)境光46

按【Ctrl+D】組合鍵取消選區(qū)，按【Ctrl+O】組合鍵打開本章案例二“高光.png”素材，使用“移動工具”將其移至電飯煲高光處；將其圖層混合模式更改為“濾色”，然后按住【Shift】鍵單擊“電飯煲”圖層，按【Ctrl+G】組合鍵編組，并更改組名為“電飯煲”，如圖6-34（a）（b）（c）所示。步驟8圖6-34導(dǎo)入“高光”素材圖像并制作“水壺”圖像的環(huán)境光（a）（b）（c）47

按步驟7、步驟8的操作方法處理“水壺”圖像，效果如圖6-34（d）所示。步驟9圖6-34導(dǎo)入“高光”素材圖像并制作“水壺”圖像的環(huán)境光（d）48

選擇“背景拷貝”圖層，使用“圓角矩形工具”繪制一個550×320像素，圓角為15的圓角矩形，設(shè)置形狀填充為#4e298b，描邊填充為#a660a3，效果如圖6-35所示。步驟10圖6-35繪制圓角矩形49

按【Ctrl+J】組合鍵復(fù)制“圓角矩形”圖層，使用“移動工具”將其向右上方稍微移動，然后為其添加“內(nèi)發(fā)光”和“圖案疊加”樣式，如圖6-36所示。步驟11圖6-36復(fù)制圓角矩形并添加圖層樣式50

使用“橫排文字工具”在圓角矩形圖像上輸入“約惠吧”文字，調(diào)整文字參數(shù)，然后為其添加“投影”樣式，投影顏色為#1f2772，如圖6-37所示。步驟12圖6-37輸入標(biāo)題并添加“投影”樣式51

使用“橫排文字工具”在“約惠吧”文字下方輸入“7.7特惠”文字，更改字體大小為55點，顏色為白色，再分別輸入“￥”和“1299”文字，更改文字顏色為#f5df4f，并適當(dāng)將“1299”文字加大，突出價格，然后對日期和價格部分添加“投影”樣式，如圖6-38所示。步驟13圖6-38添加價格和時間文字52

按住【Shift】鍵，使用“移動工具”分別單擊“1299”和“圓角矩形1”圖層，按【Ctrl+G】組合鍵編組，更改組名為“文案”，然后按【Ctrl+T】組合鍵執(zhí)行“自由變換”命令，按住【Ctrl+Shift】組合鍵向上拖動變換框左側(cè)的控制點調(diào)整“文案”圖像的角度，如圖6-39所示。步驟14圖6-39調(diào)整文案角度53

參考前面的操作方法制作主體圖像左側(cè)的文案，效果如圖6-40所示。步驟15圖6-40制作主體左側(cè)文案54

選擇“電飯煲”圖層，使用形狀工具分別制作紅色的圓角矩形、白色的圓形和黑色的三角形，然后將其對齊排列，再使用“橫排文字工具”輸入“立即購買”文字（可根據(jù)需要設(shè)置字體和字號），效果如圖6-41所示。步驟16圖6-41制作“立即購買”文案55

參考“步驟16”的方法制作主體圖像左側(cè)的文案，效果如圖6-42所示。步驟17圖6-42制作“送”文案56

選擇“頂燈”圖層，然后新建圖層，填充黑色，再添加圖層蒙版，使用“畫筆工具”在畫面中心涂抹，保留四角暗部，效果如圖6-43所示。步驟18圖6-43壓暗圖像邊緣57

在所有圖層上方依次創(chuàng)建“自然飽和度”“曲線”“照片濾鏡”“漸變映射”調(diào)整層，對畫面進行處理，如圖6-44所示。步驟19圖6-44調(diào)整畫面顏色58

按【Ctrl+Alt+Shift+E】組合鍵蓋印圖層，然后執(zhí)行“濾鏡”>“銳化”>“USM銳化”命令，在打開的“USM銳化”對話框中設(shè)置參數(shù)，單擊“確定”按鈕，如圖6-45所示。到此，就完成了家電促銷Banner的設(shè)計。步驟20圖6-45蓋印并銳化圖像無縫銜接的動態(tài)的圖像能夠有效地吸引眼球，提高廣告的轉(zhuǎn)化率。某家服裝銷售公司的策劃人員找到小張的創(chuàng)業(yè)團隊，請他們幫助制作一個體現(xiàn)男裝、女裝的動態(tài)廣告，廣告尺寸為500×500像素。6.1.6課堂案例——設(shè)計時尚服飾展示動態(tài)圖像59

視頻講解60

圖6-46動畫截圖展示作品展示根據(jù)需求分析設(shè)計的動態(tài)廣告如圖6-46所示。該廣告分為不動的文案部分和順時針旋轉(zhuǎn)的模特和文案部分，每個模特旋轉(zhuǎn)用時5秒，停留2秒，且動畫是無限循環(huán)的。設(shè)計思路①將展示圖像分為男性模特與女性模特；②展示的圖像格式相同，且連續(xù)不斷地變換，有節(jié)奏感和整體感。③主體文案保持不動，方便瀏覽者明確主題。62

在Photoshop中新建圖像文檔，設(shè)置尺寸為500×500像素，分辨率為72像素/英寸，顏色模式為RGB顏色，并命名為“時裝動畫”。步驟1圖6-47導(dǎo)入并調(diào)整素材位置案例步驟按【Ctrl+O】組合鍵打開本章案例三“主體.png”“文案.png”圖像素材，使用“移動工具”將素材移動至“時裝動畫”文檔中的合適位置，更改圖層名稱為素材原始名稱，再將“主體”圖像向下移動，使文檔窗口只顯示男模特部分，如圖6-47所示。步驟263

執(zhí)行“窗口”>“時間軸”命令，打開“時間軸”面板。單擊“時間軸”面板中的“創(chuàng)建時間軸”按鈕創(chuàng)建時間軸，然后在“時間軸”面板底部單擊“縮小時間軸”按鈕，將時間軸縮小；將鼠標(biāo)指針移至“文案”時間條右側(cè)邊緣處，按住鼠標(biāo)左鍵向右拖動，將該時間條延長至“12:00f”處，再縮短“主體”時間條至“01:00f”處，效果如圖6-48所示。步驟3圖6-48調(diào)整“文案”和“主體”時間條64

選擇“主體”圖層，按【Ctrl+J】組合鍵將其復(fù)制；按【Ctrl+T】組合鍵執(zhí)行“自由變換”命令，右擊畫面，執(zhí)行“旋轉(zhuǎn)180度”命令，按【Enter】鍵確定；在“時間軸”面板中將“主體拷貝”時間條拖至“06:00f～07:00f”之間，如圖6-49所示。步驟4圖6-49復(fù)制“主體”圖層并調(diào)整“主體拷貝”時間條65

選擇“主體”圖層，按【Ctrl+J】組合鍵將其復(fù)制，然后在“時間軸”面板中將“主體拷貝2”時間條拖至“01:00f～06:00f”之間，如圖6-50所示。步驟5圖6-50調(diào)整“主體拷貝2”時間條66

將“當(dāng)前時間指示器”移動至“01:00f”處，右擊“主體拷貝2”時間條，從彈出的面板中選擇“旋轉(zhuǎn)”選項，取消勾選“調(diào)整大小以填充畫布”復(fù)選框（見圖6-51），然后拖動“當(dāng)前時間指示器”至“06:00f”處。步驟6圖6-51設(shè)置動畫效果67

展開“主體拷貝2”的時間條，單擊“06:00f”處的關(guān)鍵幀，然后按【Ctrl+T】組合鍵執(zhí)行“自由變換”命令，將圖像旋轉(zhuǎn)至女模特圖像，按【Enter】鍵確定，如圖6-52所示。步驟7圖6-52調(diào)整“主體拷貝2”的關(guān)鍵幀68

從“圖層”面板中選擇“主體拷貝”圖層，按【Ctrl+J】組合鍵將其復(fù)制，然后調(diào)整“主體拷貝3”的時間條至“07:00f～12:00f”之間，然后按“步驟6”“步驟7”的操作，對“主體拷貝3”時間條進行旋轉(zhuǎn)處理，效果如圖6-53所示。步驟8圖6-53制作并調(diào)整“主體拷貝3”時間條69

按【空格】鍵檢查動畫是否能夠正常播放，然后執(zhí)行“文件”>“儲存為”命令，將文檔儲存為“GIF”格式，如圖6-54所示。步驟9圖6-54保存動態(tài)圖像文件舉一反三根據(jù)提供的素材（“動畫”文件夾），制作圖像切換動畫。具體要求如下：①保持中間人物位置不動。②將氣泡內(nèi)的頭像從左至右順序移動。6.2網(wǎng)店商品主圖設(shè)計商品主圖是購物類網(wǎng)站最常見的圖像，主要用于產(chǎn)品宣傳和店鋪裝扮。它通常利用價格、賣點和優(yōu)惠折扣等信息，激發(fā)消費者的購買欲。在設(shè)計時，主圖的尺寸應(yīng)符合網(wǎng)站的上傳要求，通常為460×460像素；若網(wǎng)店商品展示帶放大鏡功能，需要主圖尺寸在700×700像素以上，體積小于500KB，使用JPG或JPEG格式，如圖6-55所示。圖6-55商品主圖72

某辦公用品網(wǎng)店由于新進了一批高端一體碎紙機，需要更換商品主圖。網(wǎng)店運營人員找到小張，請他幫助設(shè)計，并提出了具體的要求：尺寸為800×800像素，要體現(xiàn)產(chǎn)品的高端、大氣，并且應(yīng)包含產(chǎn)品介紹、價格及促銷等信息，能激發(fā)消費者的購買欲望。該主圖的產(chǎn)品圖像由網(wǎng)店提供，其他必要的素材需要小張自己搜集。6.2.1課堂案例——設(shè)計碎紙機主圖73

視頻講解74

圖6-56碎紙機主圖作品展示根據(jù)需求分析設(shè)計的碎紙機主圖如圖6-56所示。由于該主圖文字內(nèi)容較多，因此采用文字包圍產(chǎn)品的構(gòu)圖形式。由于產(chǎn)品的顏色為黑與白，為了呼應(yīng)產(chǎn)品，將背景制作為黑白漸變色，體現(xiàn)出高端的感覺。此外，將標(biāo)題和價格等文字使用醒目的顏色與敘述性文字做區(qū)分，從而使讀者快速抓住關(guān)鍵信息。設(shè)計思路①利用大面積不同層次的深灰顏色作為主圖背景，呼應(yīng)產(chǎn)品的顏色，體現(xiàn)產(chǎn)品的高端；②由于文案較多，為了區(qū)分層級，標(biāo)題、價格和賣點都使用醒目的顏色進行突出。76

在Photoshop中新建圖像文檔，設(shè)置尺寸為800×800像素，分辨率為72像素/英寸，顏色模式為RGB顏色，并命名為“碎紙機主圖”。步驟1圖6-57制作背景（一）案例步驟將前景色設(shè)為黑色，背景色設(shè)為白色，按【Alt+Delete】組合鍵將“背景”圖層填充為黑色；新建圖層，命名為“點光”；選擇“畫筆工具”，利用工具屬性欄設(shè)置畫筆大小為1000，畫筆形狀為柔邊圓，流量為“50%”，按【X】鍵將前景色設(shè)置為白色，然后在畫面中部偏右單擊繪制光暈效果，如圖6-57所示。

步驟277

按【X】鍵將前景色設(shè)置為黑色，使用“矩形工具”繪制1000×1000像素的矩形；按【Ctrl+T】組合鍵執(zhí)行“自由變換”命令，旋轉(zhuǎn)并移動矩形至合適位置，效果如圖6-58所示。步驟3圖6-58制作背景（二）78

按【Ctrl+O】組合鍵打開本章案例四“碎紙機.png”素材，使用“移動工具”將其移動至“碎紙機主圖”文檔中合適位置，然后在“調(diào)整”面板中單擊“曲線”按鈕，再在“屬性”面板中設(shè)置調(diào)整層參數(shù)，如圖6-59所示。步驟4圖6-59導(dǎo)入并處理“碎紙機”素材79

使用“橫排文字工具”在文檔中單擊并輸入“一體碎紙機”文字，更改字體為華文行楷，字體大小為138點，然后為其添加“斜面和浮雕”和“漸變疊加”圖層樣式，疊加漸變的左右色標(biāo)顏色分別為#ffb400和#ffff00，如圖6-60所示。步驟5圖6-60輸入標(biāo)題文字并添加圖層樣式80

使用“橫排文字工具”在碎紙機左側(cè)輸入副標(biāo)題“原裝理光”文字，在“字符”面板中設(shè)置文字參數(shù)，再單獨選中“原裝”文字，將顏色更改為#e71f18，如圖6-61所示。步驟6圖6-61輸入并處理副標(biāo)題文字#e71f1881

使用“橫排文字工具”輸入商品描述文案，將文案字體統(tǒng)一設(shè)置為微軟雅黑，并按層級將字體大小分別設(shè)置為30、18、10和4點，然后使用“移動工具”將文案右對齊，效果如圖6-62所示。步驟7圖6-62輸入描述文案82

提示將次要文字縮小，集中排列，使文案形成一個灰色的面，與主體文字形成大小、顏色的對比，能夠加強畫面的節(jié)奏感。83

使用“橫排文字工具”輸入“促銷：”文案，調(diào)整字體大小為38點，再單擊輸入“280”，并更改字體為微軟雅黑，字體大小為100點，樣式為加粗；將“一體碎紙機”的圖層樣式復(fù)制到“280”圖層，然后使用“移動工具”將文案對齊，效果如圖6-63所示。步驟8圖6-63輸入并處理價格文案84

按【Ctrl+O】組合鍵打開本章案例四“光效.psd”素材，使用“移動工具”將素材移動至“一體碎紙機”中“體”和“紙”的文字上方，為標(biāo)題文字添加效果，如圖6-64所示。到此，便完成了碎紙機主圖的設(shè)計。步驟9圖6-64導(dǎo)入并處理“光效”素材一家銷售剃須刀的公司找到了小張，請他制作一張?zhí)觏毜吨鲌D。這家公司負(fù)責(zé)網(wǎng)店銷售的項目負(fù)責(zé)人說：“我們公司主要銷售剃須刀及相關(guān)產(chǎn)品，現(xiàn)在想做一個尺寸為800×800像素的商品主圖，我希望該主圖能夠第一時間吸引顧客的眼球，突出剃須刀特點，文案層次分明，我們會提供相關(guān)圖片和文案。”6.2.2課堂案例——設(shè)計剃須刀主圖85

視頻講解86

圖6-65剃須刀主圖作品展示根據(jù)需求分析設(shè)計的剃須刀主圖如圖6-65所示。該主圖畫面簡潔，文案與主體物色彩統(tǒng)一，并且通過對標(biāo)題文字的處理，凸顯了剃須刀的特點，作為產(chǎn)品主圖，十分吸引視線。設(shè)計思路①抓住剃須刀金屬質(zhì)感、干凈利落、性能強勁的產(chǎn)品屬性，將標(biāo)題文字外觀設(shè)計為硬角、金屬質(zhì)感，從而與產(chǎn)品呼應(yīng)；②模糊背景圖像，使背景與產(chǎn)品形成虛實對比，從而突出主體；③提取剃須刀素材中的漸變色作為副標(biāo)題的背景色，讓產(chǎn)品與文案相關(guān)聯(lián)，使廣告整體更具統(tǒng)一性。88

在Photoshop中新建圖像文檔，設(shè)置尺寸為800×800像素，分辨率為72像素/英寸，顏色模式RGB顏色，并命名為“剃須刀主圖”，然后為“背景”圖層填充#111115顏色。步驟1案例步驟89

按【Ctrl+O】組合鍵打開本章案例五“背景.jpg”“桌面.jpg”“剃須刀.png”圖像素材，使用“移動工具”分別將素材移動至“剃須刀主圖”文檔中合適位置，并將圖層名稱更改為素材原始名稱，然后調(diào)整“桌面”圖像的大小、位置并為其添加圖層蒙版，再設(shè)置前景色為黑色，使用“畫筆工具”涂抹桌面以外的區(qū)域（保留一些火星圖案），如圖6-66所示。步驟2圖6-66導(dǎo)入并處理主體素材90

選擇“橫排文字工具”，設(shè)置文字參數(shù)并單擊畫面輸入“強”字；按【Ctrl+O】組合鍵打開本章案例五“金屬材質(zhì).jpg”圖像素材，使用“移動工具”將素材移動至“剃須刀主圖”文檔中合適位置，遮擋“強”文本，并更改圖層名稱為“金屬素材”，然后執(zhí)行“圖層”>“創(chuàng)建剪貼蒙版”命令，使用該圖層對“強”圖層創(chuàng)建剪貼蒙版，制作金屬效果文字，如圖6-67所示。步驟3圖6-67輸入并處理“強”字91

單擊“調(diào)整”面板中的“色階”按鈕，創(chuàng)建“色階”調(diào)整圖層并剪貼在“強”圖層上方，然后調(diào)整色階參數(shù)，使金屬質(zhì)感更加突出，如圖6-68（a）和（b）所示。步驟4圖6-68輸入并處理主體文案（a）（b）92

按“步驟3”“步驟4”的操作方法分別制作“勁”“動”“力”文字，效果如圖6-68（c）所示。步驟5圖6-68輸入并處理主體文案（c）93

分別為“強”“勁”“動”“力”圖層添加“投影”樣式，然后按【Ctrl+O】組合鍵打開本章案例五“光效.png”圖像素材，并使用“移動工具”將其移動至“勁”字筆畫轉(zhuǎn)折處，如圖6-69所示。步驟6圖6-69為主體文案添加“投影”樣式和光效94

使用“圓角矩形工具”繪制一個500×175像素，圓角為80像素的圓角矩形，為其添加“漸變疊加”樣式，疊加顏色分別為#b5d22b和#f0ea39，如圖6-70所示。步驟7圖6-70繪制圓角矩形并添加“漸變疊加”樣式95

選擇“橫排文字工具”，根據(jù)文案的層級設(shè)置文字參數(shù)（中文文字都使用微軟雅黑字體，價格文字使用Impact字體），輸入文案，然后將“圓角矩形1”圖層的圖層樣式復(fù)制到商品價格文字圖層中，最終效果如圖6-71所示。到此，便完成了剃須刀主圖的設(shè)計。步驟8圖6-71輸入副標(biāo)題文案6.3網(wǎng)頁按鈕設(shè)計按鈕是網(wǎng)頁構(gòu)成中不容忽視的元素，面積雖小，卻是網(wǎng)站細(xì)節(jié)的體現(xiàn)。設(shè)計優(yōu)秀的網(wǎng)頁按鈕不僅可以引導(dǎo)瀏覽者，還可以提高用戶的瀏覽體驗，提升網(wǎng)站轉(zhuǎn)化率。在設(shè)計頁面中的按鈕時，應(yīng)遵循以下3個原則。6.3.1按鈕設(shè)計原則97

98

按鈕的顏色應(yīng)區(qū)別于周圍環(huán)境色，且明度和對比度較高。此外，在設(shè)計較為重要的按鈕時，可適當(dāng)添加鼠標(biāo)經(jīng)過、點擊和按下的效果，從而為訪問者帶來更佳的瀏覽體驗，起到畫龍點睛的作用，如圖6-72所示。1．引人注意圖6-72引人注意的按鈕99

2．準(zhǔn)確反映功能按鈕文字需要言簡意賅、直接明了，如注冊、下載、創(chuàng)建、免費試玩等，如圖6-73所示。圖6-73準(zhǔn)確反映功能的按鈕網(wǎng)站的風(fēng)格應(yīng)貫穿網(wǎng)頁的每個環(huán)節(jié)。在設(shè)計按鈕時，應(yīng)盡可能地結(jié)合網(wǎng)站風(fēng)格。以游戲網(wǎng)頁中的按鈕為例，此類按鈕應(yīng)更注重質(zhì)感，將金屬、巖石、玻璃、木頭等素材附在按鈕上，以此來傳達(dá)游戲的性質(zhì)。圖6-74所示為使用懸掛的木牌作為游戲頁面的按鈕，使按鈕融入畫面且符合網(wǎng)頁風(fēng)格。圖6-74符合頁面風(fēng)格的按鈕100

3．符合頁面風(fēng)格小張為一家制作五金工具的公司制作網(wǎng)頁時，客戶要求網(wǎng)頁風(fēng)格應(yīng)符合公司的行業(yè)屬性，頁面主色為藍(lán)色，版塊、按鈕都要體現(xiàn)金屬質(zhì)感。6.3.2課堂案例——設(shè)計圓形按鈕101

視頻講解102

圖6-75圓形按鈕作品展示根據(jù)客戶需求，小張制作了如圖6-75所示的按鈕。該按鈕金屬質(zhì)感強烈，層次豐富，文字內(nèi)容清晰，能吸引瀏覽者目光。設(shè)計思路①圓形相對棱角鮮明的形狀更能提升網(wǎng)頁對瀏覽者的親和力；②按鈕立體感強，可產(chǎn)生凸起于頁面的效果，更易吸引瀏覽者注意力；③橙色與頁面主色（藍(lán)色）為對比色，能使按鈕更加突出。104

在Photoshop中新建圖像文檔，設(shè)置尺寸為600×600像素，分辨率為72像素/英寸，顏色模式為RGB顏色，并命名為“圓形按鈕”。步驟1案例步驟105

新建圖層，命名為“底色”，按住【Shift】鍵，使用“橢圓選框工具”繪制一個300×300像素的正圓選區(qū)，再選擇“漸變工具”，在工具屬性欄中設(shè)置漸變類型為“線性漸變”，然后單擊工具屬性欄中的“點按可編輯漸變”，打開“漸變編輯器”對話框，參考圖6-76所示設(shè)置漸變色，再在圖像中拖動鼠標(biāo)填充選區(qū)。步驟2圖6-76制作按鈕底色#535b5e#ffffff#ffffff#4a5154#535b5e106

新建圖層，命名為“灰”，設(shè)置前景色為#cbcac9，按【Alt+Delete】鍵填充選區(qū)；按【Ctrl+T】組合鍵進入圖像的自由變換狀態(tài)，然后按住【Shift+Alt】鍵拖動變換框的角點控制點將灰色正圓等比例適當(dāng)縮小，如圖6-77（a）所示，按【Enter】鍵確認(rèn)變換，效果如圖6-77（b）所示。再新建一個圖層，命名為“橙”，為選區(qū)填充#a82f24顏色，然后參考以上操作適當(dāng)縮小橙色正圓，效果如圖6-77（c）所示。步驟3圖6-77制作按鈕外框（a）（b）（c）107

繼續(xù)新建圖層，命名為“黑”，將選區(qū)填充為黑色，在“圖層”面板中將“黑”圖層移動至“橙”圖層下方，按【Ctrl+D】組合鍵取消選區(qū)；保持“黑”圖層的選中狀態(tài)，選擇“移動工具”，按幾次【↑】方向鍵，制作按鈕外框的陰影效果，如圖6-78所示。步驟4圖6-78制作按鈕外框陰影108

在圖層面板中選中“橙”圖層，然后新建圖層，命名為“光01”；選擇“畫筆工具”，設(shè)置前景色為#e49220，畫筆大小為200，畫筆形狀為柔邊圓，流量為60%，在橙色正圓中心單擊4次，繪制橙色光效；新建圖層，命名為“光02”，設(shè)置前景色為白色，在按鈕中心偏下單擊2次，制作白色光效，如圖6-79所示。步驟5圖6-79制作按鈕主體部分109

新建圖層，命名為“光03”，使用“橢圓選框工具”在按鈕中繪制一個約180×120像素的選區(qū)，填充白色；為該圖層添加圖層蒙版，然后選擇“漸變工具”，設(shè)置漸變類型為“線性漸變”，漸變色為黑白過渡，然后在圖像中向上拖動鼠標(biāo)，為圖層蒙版填充黑白漸變（可多嘗試幾次，直到橢圓呈通透的效果），如圖6-80所示。步驟6圖6-80制作按鈕高光部分110

新建圖層，命名為“光04”，按住【Ctrl】鍵單擊“橙”圖層縮略圖，制作橙色正圓的選區(qū)，然后選擇“橢圓選框工具”，按住【Alt】鍵拖動鼠標(biāo)修剪選區(qū)，如圖6-81（a）（b）所示，再選擇“漸變工具”，為選區(qū)填充橙、黃、白3色線性漸變，效果如圖6-81（c）所示。步驟7圖6-81制作按鈕反光部分（一）（a）（b）（c）111

新建圖層，命名為“光05”，選擇工具箱中的“鋼筆工具”，在圖6-82（a）所示位置繪制光效路徑，然后按【Ctrl+Enter】組合鍵將路徑轉(zhuǎn)化為選區(qū)，如圖6-82（b）所示，再為選區(qū)填充充橙、黃、白3色線性漸變，如圖6-82（c）所示。步驟8圖6-82制作按鈕反光部分（二）（a）（b）（c）112

選擇“橫排文字工具”，設(shè)置字符參數(shù)，然后輸入“立即購買”文字，調(diào)整文字位置，再為文字圖層添加“投影”樣式，如圖6-83所示。到此，便完成了圓形按鈕的設(shè)計。步驟9圖6-83制作文字部分小張在為一家網(wǎng)游公司制作游戲宣傳廣告頁時，由于游戲題材取自三國時代，因此網(wǎng)頁中使用的素材都帶有濃烈的古風(fēng)氣息，大到背景，小到按鈕，小張都采用古風(fēng)素材進行設(shè)計和制作。6.3.3課堂案例——設(shè)計矩形按鈕113

視頻講解114

圖6-84矩形按鈕作品展示圖6-84是小張設(shè)計的用于進入該游戲官網(wǎng)的按鈕。該按鈕顏色鮮明，十分搶眼，配合古風(fēng)素材使按鈕十分貼合游戲題材