市場營銷基礎(chǔ)教學(xué)課件項目5 商品詳情頁設(shè)計與制作-任務(wù)2 商品詳情頁的制作電子課件 中職 電子教案 網(wǎng)店裝修（第三版）

市場營銷基礎(chǔ)教學(xué)課件項目5商品詳情頁設(shè)計與制作-任務(wù)2商品詳情頁的制作電子課件中職高教版網(wǎng)店裝修（第三版）《網(wǎng)店裝修》項目五商品詳情頁設(shè)計與制作項目綜述有過網(wǎng)上購物經(jīng)歷的人都知道，在網(wǎng)上交易的整個過程中，買家是既看不到實物，也沒有營業(yè)員進(jìn)行導(dǎo)購的。在這里，我們的詳情頁就好比就是我們實體店的導(dǎo)購員，詳情頁設(shè)計的好與壞，直接可以影響著店鋪的轉(zhuǎn)化率。經(jīng)過實踐學(xué)習(xí)，曉玲發(fā)現(xiàn)商品的詳情頁設(shè)計得比較完善時，她們的工作量會比較輕松。根據(jù)這個發(fā)現(xiàn)，她們把顧客反饋的相關(guān)問題進(jìn)行反饋和整合。在這個過程中，曉玲深深體會到商品詳情頁的制作與優(yōu)化的重要性。項目任務(wù)知識目標(biāo)任務(wù)二商品詳情頁的制作分析女裝商品詳情頁制作流程能使用Photoshop設(shè)計制作各個模塊內(nèi)容養(yǎng)成誠信規(guī)范的職業(yè)素養(yǎng)情景設(shè)計曉玲父母進(jìn)了一批新女裝衛(wèi)衣，想讓曉玲把新品發(fā)布到網(wǎng)店上，曉玲和團(tuán)隊已經(jīng)熟練掌握拍攝，修圖、主圖制作等操作，接下來就是要面對詳情頁的制作了。前面已了解詳情頁的頁面所涉及的信息十分豐富，是產(chǎn)品介紹和賣點(diǎn)展示的最重要區(qū)域，必須要在設(shè)計時進(jìn)行合理內(nèi)容展示和順序安排，才能讓顧客明白和購買。雖然面臨壓力，但是曉玲他們決定勇敢嘗試，力爭做好詳情頁，盡快將新產(chǎn)品上架銷售。任務(wù)分解商品詳情頁的制作因為了解設(shè)計詳情頁的過程中需要注意很多規(guī)范，力求用最佳的圖像和文字來展示商品的特點(diǎn)，所以經(jīng)過一番激烈的討論，曉玲和團(tuán)隊決定分二步進(jìn)行：第一是準(zhǔn)備和理順一般詳情頁制作的整個流程，第二是針對女裝這類產(chǎn)品的詳情頁進(jìn)行制作。商品詳情頁的制作分析女裝商品詳情頁制作流程活動1步驟1：確定頁面風(fēng)格。步驟2：搜集商品和素材。步驟3：構(gòu)建女裝商品詳情頁的布局框架。步驟4：確定配色方案和字體步驟5：Photoshop排版設(shè)計制作。步驟6：切片和優(yōu)化頁面存儲。步驟6：切片和優(yōu)化頁面存儲。商品詳情頁的制作分析女裝商品詳情頁制作流程活動1步驟1：確定頁面風(fēng)格。步驟2：搜集商品和素材。本款衛(wèi)衣外觀時尚、面料柔軟，顏色為米灰色，顯得柔軟舒適、干凈清純。結(jié)合開學(xué)季的主題，確定的風(fēng)格是青春大方、柔軟舒適的文藝風(fēng)。整理實拍衛(wèi)衣的圖片和搜集制作商品詳情頁所需素材。商品詳情頁的制作分析女裝商品詳情頁制作流程活動1步驟3：構(gòu)建女裝商品詳情頁的布局框架。步驟4：確定配色方案和字體。排版選擇的字體主要是字語文躍體和微軟雅黑，給人清晰大方、圓潤舒服的感覺，適合產(chǎn)品及銷售目標(biāo)客戶的定位。商品詳情頁的制作分析女裝商品詳情頁制作流程活動1步驟5：Photoshop排版設(shè)計制作。步驟6：切片和優(yōu)化頁面存儲商品詳情頁的制作分析女裝商品詳情頁制作流程活動1步驟7：上傳到淘寶店鋪。（1）到店鋪后臺的圖片空間，進(jìn)入“圖片管理”，將剛才的images文件上傳到空間中。（2）回到店鋪后臺，進(jìn)入“發(fā)布商品”頁面，選擇好相應(yīng)的類目，按照要求提示填寫信息，將圖片選擇到商品詳情頁中發(fā)布。商品詳情頁的制作制作創(chuàng)意海報圖活動2（1）新建文件，顏色模式為RGB顏色，分辨率為72像素/英寸，背景內(nèi)容為白色（R:255，G:255，B:255），尺寸寬為750像素、高為500像素。（2）新建圖層，填充為深青色（R：45，G：167，B：168）。（3）置入素材“練習(xí)素材/項目5/12.png”，將圖層命名為“底紋”，調(diào)整圖層不透明度。（4）置入素材“練習(xí)素材/項目5/01.jpg”，按“Ctrl+T”快捷鍵，調(diào)整圖片的大小，放置在版面的右邊。（5）使用“矩形工具”，選擇“形狀”，選擇不填充，描邊為白色（R:255，G:255，B:255），4像素，描邊選項為直線，繪制矩形。商品詳情頁的制作制作創(chuàng)意海報圖活動2（6）置入素材“練習(xí)素材/項目5/16.jpg”，進(jìn)行圖層樣式的顏色疊加，選擇白色（R:255，G:255，B:255。（7）選擇“矩形選框”繪制矩形，填充為米黃色（R：254，G：227，B：184），同理，使用橢圓選框工具繪制圓形，填充為深青色（R：11，G：82，B：83）。（8）選擇“多邊形工具”，設(shè)置“形狀”，填充選為白色（R:255，G:255，B:255），不描邊，邊數(shù)選擇為3，繪制三角形。（9）選擇“橫排文字工具”，字體為微軟雅黑，字號為20點(diǎn)，字體顏色為白色（R：255，G：255，B：255），輸入文字“新裝，遇見新同學(xué)！”，完成相關(guān)文字輸入，保存為JPG格式。商品詳情頁的制作制作創(chuàng)意海報圖活動2案例名稱：文創(chuàng)產(chǎn)品店鋪裝修——制作創(chuàng)意海報。案例背景：黃巧團(tuán)隊目前跟進(jìn)文創(chuàng)產(chǎn)品網(wǎng)店“藝·尚”項目，前面已設(shè)計和制作好店鋪首頁。為了有助于買家更詳細(xì)地了解商品，激發(fā)買家購買欲望，她們準(zhǔn)備制作商品詳情頁，首先對整個詳情頁面進(jìn)行了規(guī)劃和設(shè)計，接著開始制作詳情頁的創(chuàng)意海報。實訓(xùn)目的：掌握文創(chuàng)產(chǎn)品創(chuàng)意海報的制作。商品詳情頁的制作制作商品賣點(diǎn)圖活動3（1）新建文件，顏色模式為RGB顏色，分辨率為72像素/英寸，背景內(nèi)容為白色，尺寸寬為750像素、高為450像素。（2）使用“矩形工具”，繪制矩形，放在版面左邊，置入素材“練習(xí)素材/項目5/02.jpg”，并創(chuàng)建剪貼蒙版。（3）同理，繪制矩形，放在版面右邊，置入素材“練習(xí)素材/項目5/13.jpg”，并創(chuàng)建剪貼蒙版。（4）繪制矩形，填充為深青色，并創(chuàng)建剪貼蒙版，把不透明度降為30%，輸入文字“舒適、透氣、柔軟”。（5）頂部輸入文字“運(yùn)動舒適時尚范兒”，字體為字語文躍體，顏色為深青色，大小為35點(diǎn)。（6）完成右下部分文字的輸入，字體為微軟雅黑，顏色為黑色，大小為20點(diǎn)，英文字體顏色為灰色，保存為JPG格式。商品詳情頁的制作制作商品賣點(diǎn)圖活動3案例名稱：文創(chuàng)產(chǎn)品店鋪裝修——制作商品賣點(diǎn)圖。案例背景：黃巧團(tuán)隊已經(jīng)掌握了創(chuàng)意海報制作，根據(jù)商品賣點(diǎn)的提煉，接下來制作商品賣點(diǎn)圖，展示出商品的優(yōu)勢，從而打動買家的購買欲望。實訓(xùn)目的：掌握商品賣點(diǎn)圖的設(shè)計和制作。商品詳情頁的制作制作商品信息圖活動4（1）新建文件，顏色模式為RGB顏色，分辨率為72像素/英寸，背景內(nèi)容為白色，尺寸寬為750像素、高為900像素。（2）新建圖層，選擇“矩形選框工具”，在上面繪制矩形選區(qū)，填充為深青色，同理，繪制矩形，填充為米黃色。（3）選擇“多邊形工具”，把邊調(diào)整為3，繪制三角形，填充為深青色，再輸入文字“商品信息”，至此將有關(guān)標(biāo)題部分的圖層全部選中，按快捷鍵“CTR+G”進(jìn)行分組，并命名為“title”。（4）使用“矩形工具”，繪制矩形，置入素材“練習(xí)素材/項目5/03.jpg”，并創(chuàng)建剪貼蒙版。（5）選擇“橫排文字工具”，字體為微軟雅黑，中文字號為14點(diǎn)，英文字號為7點(diǎn)，字體顏色為黑色，輸入“商品編號、商品成分、商品顏色”等相關(guān)文字。商品詳情頁的制作制作商品信息圖活動4（6）使用“矩形工具”，繪制小矩形，填充為灰色，復(fù)制相關(guān)矩形，注意每行有一個小矩形的顏色為深青色。（7）置入“練習(xí)素材/項目5”中的素材“14.jpg”、“15.jpg”，再按“Ctrl+T”快捷鍵，調(diào)整圖片的大小。（8）使用“矩形工具”，繪制矩形，填充為深青色，描邊為灰色，復(fù)制矩形，改顏色為深灰色，再復(fù)制矩形，填充為灰色，重復(fù)前面兩個步驟。（9）選擇“直線工具”，填充顏色為灰色，粗細(xì)大小為1像素，繪制直線，使用“Ctrl+J”快捷鍵復(fù)制5條直線，進(jìn)行調(diào)整寬度。（10）選擇“橫排文字工具”，字體為微軟雅黑，字號為15點(diǎn)，輸入相關(guān)文字，保存為jpg格式。商品詳情頁的制作制作商品信息圖活動4案例名稱：文創(chuàng)產(chǎn)品店鋪裝修——制作商品信息圖。案例背景：黃巧團(tuán)隊完成了商品賣點(diǎn)圖制作，接下來制作商品信息圖，延續(xù)買家對該商品的興趣，從而達(dá)到提升流量轉(zhuǎn)化的目的。實訓(xùn)目的：掌握商品信息圖的設(shè)計和制作。商品詳情頁的制作制作商品展示圖活動5（1）新建文件，寬度為750像素，高度為3500像素，分辨率為72像素/英寸，顏色模式為RGB顏色，設(shè)置背景顏色為白色（R：255，G：255，B：255）。（2）制作標(biāo)題信息，此處可復(fù)制商品信息模塊中的“title”分組，修改其中的文字圖層內(nèi)容為“商品展示”即可。(3)使用“矩形工具”,分別繪制4個矩形,填充黑色（R：0，G：0，B：0），調(diào)整好合適的大小，并對齊處理。(4)選擇其中一個矩形，在其上方置入素材“練習(xí)素材/項目5/任務(wù)2/04.jpg”，選擇該圖片所在的圖層，單擊右鍵選擇“創(chuàng)建剪貼蒙版”。并創(chuàng)建一文字圖層，在圖片底部添加文字說明“正面”。(5)按上述步驟操作，繼續(xù)置入”練習(xí)素材/項目5/任務(wù)2”中的05.jpg，06.jpg，07.jpg圖片，分別展示上衣的背面圖、模特正面和背面圖，并添加相應(yīng)的說明文字。最終完成了該展示模塊的設(shè)計與制作。

