項目9、10 裝修店鋪、綜合案例 生鮮店鋪設(shè)計與制作

網(wǎng)店美工：理論、案例與實訓(xùn)（全彩微課版）高等院校電子商務(wù)類新形態(tài)系列教材項目九裝修店鋪目錄Contents任務(wù)一

圖片切片與上傳任務(wù)二

裝修PC端店鋪首頁任務(wù)三

裝修移動端店鋪首頁任務(wù)四

上傳商品詳情頁任務(wù)一圖片切片與上傳網(wǎng)店美工在進(jìn)行切片操作時，為了保證切片合理、位置精確，需要掌握一定的技巧。?一、圖片切片的技巧（1）依靠參考線。通過拖動標(biāo)尺為圖片創(chuàng)建切片的參考線，網(wǎng)店美工在切片時，基于參考線創(chuàng)建的切片區(qū)域比直接手繪的切片區(qū)域更精確。（2）切片完整性。網(wǎng)店美工在切片時應(yīng)盡量保證同一個內(nèi)容的完整性，以免因操作或網(wǎng)速問題造成圖片不能完整地被呈現(xiàn)出來。（3）切片存儲的格式。網(wǎng)店美工在存儲切片時，可單獨(dú)為各個切片設(shè)置存儲格式，一般情況下，色彩豐富、尺寸較大的切片，選用JPEG格式（也叫JPG格式）存儲；尺寸較小、色彩單一和背景透明的切片，選用GIF或PNG-8格式存儲；半透明、不規(guī)則以及圓角的切片，選用PNG-24格式存儲。任務(wù)一圖片切片與上傳“簡吉”家紡店鋪決定裝修首頁，在裝修前需要先對首頁進(jìn)行切片操作，并上傳到圖片空間，方便后期進(jìn)行裝修，其具體操作步驟如下。二、【課堂案例】——家紡店鋪首頁切片與上傳213任務(wù)一圖片切片與上傳二、【課堂案例】——家紡店鋪首頁切片與上傳546任務(wù)一圖片切片與上傳操作思路先對整個活動頁添加參考線，添加的參考線要按照各個模塊進(jìn)行添加，方便后期裝修，然后依照參考線進(jìn)行切片并保存切片內(nèi)容，最后將切片一并上傳到圖片空間。操作提示按照中秋活動頁的頁面內(nèi)容進(jìn)行切片操作；保存切片內(nèi)容；將切片內(nèi)容上傳到圖片空間。課堂練習(xí)：中秋活動頁切片與上傳目錄Contents任務(wù)一

圖片切片與上傳任務(wù)二

裝修PC端店鋪首頁任務(wù)三

裝修移動端店鋪首頁任務(wù)四

