第二章商品詳情頁設(shè)計(jì)(三)

廣東省技工學(xué)校文化理論課教案（首頁）（代號A-3）共6頁科目網(wǎng)店美工第二章課題：商品詳情頁設(shè)計(jì)授課日期課時(shí)4班級授課方式講、練結(jié)合作業(yè)題數(shù)1擬用時(shí)間90分鐘教學(xué)目的1.了解商品詳情頁的尺寸要求2.了解詳情頁包含的元素3.學(xué)會(huì)使用蒙版和通道選用教具掛圖網(wǎng)絡(luò)教室電子教鞭重點(diǎn)1.了解詳情頁包含的元素2.學(xué)會(huì)使用蒙版和通道難點(diǎn)學(xué)會(huì)使用蒙版和通道教學(xué)回顧前面學(xué)習(xí)了如何制作商品主圖說明其中講授90分鐘，練習(xí)90分鐘審閱簽名：教學(xué)過程（代號A—4）第2頁時(shí)間分配教學(xué)過程教學(xué)方法教學(xué)手段5分鐘15分鐘[新課引入]：優(yōu)秀的商品詳情頁可以激發(fā)買家的購買欲望，促使買家下單，幫組賣家樹立店鋪形象，提高銷量，優(yōu)化商品詳情頁對提升轉(zhuǎn)化率有很大的作用[新課內(nèi)容]：商品詳情頁的尺寸要求1.計(jì)算機(jī)端描述頁面要求?每張圖片的容量建議不超過2MB，圖片寬度不超過750像素，商品描述頁面“源碼”不超過200000個(gè)字符。2.手機(jī)端（無線端）描述頁面要求圖片寬度要求在480~1242像素，高度小于等于1546像素；圖片總?cè)萘坎怀^2560KB，總字?jǐn)?shù)不得超過5000個(gè)字；摘要內(nèi)容不超過140個(gè)字。詳情頁包含的元素1.基本信息基本信息模塊是商品詳情頁最常用的模塊之一，用來介紹商品的品牌、名稱、型號、材質(zhì)、結(jié)構(gòu)以及功效等。2.產(chǎn)品展示賣家要精挑細(xì)選商品圖片進(jìn)行展示，圖片不必過多，因?yàn)樯唐访枋瞿０暹€有詳細(xì)的圖文說明。3.商品焦點(diǎn)圖商品焦點(diǎn)圖主要是提煉商品賣點(diǎn)，突出該商品與其他商品不同的特點(diǎn)，這些特點(diǎn)是該商品獨(dú)有的。復(fù)習(xí)回顧講授教師使用網(wǎng)絡(luò)教室的“屏幕廣播”功能進(jìn)行課件和講解。教學(xué)過程（代號A—4）第3頁時(shí)間分配教學(xué)過程教學(xué)方法教學(xué)手段15分鐘4.商品細(xì)節(jié)圖商品細(xì)節(jié)圖是近距離展示商品的亮點(diǎn)，對商品的每一個(gè)細(xì)節(jié)進(jìn)行詳細(xì)描述，從而突出商品的特殊性。購物須知是要告知買家郵費(fèi)、發(fā)貨時(shí)間、包裝、退換貨保障、售后等信息。蒙版和通道的使用蒙版保護(hù)被選取或指定的區(qū)域不受編輯操作的影響，起到遮蔽的作用?？捎肁lpha通道和存儲(chǔ)選區(qū)產(chǎn)生蒙版。1.蒙版（1）蒙版效果遮照物作用于被遮照物，遮照物是以8位灰度通道形式存儲(chǔ)。（2）蒙版使用通過編輯形成更復(fù)雜的選區(qū)2.通道通道就是在PhotoshopCS6環(huán)境下，將圖像顏色分離成基本的顏色，每一個(gè)基本顏色使用的灰度亮度值就是一個(gè)基本的通道。主要用于存放圖像的顏色分量和選區(qū)信息，是存儲(chǔ)不同類型信息的灰度圖像。（1）通道的分類講授教師使用網(wǎng)絡(luò)教室的“屏幕廣播”功能進(jìn)行課件和講解。教學(xué)過程（代號A—4）第4頁時(shí)間分配教學(xué)過程教學(xué)方法教學(xué)手段5分鐘20分鐘1）復(fù)合通道2）顏色通道3）專色通道4）Alpha通道5）單色通道（2）通道控制面板在通道控制面板內(nèi)還包括4個(gè)命令按鈕，在它們的幫助下，可以完成常用的通道操作。（3）通道的作用通道最主要的作用就是選區(qū)，特別是復(fù)雜選取的選取。技能訓(xùn)練一、商品焦點(diǎn)圖的設(shè)計(jì)制作1.新建一畫布，大小為750像素×500像素，背景為白色。2.打開背景圖片“花.jpg”，調(diào)整大小，設(shè)置圖層花的透明度3.打開商品圖片“夾克.jpg”，裁切，調(diào)整大小，拖動(dòng)到焦點(diǎn)圖文件中4.為“夾克”圖層添加圖層蒙版，設(shè)置前景色為“黑色”，用“畫筆工具”進(jìn)行涂抹，去除商品圖片背景。5.添加文字“NEW”，柵格化文字，對文字進(jìn)行編輯和修改。6.添加其他文字7.按照效果圖的設(shè)計(jì)制作所示，完成操作。講授講練結(jié)合教師使用網(wǎng)絡(luò)教室的“屏幕廣播”功能進(jìn)行課件和講解。教學(xué)過程（代號A—4）第5頁時(shí)間分配教學(xué)過程教學(xué)方法教學(xué)手段30分鐘90分鐘二、產(chǎn)品信息圖設(shè)計(jì)與制作1.新建750像素×750像素的文件，2.用橢園選框工具，按住Shift鍵繪制正圓，描邊3.執(zhí)行菜單“選擇”→“修改”→“收縮命令”，將選區(qū)縮小為“5像素”，填充為“黑色”。4.用直線工具繪制直線，輸入文字。5.打開“產(chǎn)品素材2.jpg”將產(chǎn)品圖片拖動(dòng)到產(chǎn)品信息下，修改大小，6.選擇畫筆工具，設(shè)置畫筆，繪制虛線。7.輸入文字8.輸入產(chǎn)品尺碼信息三、產(chǎn)品詳情模板圖的設(shè)計(jì)制作1.打開模板素材.JPG2.在本實(shí)例中選擇水平劃分圖片，打開“切片工具”選擇工具，在圖片上單擊，打開“劃片切片”對話框。3.單擊“切片工具”，移動(dòng)到圖片中黃色的小點(diǎn)上，拖動(dòng)鼠標(biāo)，調(diào)整切片。4.完成后，選擇“存儲(chǔ)為WEB所用的格式”，設(shè)置存儲(chǔ)的對話框。[作業(yè)]：完成技能訓(xùn)練講練結(jié)合教師使用網(wǎng)絡(luò)教室的“屏幕廣播”功能進(jìn)行課件和講解。教學(xué)