《網(wǎng)店美工 第2版》 課件 6任務(wù)二 商品分類區(qū)設(shè)計與制作

項目六

任務(wù)二食品網(wǎng)店商品分類區(qū)設(shè)計與制作任務(wù)介紹本任務(wù)是為一家進(jìn)口零食商城設(shè)計制作網(wǎng)店商品分類區(qū)，讓買家可以在眾多商品中快速查找到自己需要的商品。在設(shè)計制作過程中需要充分考慮店鋪的整體裝修情況及產(chǎn)品的特點，通過利用合理的顏色搭配及構(gòu)圖技巧制作出具有吸引力的商品分類區(qū)域，要求在制作過程中熟練“文字”“形狀”“圖層樣式”等工具的使用。任務(wù)描述“食尚物語”是一家專營進(jìn)口零食的商城，為了迎接年中大促，商城首頁要進(jìn)行全新的裝修設(shè)計，現(xiàn)要求對商城商品分類區(qū)域針對活動的特點進(jìn)行設(shè)計及制作。要求:①配色符合零食店特點，突出活動氣息:②突出網(wǎng)店活動力度，并根據(jù)商品的屬性進(jìn)行分類，做出相應(yīng)的設(shè)計。“食尚物語”網(wǎng)店客戶需求信息項目客戶反饋消費(fèi)人群15-35歲青少年分類方式包含活動分類及產(chǎn)品屬性分類兩種分類方式版面設(shè)計突出活動信息及相應(yīng)活動分類模塊分類區(qū)域尺寸寬為750px，高度1000px文案簡短，突出活動及產(chǎn)品特點任務(wù)實施寶貝分類能讓用戶快速找到自己想要的商品，提高了用戶體驗度。在電商平臺上，一個好的寶貝分類不僅可以提高用戶購物的體驗，也可以有效提高轉(zhuǎn)化率和銷售額的。在商城中對于商品分類，可以按照網(wǎng)店的整體色調(diào)進(jìn)行設(shè)計，好的商品分類可以讓買家一目了然，常見的分類區(qū)如圖所示。任務(wù)實施第一步設(shè)計思路分析設(shè)計師針對客戶需求信息進(jìn)行設(shè)計思路分析:（1）商品分類區(qū)結(jié)合店鋪的經(jīng)營類目、商城活動信息及總體特色等幾個方面進(jìn)行設(shè)計，突出商城的活動信息，讓顧客可以快速的找到相應(yīng)的活動產(chǎn)品及對應(yīng)的類別的商品，激發(fā)顧客的購買欲望。（2）在風(fēng)格上要考慮零食為快消產(chǎn)品，要表現(xiàn)出明快的特點，并且考慮到促銷要求，整體配色上，可以選擇紅色、黃色系為主色，藍(lá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ū)，并進(jìn)行漸變填充，顏色為:#f9ebbb--#f3edd5；繼續(xù)新建圖層，繪制圓角矩形路徑，并在路徑上添加錨點，進(jìn)行形狀修改，并作漸變填充，顏色為:#ef2128--#e4020e新建文件及活動區(qū)域繪制任務(wù)實施（2）新建組，命名為“活動分區(qū)1”，新建圖層，繪制圓角矩形，并進(jìn)行漸變填充，顏色為:#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ù)新建圖層，繪制圓角矩形，并進(jìn)行漸變填充，顏色為:#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ū)，對圖層進(jìn)行修剪，制作不規(guī)則滑塊，并進(jìn)行漸變填充，顏色為:#f9ebbb--#f3edd5，設(shè)置圖層樣式為投影；繼續(xù)新建圖層，按住shift鍵，繪制正圓及箭頭圖像，輸入文本“向左滑動”，效果如圖所示。

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

最終效果圖舉一反三小雪新開了一家網(wǎng)店“口口香”，主營各種類型的零食?，F(xiàn)在小雪想為自己的網(wǎng)店制作商品分類區(qū)域，讓進(jìn)店的用戶能第一時間找到需求的商品。具體要求見表項目客戶反饋消費(fèi)人群15-35歲青少年分類方式采用活動分類或產(chǎn)品屬性分類等分類方式均可版面設(shè)計分類清晰明了，具有營銷導(dǎo)向分類區(qū)域尺寸寬為750px，高度不限文案簡短，突出活動或產(chǎn)品特