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

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

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