上傳商品詳情頁任務(wù)二裝修PC端店鋪首頁模塊是網(wǎng)店頁面的基礎(chǔ)組成部分，商品、頁面的裝修等都依托模塊而存在，網(wǎng)店美工可通過模塊裝修首頁。右圖所示為“所有”欄下的基礎(chǔ)模塊，其中常用的模塊有以下5種。一、認(rèn)識裝修基礎(chǔ)模塊（1）寶貝推薦。（2）寶貝排行。（3）圖片輪播。（4）友情鏈接。（5）寶貝搜索。（6）自定義區(qū)。任務(wù)二裝修PC端店鋪首頁“簡吉”家紡店鋪的首頁設(shè)計在完成切片并上傳到圖片空間的操作后，即可使用模塊進(jìn)行首頁各個部分的裝修，在裝修過程中可使用“自定義區(qū)”模塊布局各部分，并通過“碼工助手”轉(zhuǎn)換源代碼，具體操作步驟如下。二、【課堂案例】——使用模塊裝修店鋪首頁213任務(wù)二裝修PC端店鋪首頁二、【課堂案例】——使用模塊裝修店鋪首頁5467任務(wù)二裝修PC端店鋪首頁二、【課堂案例】——使用模塊裝修店鋪首頁981011任務(wù)二裝修PC端店鋪首頁二、【課堂案例】——使用模塊裝修店鋪首頁13812任務(wù)二裝修PC端店鋪首頁操作思路裝修中秋活動頁時可先對海報和優(yōu)惠信息部分使用“熱區(qū)+代碼”的方式進(jìn)行裝修，然后再裝修其他部分內(nèi)容。操作提示選擇并添加要裝修的模塊；復(fù)制圖片鏈接；在碼工助手中對熱區(qū)添加鏈接，并轉(zhuǎn)換為代碼；使用代碼裝修活動頁。課堂練習(xí)：裝修中秋活動頁目錄Contents任務(wù)一圖片切片與上傳任務(wù)二裝修PC端店鋪首頁任務(wù)三裝修移動端店鋪首頁任務(wù)四上傳商品詳情頁任務(wù)三裝修移動端店鋪首頁一、認(rèn)識移動端店鋪首頁模塊移動端店鋪首頁與PC端店鋪首頁一樣，各電商平臺也為移動端店鋪首頁裝修提供了模塊，當(dāng)下主流的移動端是手機(jī)端，這里以淘寶網(wǎng)手機(jī)端為例來介紹移動端店鋪首頁裝修的模塊。右圖所示就是移動端店鋪首頁頁面的模塊以及裝修后的頁面，常用的模塊包括以下5種。（1）文字標(biāo)題。（2）輪播圖海報。（3）單圖海報。（4）多熱區(qū)切圖。（5）店鋪優(yōu)惠券。任務(wù)三裝修移動端店鋪首頁“萍潔”店鋪準(zhǔn)備將制作的移動端首頁裝修到移動端店鋪中，在裝修前可先將商品圖片上傳到圖片空間中，然后進(jìn)行裝修頁面操作，具體操作步驟如下。二、【課堂案例】——使用模塊裝修移動端首頁213任務(wù)三裝修移動端店鋪首頁二、【課堂案例】——使用模塊裝修移動端首頁546任務(wù)三裝修移動端店鋪首頁二、【課堂案例】——使用模塊裝修移動端首頁879任務(wù)三裝修移動端店鋪首頁操作思路網(wǎng)店美工在裝修移動端家具網(wǎng)店首頁時，可添加“多熱區(qū)切圖”模塊編輯首頁內(nèi)容，并分別對各個部分添加熱點區(qū)域。操作提示添加單圖海報模塊并添加對應(yīng)的商品圖片和鏈接；添加“多熱區(qū)切圖”模塊并添加素材和熱區(qū)，完成家居網(wǎng)站首頁的裝修。課堂練習(xí)：裝修移動端家具網(wǎng)店首頁目錄Contents任務(wù)一圖片切片與上傳任務(wù)二裝修PC端店鋪首頁任務(wù)三裝修移動端店鋪首頁任務(wù)四上傳商品詳情頁任務(wù)四上傳商品詳情頁一、商品詳情頁上傳的注意事項（1）確定商品的類目及屬性。商品的類目、屬性也是引流的重要條件之一，網(wǎng)店美工需要在商品上架前確定商品的類目及屬性。（2）確定必填內(nèi)容。網(wǎng)店美工填寫商品上架信息時，帶“*”的類目屬于必填類目，要保證填寫的正確性，這關(guān)系到商品的屬性展示，也會影響商品的后續(xù)引流。（3）確定信息是否與實物相符。網(wǎng)店美工填寫的屬性信息要與實物相符，若存在不符的情況，容易遭到消費(fèi)者投訴。（4）堅持信息的原創(chuàng)性。網(wǎng)店美工應(yīng)該堅決杜絕標(biāo)題、圖片以及商品詳情頁效果的復(fù)制，堅持信息發(fā)布的原創(chuàng)性，無論是標(biāo)題、圖片或詳情頁介紹都應(yīng)牢牢結(jié)合商品特點并堅持原創(chuàng)，形成自己的店鋪特色。任務(wù)四上傳商品詳情頁“萍潔”店鋪準(zhǔn)備將制作完成后的茶杯移動端商品詳情頁進(jìn)行上傳，上傳過程中需要先添加上傳的主圖，再根據(jù)提示輸入商品的信息，并添加茶杯商品詳情頁圖片，其具體操作步驟如下。二、【課堂案例】——上傳茶杯商品詳情頁213任務(wù)四上傳商品詳情頁二、【課堂案例】——上傳茶杯商品詳情頁546任務(wù)四上傳商品詳情頁操作思路整個上傳過程可按照提示分別輸入內(nèi)容，其中帶“*”的部分為必填內(nèi)容。操作提示先上傳主圖；根據(jù)提示輸入基礎(chǔ)信息；添加商品詳情頁，完成后發(fā)布詳情頁。課堂練習(xí)：上傳水蜜桃移動端商品詳情頁網(wǎng)店美工：理論、案例與實訓(xùn)（全彩微課版）高等院校電子商務(wù)類新形態(tài)系列教材項目十綜合案例——生鮮店鋪設(shè)計與制作目錄Contents任務(wù)一

處理生鮮店鋪素材任務(wù)二