商品詳情頁的制作制作商品展示圖活動5案例名稱：文創(chuàng)產(chǎn)品詳情頁制作——制作商品展示模塊。案例背景：黃巧是校企合作單位十點(diǎn)鐘文化傳媒工作室的成員，目前跟進(jìn)文創(chuàng)產(chǎn)品網(wǎng)店“藝?尚”。為了更好的宣傳文創(chuàng)產(chǎn)品的思政理念和非遺文化，為了進(jìn)一步介紹和推廣文創(chuàng)產(chǎn)品，工作室給黃巧布置制作詳情頁商品展示模塊的任務(wù)。實訓(xùn)目的：熟悉商品展示模塊的方法，根據(jù)文創(chuàng)產(chǎn)品特點(diǎn)設(shè)計并制作商品展示模塊信息。綜合案例商品詳情頁的制作制作商品細(xì)節(jié)圖活動6曉玲深知：通過商品的細(xì)節(jié)展示，可以讓顧客更全面的熟悉和了解這個商品。只有這樣，才能最終促使顧客下單購買。因此，曉玲及其團(tuán)隊在制作前，從顧客的角度出發(fā)，認(rèn)真做了規(guī)劃和準(zhǔn)備。接下來，曉玲就跟其團(tuán)隊一起嘗試完成細(xì)節(jié)展示部分的設(shè)計與制作。商品詳情頁的制作制作商品細(xì)節(jié)圖活動6(1)新建文件，寬度為750像素，高度為1700像素，分辨率為72像素/英寸，顏色模式為RGB顏色，設(shè)置背景顏色為白色（R：255，G：255，B：255）。(2)制作標(biāo)題信息，此處可復(fù)制商品展示模塊中的“title”分組，修改其中的文字圖層內(nèi)容為“商品細(xì)節(jié)”。(3)使用“矩形工具”繪制矩形,填充顏色為黑色（R：0，G：0，B：0），在其上方置入圖片素材“練習(xí)素材/項目5/任務(wù)2/08.jpg”,并單擊右鍵，選擇“創(chuàng)建剪貼蒙版”。(4)制作文案部分效果。使用“橢圓工具”繪制圓形,填充顏色(R:45,G:167,B:168),利用“橫排文字工具”輸入相關(guān)文字,利用“直線工具”繪制斜線進(jìn)行點(diǎn)綴。最后將此部分圖層合并為一個組,命名為“細(xì)節(jié)1”。(5)產(chǎn)品其他細(xì)節(jié)部分的設(shè)計可以直接復(fù)制細(xì)節(jié)1,并修改相應(yīng)的圖片和文案。在此就不再一一贅述。商品詳情頁的制作制作商品展示圖活動6案例名稱：文創(chuàng)產(chǎn)品詳情頁制作——制作商品細(xì)節(jié)模塊。案例背景：黃巧是校企合作單位十點(diǎn)鐘文化傳媒工作室的成員，目前跟進(jìn)文創(chuàng)產(chǎn)品網(wǎng)店“藝?尚”。為了更好的宣傳文創(chuàng)產(chǎn)品的思政理念和非遺文化，擴(kuò)大商品知名度、增加商品點(diǎn)擊量，工作室給黃巧布置制作詳情頁商品細(xì)節(jié)模塊的任務(wù)。實訓(xùn)目的：熟悉商品細(xì)節(jié)模塊的方法，根據(jù)文創(chuàng)產(chǎn)品特點(diǎn)設(shè)計并制作商品細(xì)節(jié)模塊信息。綜合案例商品詳情頁的制作制作溫馨提示圖活動7曉玲及其團(tuán)隊已經(jīng)完成了商品細(xì)節(jié)的規(guī)劃和設(shè)計，接下來為了讓顧客對售后及色差等問題有個更全面的了解，因此曉玲和她的團(tuán)隊還準(zhǔn)備完成溫馨提示模塊的制作。商品詳情頁的制作制作溫馨提示圖活動7（1）根據(jù)前面所述方法，制作標(biāo)題組內(nèi)容。（2）使用“橫排文字工具”，錄入【關(guān)于發(fā)貨】、【關(guān)于色差】和【售后服務(wù)】等信息內(nèi)容，并相應(yīng)的調(diào)整其格式。（3）添加“練習(xí)素材/項目5/任務(wù)2/關(guān)于發(fā)貨.jpg”圖標(biāo),調(diào)整大小及其位置。使用“矩形工具”,填充顏色(R:236,G:236,B:236)，繪制一灰色矩形。（4）使用同樣的方法完成【關(guān)于色差】和【售后服務(wù)】部分的制作,最后選擇相應(yīng)圖層，作對齊處理并最終完成該模塊內(nèi)容的制作。商品詳情頁的制作制作溫馨提示圖活動7案例名稱：文創(chuàng)產(chǎn)品詳情頁制作——制作商品溫馨