《網(wǎng)店美工+第2版》 課件 黃振寧 項目6 Banner廣告及商品分類區(qū)設(shè)計與制作

項目六任務(wù)1

服裝網(wǎng)店Banner廣告設(shè)計與制作任務(wù)1制作服裝網(wǎng)店Banner廣告和側(cè)欄廣告【任務(wù)介紹】本任務(wù)是為新款服裝制作Banner廣告，在制作過程中主要用到大量的形狀繪制工具和顏色填充的方法，使用圖層樣式豐富畫面、增添細(xì)節(jié)。【任務(wù)描述】某服裝網(wǎng)店在換季階段將發(fā)售新款連衣裙，為了配合新品的上市，現(xiàn)需制作網(wǎng)店Banner廣告以擴大宣傳和推廣。設(shè)計師與客戶溝通后得到以下需求信息，見下表。信息客戶反饋消費人群25-35歲女青年服裝風(fēng)格柔和、優(yōu)雅、浪漫關(guān)鍵信息新品、特價、6折起廣告版面突出產(chǎn)品和關(guān)鍵信息Banner廣告尺寸寬為1920像素，高為600像素廣告文案簡短，有季節(jié)特點，能引起共鳴廣告是一種很古老的宣傳和推廣手段。Banner廣告是網(wǎng)店最為突出的宣傳和展示載體【任務(wù)實施】

Banner廣告

第1步：設(shè)計思路分析。設(shè)計師針對客戶反饋信息表進行設(shè)計思路分析：1.廣告版面突出新品，因此背景比較簡單，廣告語字號大，對比較強，產(chǎn)品圖采用不同角度大小相結(jié)合加強效果。2.根據(jù)消費人群以及產(chǎn)品的風(fēng)格特點，在背景配色上選用優(yōu)雅、浪漫的搭配，選擇紫色為背景主色，從中心到四周成淺深漸變過渡，既統(tǒng)一又不失變化。3.在單一的背景上添加少許的裝飾圖案，以蝴蝶、葉子圖形為輔助，起到協(xié)調(diào)和裝飾畫面效果；熱氣球的裝飾靈感主要來源于服裝本身的圖案特點。4.在廣告口號上，根據(jù)簡短、應(yīng)節(jié)的要求，最終選用“秋裝新品引領(lǐng)潮流”，這樣能引起消費者對潮流的憧憬，從而激發(fā)其購買欲望。5.新品、特價、打折是消費的關(guān)注點，因此在廣告中應(yīng)加入這些文案。第2步：Banner廣告操作實施。1.新建文檔。2.填充背景。

3.繪制拼貼圖形。（1）選擇自定形狀工具，在屬性欄上選中“拼貼4”，如圖（2）在畫面左側(cè)上，按住鍵盤上的<shift>鍵繪制“拼貼4”形狀，效果如圖（3）設(shè)置形狀的填充屬性，漸變色為白色到白色，其它設(shè)置如圖

（4）設(shè)置內(nèi)陰影，如圖（5）復(fù)制形狀，垂直翻轉(zhuǎn)到右側(cè)，如圖4.繪制其他圖案。（1）選中“三葉草”，在畫面右下角繪制，如圖

（2）設(shè)置形狀的填充方式為漸變。如圖（3）使用同樣方法，繪制另一個“三葉草”圖案，如圖（5）使用同樣的方法，繪制并設(shè)置“蝴蝶”形狀的填充，如圖（6）將素材“熱氣球”拖到畫面中，如圖5.導(dǎo)入人物素材。（1）打開“模特1”素材，并摳圖，如圖。

（2）選中模特圖層，設(shè)置投影如圖（3）使用同樣方法，將“模特2”摳出放到廣告畫面中，如圖6.輸入廣告語。Banner廣告最終效果如圖【舉一反三】運用前面所學(xué)的知識，制作某網(wǎng)店的Banner廣告和側(cè)欄廣告，如圖項目六

