PAGE10PAGE10PAGE11PAGE11

課題設(shè)計(jì)美妝洗護(hù)類和家居用品類商品詳情頁課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）了解美妝洗護(hù)類和家居用品類商品詳情頁的模塊安排（2）能夠完成美妝洗護(hù)類和家居用品類商品詳情頁的設(shè)計(jì)工作素質(zhì)目標(biāo)：能夠?qū)⒅袊?guó)傳統(tǒng)紋樣應(yīng)用到設(shè)計(jì)中，為作品增添文化內(nèi)涵教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：美妝洗護(hù)類和家居用品類商品詳情頁的設(shè)計(jì)教學(xué)難點(diǎn)：美妝洗護(hù)類和家居用品類商品詳情頁的設(shè)計(jì)教學(xué)方法問答法、討論法、講授法、實(shí)踐法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：→→→任務(wù)實(shí)施（38min）第2節(jié)課：→任務(wù)實(shí)施（27min）→課堂討論（10min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，預(yù)習(xí)本節(jié)課要學(xué)習(xí)的知識(shí)【學(xué)生】完成課前任務(wù)通過課前任務(wù)，使學(xué)生預(yù)習(xí)本節(jié)課要學(xué)習(xí)的知識(shí)，增加學(xué)生的學(xué)習(xí)興趣考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】班干部報(bào)請(qǐng)假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問題導(dǎo)入（5min）【教師】提出以下問題：美妝洗護(hù)類商品詳情頁中應(yīng)包括哪些內(nèi)容？【學(xué)生】聆聽、思考、舉手回答【教師】總結(jié)學(xué)生的回答美妝洗護(hù)類商品詳情頁中除了要安排宣傳或促銷、搭配、賣點(diǎn)等模塊外，通常還會(huì)安排配方模塊，通過展示商品中含有的某些成分，讓消費(fèi)者更加放心地購(gòu)買商品。通過問題導(dǎo)入，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣任務(wù)實(shí)施（38min）【教師】講解設(shè)計(jì)口紅詳情頁的具體步驟，并要求學(xué)生以小組為單位完成相關(guān)任務(wù)?【教師】組織學(xué)生掃碼觀看“設(shè)計(jì)口紅詳情頁”視頻（詳見教材），讓學(xué)生對(duì)設(shè)計(jì)過程有一個(gè)大致地了解設(shè)計(jì)思路（1）模塊安排：頁頭安排宣傳內(nèi)容，吸引消費(fèi)者注意；然后安排賣點(diǎn)模塊，讓消費(fèi)者了解口紅的獨(dú)特之處；最后安排口紅色號(hào)展示模塊，方便消費(fèi)者根據(jù)自己的喜好選擇口紅。（2）配色分析：整個(gè)頁面以中國(guó)紅和復(fù)古青為主色，用金黃色點(diǎn)綴，配以中國(guó)傳統(tǒng)紋樣，使畫面具有濃郁的中國(guó)風(fēng)，顯得十分有韻味，同時(shí)與口紅膏體上的中國(guó)古典雕花相呼應(yīng)。?【教師】提出以下問題，隨機(jī)邀請(qǐng)學(xué)生進(jìn)行回答口紅詳情頁的布局方式應(yīng)該使用哪一種？為什么？?【學(xué)生】聆聽、思考、回答?【教師】總結(jié)學(xué)生的回答，并通過多媒體展示“口紅詳情頁效果”圖片（詳見教材）（3）布局方式：采用延伸布局方式，讓模塊之間的關(guān)聯(lián)性增強(qiáng)、畫面的層次感增強(qiáng)?！窘處煛孔寣W(xué)生分組討論設(shè)計(jì)思路【學(xué)生】組內(nèi)討論、確定思路、由小組代表發(fā)表討論結(jié)果【教師】點(diǎn)評(píng)、總結(jié)各組的發(fā)言2.設(shè)計(jì)步驟1）制作宣傳模塊【教師】演示并講解設(shè)計(jì)步驟及具體操作步驟1新建一個(gè)名為“口紅詳情頁”，寬度為750像素，高度自定，分辨率為72像素/英寸，顏色模式為RGB模式的文檔。步驟2置入本書配套素材“背景素材.jpg”“花素材.png”文件，并為花素材添加投影圖層樣式。步驟3打開項(xiàng)目5中制作的“口紅主圖.psd”文件，選中口紅及其陰影所在圖層，將其復(fù)制到“口紅詳情頁”文檔中。步驟4在背景素材左上角添加文本，并為其添加圖層樣式?！緦W(xué)生】聆聽、觀看、理解、記憶【教師】讓學(xué)生分組進(jìn)行制作【學(xué)生】組內(nèi)分工，根據(jù)本組的設(shè)計(jì)思路完成制作宣傳模塊任務(wù)【教師】巡堂輔導(dǎo)、答疑解惑2）制作賣點(diǎn)模塊【教師】演示并講解設(shè)計(jì)步驟及具體操作步驟1置入“形狀素材.png”文件，復(fù)制該文件并將復(fù)制文件適當(dāng)縮放，使其上方和下方都顯示部分原形狀素材，最后為原形狀素材添加漸變疊加圖層樣式。步驟2置入“形狀素材1.png”文件，并為其添加圖層樣式。步驟3置入“IMG_9683.jpg”文件，并將其剪貼于形狀素材1圖層中（將該圖層置于形狀素材1圖層上方，然后將光標(biāo)移至兩個(gè)圖層之間，當(dāng)光標(biāo)呈狀時(shí)單擊即可）。此時(shí)發(fā)現(xiàn)圖片在紅色背景的襯托下顯得有些“蒼白”，用CameraRaw濾鏡進(jìn)行調(diào)整。步驟4在形狀素材1上方添加標(biāo)題，并為其添加投影圖層樣式。步驟5復(fù)制形狀素材和形狀素材副本，然后調(diào)整其位置和高度，接著將位于上方的形狀素材轉(zhuǎn)換為普通圖層，并為其填充深青色（#105766）。步驟6置入“中國(guó)傳統(tǒng)紋樣.png”文件，并將其剪貼于柵格化的形狀素材圖層中。步驟7新建一個(gè)圖層，然后繪制一個(gè)寬度為200像素、高度為380像素的淺黃色（#?fceb）矩形，并為其添加描邊圖層樣式。?【教師】講解“源遠(yuǎn)流長(zhǎng)”的內(nèi)容（詳見教材），引導(dǎo)學(xué)生了解中國(guó)傳統(tǒng)紋樣，深刻領(lǐng)會(huì)中華傳統(tǒng)文化的源遠(yuǎn)流長(zhǎng)步驟8再繪制一個(gè)寬度為200像素、高度為270像素的矩形，并使其與步驟7中創(chuàng)建的矩形頂端和左側(cè)對(duì)齊，然后置入本書配套素材“IMG_9674.jpg”文件，并將其剪貼于矩形中。步驟9選中并復(fù)制形狀素材1，按“Shift+Ctrl+】”組合鍵將復(fù)制的圖層移至最頂層，然后調(diào)整其大小和位置，并將其圖層右側(cè)的圖標(biāo)拖至“刪除圖層”按鈕上刪除圖層樣式，最后為其添加新的圖層樣式。步驟10在圖片的上方和下方分別添加文本。步驟11復(fù)制兩份步驟7至步驟10創(chuàng)建的圖層并修改內(nèi)容。復(fù)制步驟4創(chuàng)建的標(biāo)題并修改內(nèi)容，然后為其應(yīng)用宣傳模塊文本的圖層樣式。?【教師】通過多媒體展示“繪制紅色背景”“繪制形狀”“復(fù)制形狀并置入圖片”圖片（詳見教材），隨機(jī)邀請(qǐng)學(xué)生進(jìn)行回答對(duì)比一下紅色和深紅色兩種顏色，優(yōu)化圖片的時(shí)候有哪些方式可以直接精準(zhǔn)使用不同的顏色？?【學(xué)生】聆聽、觀看、思考、回答?【教師】總結(jié)學(xué)生的回答步驟12為圖像編輯區(qū)下半部分添加紅色（#e42317）背景。步驟13用“矩形工具”繪制一個(gè)寬度為565像素、高度為600像素的矩形，然后用“橢圓工具”在矩形上方繪制一個(gè)寬度為565像素、高度為565像素的正圓，同時(shí)選中兩個(gè)形狀圖層，按“Ctrl+E”組合鍵將其合并，接著將其轉(zhuǎn)換為普通圖層并填充深紅色（#ca1908）。步驟14拷貝步驟13創(chuàng)建的形狀，并調(diào)整其大小和位置，然后置入本書配套素材“IMG_9654.jpg”文件，并將其剪貼于復(fù)制的形狀中，最后在形狀上方添加標(biāo)題（與步驟4中標(biāo)題的參數(shù)相同）。步驟15拷貝步驟5創(chuàng)建的圖層，并將其向下移動(dòng)，然后置入本書配套素材“紋理素材.jpg”文件，并將其剪貼于“形狀素材拷貝4”圖層（拷貝的柵格化圖層）中，最后設(shè)置其圖層混合模式為“柔光”。步驟16置入本書配套素材“IMG_9676.jpg”“IMG_9678.jpg”文件，并對(duì)其進(jìn)行摳圖處理，然后按“Ctrl+U”組合鍵，打開“色相/飽和度”對(duì)話框，在其中設(shè)置飽和度為“30”后單擊“確定”按鈕，接著為其添加投影圖層樣式，最后在圖片上方添加標(biāo)題（與步驟11中標(biāo)題的參數(shù)相同）?！緦W(xué)生】聆聽、觀看、理解、記憶【教師】讓學(xué)生分組進(jìn)行制作【學(xué)生】組內(nèi)分工，根據(jù)本組的設(shè)計(jì)思路完成制作賣點(diǎn)模塊任務(wù)【教師】巡堂輔導(dǎo)、答疑解惑3）制作口紅色號(hào)展示模塊【教師】演示并講解設(shè)計(jì)步驟及具體操作步驟1添加模塊標(biāo)題（與“制作賣點(diǎn)模塊”步驟4中標(biāo)題的參數(shù)相同），然后置入本書配套素材“形狀素材2.jpg”文件，接著在形狀素材2上繪制一個(gè)寬度為385像素、高度為235像素的圓角矩形（設(shè)置圓角矩形半徑為30像素），并設(shè)置其填充色為任意顏色，描邊為無，最后置入本書配套素材“IMG_7126西柚紅.jpg”文件，并將其剪貼于圓角矩形中。步驟2在圖片左側(cè)添加文本，并在文本之間添加分割線。步驟3復(fù)制三份步驟1（除標(biāo)題外）和步驟2中創(chuàng)建的圖層并修改內(nèi)容。至此，口紅詳情頁制作完成?！緦W(xué)生】聆聽、觀看、理解、記憶【教師】讓學(xué)生分組進(jìn)行制作【學(xué)生】組內(nèi)分工，根據(jù)本組的設(shè)計(jì)思路完成制作口紅色號(hào)展示模塊任務(wù)【教師】巡堂輔導(dǎo)、答疑解惑【學(xué)生】制作完成后，由小組代表展示本組設(shè)計(jì)的商品詳情頁圖片【教師】與學(xué)生一起評(píng)選出最佳的商品詳情頁通過設(shè)計(jì)口紅詳情頁任務(wù)，幫助學(xué)生熟悉設(shè)計(jì)美妝洗護(hù)類商品詳情頁的流程和方法第二節(jié)課問題導(dǎo)入（3min）【教師】提出以下問題：家居用品類商品詳情頁中應(yīng)設(shè)計(jì)哪些模塊？【學(xué)生】聆聽、思考、舉手回答【教師】總結(jié)學(xué)生的回答家居用品類商品與人們的日常生活密切相關(guān)，其安全性至關(guān)重要。因此，這類商品詳情頁中除了要安排前面所涉及的模塊外，通常還會(huì)安排展示檢測(cè)報(bào)告的模塊，讓消費(fèi)者可以放心購(gòu)買商品。通過問題導(dǎo)入，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣任務(wù)實(shí)施（27min）【教師】講解設(shè)計(jì)保溫杯詳情頁的具體步驟，并要求學(xué)生以小組為單位完成相關(guān)任務(wù)?【教師】組織學(xué)生掃碼觀看“設(shè)計(jì)保溫杯詳情頁”視頻（詳見教材），讓學(xué)生對(duì)設(shè)計(jì)過程有一個(gè)大致地了解1.設(shè)計(jì)思路（1）模塊安排：頁頭安排宣傳內(nèi)容，吸引消費(fèi)者注意；接下來安排賣點(diǎn)模塊，讓消費(fèi)者了解保溫杯的特點(diǎn)；最后為保溫杯詳細(xì)信息模塊，讓消費(fèi)者全面了解保溫杯。?【教師】隨機(jī)邀請(qǐng)學(xué)生進(jìn)行回答保溫杯詳情頁的頁面配色使用哪一種好？為什么？?【學(xué)生】聆聽、思考、回答?【教師】總結(jié)學(xué)生的回答（2）配色分析：整個(gè)頁面以橙色為主色，給人溫暖、舒適的感覺，貼合保溫杯的特性；大部分文案顏色采用黑色，輔以橙色點(diǎn)綴，既能突出商品信息，又能保證畫面和諧統(tǒng)一。?【教師】隨機(jī)邀請(qǐng)學(xué)生進(jìn)行回答哪一種布局方式更適合保溫杯詳情頁？?【學(xué)生】聆聽、思考、回答?【教師】總結(jié)學(xué)生的回答（3）布局方式：采用層疊和錯(cuò)位布局方式，可以增強(qiáng)畫面的層次感和動(dòng)感?！窘處煛孔寣W(xué)生分組討論設(shè)計(jì)思路【學(xué)生】組內(nèi)討論、確定思路、由小組代表發(fā)表討論結(jié)果【教師】點(diǎn)評(píng)、總結(jié)各組的發(fā)言2.設(shè)計(jì)步驟1）制作宣傳模塊【教師】演示并講解設(shè)計(jì)步驟及具體操作步驟1新建一個(gè)名為“保溫杯詳情頁”，寬度為750像素，高度自定，分辨率為72像素/英寸，顏色模式為RGB模式的文檔。步驟2置入本書配套素材“IMG_9715.jpg”文件，并將其轉(zhuǎn)換為普通圖層，然后用“矩形選框工具”框選圖片頂部背景，并用變換工具調(diào)整其高度，最后在圖片上方添加文本。步驟3在背景圖層上方新建一個(gè)圖層，然后繪制一個(gè)寬度為750像素、高度為300像素的橙色（#ff9747）矩形，接著置入本書配套素材“保溫杯圖標(biāo).png”文件并放在合適的位置，最后在圖標(biāo)下方添加文本。步驟4選中保溫杯圖片圖層，并為其添加圖層蒙版，然后用“矩形選框工具”框選圖片底部，選擇“漸變工具”，單擊工具屬性欄的，在打開的“漸變編輯器”對(duì)話框中選擇“基本”設(shè)置項(xiàng)下的“黑，白漸變”，接著在選區(qū)內(nèi)自下而上拖動(dòng)鼠標(biāo)，使圖片與圖標(biāo)背景過渡自然，最后用“畫筆工具”進(jìn)行細(xì)致調(diào)整?！緦W(xué)生】聆聽、觀看、理解、記憶【教師】讓學(xué)生分組進(jìn)行制作【學(xué)生】組內(nèi)分工，根據(jù)本組的設(shè)計(jì)思路完成制作宣傳模塊任務(wù)【教師】巡堂輔導(dǎo)、答疑解惑2）制作賣點(diǎn)模塊【教師】演示并講解設(shè)計(jì)步驟及具體操作步驟1創(chuàng)建第一個(gè)賣點(diǎn)模塊的標(biāo)題，并將其中“補(bǔ)水”兩個(gè)字的字體顏色單獨(dú)設(shè)置為橙色（#?9747），然后在其右側(cè)添加圖形裝飾。步驟2在標(biāo)題下方放置本書配套素材“IMG_9718.jpg”文件。步驟3復(fù)制步驟1創(chuàng)建的標(biāo)題并修改內(nèi)容，然后在其下方放置本書配套素材“IMG_9755.jpg”文件，接著在其右側(cè)繪制一個(gè)寬度為265像素、高度為265像素的正圓，并設(shè)置其填充色為任意顏色，描邊為無，最后置入本書配套素材“IMG_9720.jpg”文件，并將其剪貼于正圓中。步驟4添加文本并繪制線條和矩形，制作保溫測(cè)試部分。步驟5復(fù)制步驟3修改的標(biāo)題并再次修改內(nèi)容，然后在其下方繪制一個(gè)寬度為750像素、高度為400像素的淺灰色（#ffdcae）矩形，接著在矩形上再繪制一個(gè)寬度為430像素、高度為400像素的矩形，使其與前一個(gè)矩形頂端和右側(cè)對(duì)齊，最后置入本書配套素材“IMG_9733.jpg”文件，并將其水平翻轉(zhuǎn)后剪貼于剛創(chuàng)建的矩形中。步驟6在圖片左側(cè)添加文本和矩形裝飾。步驟7復(fù)制三份步驟5和步驟6創(chuàng)建的圖層（除標(biāo)題外）并修改內(nèi)容?！緦W(xué)生】聆聽、觀看、理解、記憶【教師】讓學(xué)生分組進(jìn)行制作【學(xué)生】組內(nèi)分工，根據(jù)本組的設(shè)計(jì)思路完成制作賣點(diǎn)模塊任務(wù)【教師】巡堂輔導(dǎo)、答疑解惑3）制作商品參數(shù)模塊【教師】演示并講解設(shè)計(jì)步驟及具體操作步驟1添加商品參數(shù)模塊的標(biāo)題。步驟2在標(biāo)題下方添加文本，并在文本之間添加分割線。至此，保溫杯詳情頁制作完成?！緦W(xué)生】聆聽、觀看、理解、記憶【教師】讓學(xué)生分組進(jìn)行制作【學(xué)生】組內(nèi)分工，根據(jù)本組的設(shè)計(jì)思路完成制作商品參數(shù)模塊任務(wù)【教師】巡堂輔導(dǎo)、答疑解惑【學(xué)生】制作完成后，由小組代表展示本組設(shè)計(jì)的商品詳情頁圖片【教師】與學(xué)生一起評(píng)選出最佳的商品詳情頁通過設(shè)計(jì)保溫杯詳情頁任務(wù)，幫助學(xué)生熟悉設(shè)計(jì)家居用品類商品詳情頁的流程和方法課堂討論（10min）【教師】組織學(xué)生分組討論電風(fēng)扇詳情頁的設(shè)計(jì)思路參照以下提示梳理電風(fēng)扇詳情頁的設(shè)計(jì)思路。（1）確定模塊安排：確定電風(fēng)扇詳情頁中安排哪些模塊，并根據(jù)模塊安排確定具體內(nèi)容，包括圖片和文案。（2）確定配色方案：可以商品顏色為主色，從而獲得和諧統(tǒng)一的畫面效果。（3）確定布局方式：根據(jù)模塊及模塊中的元素安排選擇合適的布局方式。組內(nèi)討論、確定思路、由小組代表發(fā)表討論結(jié)果【教師】點(diǎn)評(píng)各組的發(fā)言通過小組討論，幫助學(xué)生進(jìn)一步鞏固所學(xué)知識(shí)課堂小結(jié)（3min）【教師】簡(jiǎn)要總結(jié)本節(jié)課的要點(diǎn)本節(jié)課學(xué)習(xí)了設(shè)計(jì)美妝洗護(hù)類和家居用品類商品詳情頁的相關(guān)知識(shí)，同時(shí)通過具體的設(shè)計(jì)任務(wù)，幫助大家熟悉了這兩類商品詳情