制作生鮮店鋪首頁任務(wù)三

制作生鮮店鋪商品詳情頁任務(wù)四

制作生鮮商品直通車推廣圖任務(wù)五

制作生鮮店鋪主圖短視頻任務(wù)一處理生鮮店鋪素材“鮮汁味鮮”是一家集采購、加工、銷售農(nóng)產(chǎn)品于一體的企業(yè)，其店鋪的商品主要來自大山采摘和農(nóng)民養(yǎng)殖，商品種類包括水果、蔬菜、海鮮水產(chǎn)、肉禽蛋類等，為加快企業(yè)品牌化升級，助推鄉(xiāng)村產(chǎn)業(yè)振興，“鮮汁味鮮”生鮮店鋪計劃上新某地區(qū)的標(biāo)志農(nóng)產(chǎn)品——海參和蝦，并準(zhǔn)備將這兩件商品分別展現(xiàn)在首頁的店招、海報和商品促銷頁面中，現(xiàn)需處理海參和蝦的商品圖片，方便后期制作時使用。完成后的參考效果如右圖所示。任務(wù)一處理生鮮店鋪素材觀察所有提供的素材，其中海參、蝦商品圖片有明顯的問題，網(wǎng)店美工需要進(jìn)行分析和處理。一、制作思路（1）處理海參商品圖片。打開拍攝的海參商品圖片，如右圖所示，可發(fā)現(xiàn)商品圖片呈現(xiàn)灰底效果，若是運(yùn)用到海報中則顯得單調(diào)，而店招不需要過多背景，此時可摳取海參商品圖片并刪除背景，方便制作店招和海報時調(diào)用。（2）處理蝦商品圖片。查看拍攝的蝦商品圖片，如左圖所示，可發(fā)現(xiàn)該商品圖片存在顏色過暗、偏色、主體對比不夠明顯等問題，因此網(wǎng)店美工需要先修飾該商品圖片，恢復(fù)商品本身的顏色，可使用【亮度/對比度】【曲線】【色相/飽和度】和【色階】等命令，調(diào)整商品圖片的顏色。任務(wù)一處理生鮮店鋪素材根據(jù)制作思路，網(wǎng)店美工分別進(jìn)行摳取海參商品圖片和調(diào)整蝦商品圖片色調(diào)的操作。二、設(shè)計實施1．處理海參商品圖片1234任務(wù)一處理生鮮店鋪素材根據(jù)制作思路，網(wǎng)店美工分別進(jìn)行摳取海參商品圖片和調(diào)整蝦商品圖片色調(diào)的操作。二、設(shè)計實施2．調(diào)整蝦商品圖片色調(diào)123456目錄Contents任務(wù)一處理生鮮店鋪素材任務(wù)二制作生鮮店鋪首頁任務(wù)三

制作生鮮店鋪商品詳情頁任務(wù)四

制作生鮮商品直通車推廣圖任務(wù)五

制作生鮮店鋪主圖短視頻任務(wù)二制作生鮮店鋪首頁“鮮汁味鮮”生鮮店鋪計劃重新設(shè)計店鋪首頁，要求完成后的效果要體現(xiàn)春天的清新，具有自然、和諧之感，其整個首頁布局要包括店招、海報、優(yōu)惠券、商品推薦模塊，頁面要簡潔美觀，并且要使用處理好的店鋪素材。完成后的參考效果如右圖所示。任務(wù)二制作生鮮店鋪首頁網(wǎng)店美工在進(jìn)行案例設(shè)計前需要先對制作思路進(jìn)行梳理，方便設(shè)計。一、制作思路（1）色彩選擇和風(fēng)格定位。為了體現(xiàn)健康、綠色的特點，網(wǎng)店美工在色彩選擇上可以綠色和白色為主色，使整個首頁的色調(diào)更加統(tǒng)一。為了凸顯商品內(nèi)容，在風(fēng)格選擇上則以簡約風(fēng)格為主，通過簡單的圖文搭配體現(xiàn)店鋪內(nèi)容。（2）頁面的布局。根據(jù)內(nèi)容的展現(xiàn)順序，網(wǎng)店美工可以將首頁分為店招與導(dǎo)航、海報、優(yōu)惠券、商品推薦4個部分。設(shè)計店招與導(dǎo)航時，網(wǎng)店美工可在其中體現(xiàn)品牌信息、上新商品、熱賣商品和優(yōu)惠信息，以吸引消費(fèi)者。任務(wù)二制作生鮮店鋪首頁根據(jù)案例分析的思路，網(wǎng)店美工依次對以下4個部分進(jìn)行設(shè)計。二、設(shè)計實施1．設(shè)計店招與導(dǎo)航12345任務(wù)二制作生鮮店鋪首頁根據(jù)案例分析的思路，網(wǎng)店美工依次對以下4個部分進(jìn)行設(shè)計。二、設(shè)計實施2．設(shè)計海報123任務(wù)二制作生鮮店鋪首頁根據(jù)案例分析的思路，網(wǎng)店美工依次對以下4個部分進(jìn)行設(shè)計。二、設(shè)計實施3．設(shè)計優(yōu)惠券123任務(wù)二制作生鮮店鋪首頁根據(jù)案例分析的思路，網(wǎng)店美工依次對以下4個部分進(jìn)行設(shè)計。二、設(shè)計實施4．設(shè)計商品推薦1243目錄Contents任務(wù)一處理生鮮店鋪素材任務(wù)二制作生鮮店鋪首頁任務(wù)三制作生鮮店鋪商品詳情頁任務(wù)四