任務(wù)二食品網(wǎng)店商品分類區(qū)設(shè)計與制作任務(wù)介紹本任務(wù)是為一家進口零食商城設(shè)計制作網(wǎng)店商品分類區(qū)，讓買家可以在眾多商品中快速查找到自己需要的商品。在設(shè)計制作過程中需要充分考慮店鋪的整體裝修情況及產(chǎn)品的特點，通過利用合理的顏色搭配及構(gòu)圖技巧制作出具有吸引力的商品分類區(qū)域，要求在制作過程中熟練“文字”“形狀”“圖層樣式”等工具的使用。任務(wù)描述“食尚物語”是一家專營進口零食的商城，為了迎接年中大促，商城首頁要進行全新的裝修設(shè)計，現(xiàn)要求對商城商品分類區(qū)域針對活動的特點進行設(shè)計及制作。要求:①配色符合零食店特點，突出活動氣息:②突出網(wǎng)店活動力度，并根據(jù)商品的屬性進行分類，做出相應(yīng)的設(shè)計?！笆成形镎Z”網(wǎng)店客戶需求信息項目客戶反饋消費人群15-35歲青少年分類方式包含活動分類及產(chǎn)品屬性分類兩種分類方式版面設(shè)計突出活動信息及相應(yīng)活動分類模塊分類區(qū)域尺寸寬為750px，高度1000px文案簡短，突出活動及產(chǎn)品特點任務(wù)實施寶貝分類能讓用戶快速找到自己想要的商品，提高了用戶體驗度。在電商平臺上，一個好的寶貝分類不僅可以提高用戶購物的體驗，也可以有效提高轉(zhuǎn)化率和銷售額的。在商城中對于商品分類，可以按照網(wǎng)店的整體色調(diào)進行設(shè)計，好的商品分類可以讓買家一目了然，常見的分類區(qū)如圖所示。任務(wù)實施第一步設(shè)計思路分析設(shè)計師針對客戶需求信息進行設(shè)計思路分析:（1）商品分類區(qū)結(jié)合店鋪的經(jīng)營類目、商城活動信息及總體特色等幾個方面進行設(shè)計，突出商城的活動信息，讓顧客可以快速的找到相應(yīng)的活動產(chǎn)品及對應(yīng)的類別的商品，激發(fā)顧客的購買欲望。（2）在風(fēng)格上要考慮零食為快消產(chǎn)品，要表現(xiàn)出明快的特點，并且考慮到促銷要求，整體配色上，可以選擇紅色、黃色系為主色，藍色為點睛色，整體配色顯眼突出。（3）突出商城活動產(chǎn)品的分類區(qū)域，提升營銷導(dǎo)向性，提升商城的活動營銷效果。（4）采用圓角矩形等形狀簡潔柔和的圖形元素，提升整體版面的協(xié)調(diào)性。（5）整體文案設(shè)計簡短，突出活動、品牌、商品屬性等核心信息。任務(wù)實施第二步操作實施1.活動商品分類區(qū)設(shè)計（1）啟動PhotoshopCC2018，新建一個750px*760px的空白文檔，名稱為“食品類商品分類區(qū)”，背景填充白色，調(diào)出標(biāo)尺并新建參考線做好區(qū)域布局劃分；使用工具箱中的“圓角矩形”工具，設(shè)置圓角半徑為20像素，繪制一個圓角矩形選區(qū)，并進行漸變填充，顏色為:#f9ebbb--#f3edd5；繼續(xù)新建圖層，繪制圓角矩形路徑，并在路徑上添加錨點，進行形狀修改，并作漸變填充，顏色為:#ef2128--#e4020e新建文件及活動區(qū)域繪制任務(wù)實施（2）新建組，命名為“活動分區(qū)1”，新建圖層，繪制圓角矩形，并進行漸變填充，顏色為:#f9ebbb--#f3edd5，輸入文案，設(shè)置字體為微軟雅黑，顏色為#e10216，#bc635b，新建圖層繪制圓角矩形填充白色，設(shè)置投影如圖所示，繼續(xù)繪制圓角矩形填充#0544c4，輸入文案“搶鮮”，并插入素材，效果如圖所示。

投影設(shè)置活動分區(qū)效果任務(wù)實施（3）重復(fù)步驟2，復(fù)制組“活動分區(qū)1”，重命名為“活動分區(qū)2”、“活動分區(qū)3”、“活動分區(qū)4”，并修改文案，及替換圖片素材，完成活動分類區(qū)域設(shè)計，效果如圖所示。

活動分類區(qū)域設(shè)計任務(wù)實施2.商品類別分類區(qū)（1）新建圖層，設(shè)置圓角半徑為20像素，繪制圓角矩形，并填充顏色為:#e4020e，效果如圖所示。

商品類別分區(qū)任務(wù)實施2.商品類別分類區(qū)（2）新建組，命名為“商品分區(qū)1”，新建圖層，按住shift鍵，繪制正圓角矩形，并填充顏色為:#e4020e，設(shè)置圖層樣式為描邊，填充類型為漸變，如圖6-32所示，繼續(xù)新建圖層，繪制圓角矩形，并進行漸變填充，顏色為:#f9ebbb--#f3edd5，并作同上圖層描邊設(shè)置，輸入文案“解膩果干”，并插入素材，效果如圖所示。

圖層描邊設(shè)置商品分區(qū)1設(shè)計任務(wù)實施（3）重復(fù)步驟2，復(fù)制組“商品分區(qū)1”，重命名為“商品分區(qū)2”、“商品分區(qū)3”、“商品分區(qū)4”，并修改文案，及替換圖片素材，完成商品分類區(qū)域設(shè)計，效果如圖所示。

商品分類區(qū)域設(shè)計任務(wù)實施（4）新建圖層，繪制圓角矩形，并復(fù)制選區(qū)，對圖層進行修剪，制作不規(guī)則滑塊，并進行漸變填充，顏色為:#f9ebbb--#f3edd5，設(shè)置圖層樣式為投影；繼續(xù)新建圖層，按住shift鍵，繪制正圓及箭頭圖像，輸入文本“向左滑動”，效果如圖所示。

商品分類區(qū)域滑塊設(shè)計任務(wù)實施（5）新建圖層，輸入文本“限時禮遇”，并運用加深、減淡工具對整體效果進行修飾調(diào)整，效果最終效果如圖所示。

最終效果圖舉一反三小雪新開了一家網(wǎng)店“口口香”，主營各種類型的零食?，F(xiàn)在小雪想為自己的網(wǎng)店制作商品分類區(qū)域，讓進店的用戶能第一時間找到需求的商品。具體要求見表項目客戶反饋消費人群15-35歲青少年分類方式采用活動分類或產(chǎn)品屬性分