制作生鮮商品直通車推廣圖任務(wù)五

制作生鮮店鋪主圖短視頻任務(wù)三制作生鮮店鋪商品詳情頁“鮮汁味鮮”生鮮店鋪最近上新一款牛奶草莓商品，為了提高銷量，需要對該商品設(shè)計商品詳情頁，由于PC端和移動端的商品詳情頁的寬度均為750像素，為了便于使用，這里直接采用同一版式進(jìn)行設(shè)計。商品詳情頁完成后的參考效果如右圖所示。任務(wù)三制作生鮮店鋪商品詳情頁為了展示牛奶草莓的賣點，網(wǎng)店美工可將商品詳情頁按照以下4個思路進(jìn)行制作。一、制作思路（1）焦點圖。焦點圖設(shè)計時可選擇具有創(chuàng)意構(gòu)思的商品圖，并配上賣點文字“能夠吃出奶香味的牛奶草莓”，體現(xiàn)了味美的特點。（2）賣點說明圖。賣點說明圖設(shè)計時主要對商品的基本信息進(jìn)行介紹，并通過圖文搭配的方式，體現(xiàn)商品賣點。（4）商品售后。其主要對商品的售后問題進(jìn)行說明，如快遞、大小、重量、售后范圍等，方便消費(fèi)者選購商品。（3）實拍圖。其主要通過實拍的方式展示草莓的“香”“甜”賣點，展示時可采用圖文結(jié)合的方式。任務(wù)三制作生鮮店鋪商品詳情頁根據(jù)案例分析的思路，按照焦點圖、賣點說明圖、實拍圖、商品售后的順序進(jìn)行設(shè)計。二、設(shè)計實施1234任務(wù)三制作生鮮店鋪商品詳情頁二、設(shè)計實施5678任務(wù)三制作生鮮店鋪商品詳情頁二、設(shè)計實施9101112目錄Contents任務(wù)一處理生鮮店鋪素材任務(wù)二制作生鮮店鋪首頁任務(wù)三制作生鮮店鋪商品詳情頁任務(wù)四制作生鮮商品直通車推廣圖任務(wù)五

制作生鮮店鋪主圖短視頻任務(wù)四制作生鮮商品直通車推廣圖鮮汁味鮮”生鮮店鋪準(zhǔn)備為一款千禧果商品制作直通車推廣圖，方便進(jìn)行商品推廣和店鋪引流。直通車推廣圖完成后的參考效果如右圖所示。任務(wù)四制作生鮮商品直通車推廣圖為了達(dá)到推廣的目的，網(wǎng)店美工在設(shè)計直通車推廣圖前，可先規(guī)劃設(shè)計并布局內(nèi)容，避免完成后的效果不夠美觀。一、制作思路（1）設(shè)計規(guī)劃。為了使直通車推廣圖效果更顯著，在素材選擇上可選擇千禧果的食用場景作為背景。制作直通車推廣圖的目的是引流，因此賣點的體現(xiàn)是制作直通車推廣圖的目的是引流，因此賣點的體現(xiàn)是設(shè)計的重點，經(jīng)過分析發(fā)現(xiàn)“營養(yǎng)豐富”“壞果包賠”“原產(chǎn)地直發(fā)”是引流的關(guān)鍵，在設(shè)計時可添加“酸甜多汁營養(yǎng)豐富”等文字展示千禧果的賣點。（2）內(nèi)容布局。為了避免文字遮擋商品，網(wǎng)店美工在設(shè)計時可結(jié)合上下構(gòu)圖和左右構(gòu)圖，在畫面左上角輸入