《商品信息采编》教案第19课设计美妆洗护类和家居用品类商品详情页.docx

《《商品信息采编》教案第19课设计美妆洗护类和家居用品类商品详情页.docx》由会员分享，可在线阅读，更多相关《《商品信息采编》教案第19课设计美妆洗护类和家居用品类商品详情页.docx（7页珍藏版）》请在优知文库上搜索。

1、课题设计美妆洗护类和家居用品类商品详情页课时2课时(90min)教学目标知识技能目标：（1）了解美妆洗护类和家居用品类商品详情页的模块安排（2）能够完成美妆洗护类和家居用品类商品详情页的设计工作素质目标：能够将中国传统纹样应用到设计中，为作品增添文化内涵教学重睚点教学重点：美妆洗护类和家居用品类商品详情页的设计教学难点：美妆洗护类和家居用品类商品详情页的设计教学方法问答法、讨论法、腿法、实践法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：课前玲一考勤（2min）*问题导入（5min）一任务实施（38min）第2节课：问题导入（3min）一任务实施（27min）一课堂讨论（10min）

2、一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任努【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，预习本节课要学习的知识【学生】完成课前任务通过课前任务,使学生预习本节课要学习的知识,增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】班干部报请假人员及原因培养学生的组织纪律性,掌握学生的出勤情况问题导入（5min）【教师】提出以下问题：美妆洗护类商品详情页中应包括哪些内容？【学生】聆听、思考、举手回答【教师】总结学生的回答美妆洗护类商品详情页中除了要安排宣传或促销、搭配、卖点等模块外，通常还会安排配

3、方模块，通过展示商品中含有的某些成分，让消费者更加放心地购买商品。通过问题导入，弓I导学生主动思考,激发学生的学习兴趣任务实施（38min）【教师】洪解设计口红详情页的具体步骤，并要求学生以小组为单位完成相关任务【教师】组织学生扫码观看”设计口红详情页”视频（详见教材），让学生对设计过程有一个大致地了解1.设计思路（1）模块安排：页头安排宣传内容，吸引消费者注意；然后安排卖点模块，让消费者了解口红的独特之处；最后安排口红色号展示模块，方便消费者根据自己的喜好选择口红。通过设计口红详情页任务,帮助学生熟悉设计美妆洗护类商品详情页的流程和方法（2）配色分析：整个页面以中国红和复古青为主色，用金黄色

4、点缀，配以中国传统纹样，使画面具有浓郁的中国风，显得十分有韵味，同时与口红膏体上的中国古典雕花相呼应.*【教师】提出以下问题，随机邀请学生进行回答口红洋情页的布局方式应该使用哪一种?为什么？*【学生】聆听、思考、回答【教师】总结学生的回答，并通过多媒体展示“红详情页效果”图片（详见教材）（3）布局方式：采用延伸布局方式,让模块之间的关联性增强、画面的层次感增强。【教师】让学生分组讨论设计思路【学生】组内讨论、确定思路、由小组代表发表讨论结果【教师】点评、总结各组的发言2.设计步骤1）制作宣传模块【教师】演示并讲解设计步骤及具体操作步骤I新建一个名为口红详情页，宽度为750像素，高度自定，分辨率

5、为72像素，英寸，颜色模式为RGB模式的文档。步骤2置入本书配套素材背景素材jpg花素材png文件，并为花素材添加投影图层样式。步骤3打开项目5中制作的口红主图psd文件，选中口红及其阴影所在图层，将其复制到“口红详情页文档中。步骤4在背景素材左上角添加文本，并为其添加图层样式.【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作宣传模块任务【教师】巡堂辅导、答疑解惑2）制作卖点模块【教师】演示并讲解设计步骤及具体操作步骤I置入”形状素材png文件，复制该文件并将复制文件适当缩放，使其上方和下方都显示部分原形状素材,最后为原形状素材添加渐变叠加图

6、层样式。步骤2置入形状素材Lpng文件，并为其添加图层样式。步骤3置入IMG_9683.jpg文件，并将其剪贴于形状素材1图层中（将该图层置于形状素材1图层上方，然后将光标移至两个图层之间，当光标呈状时单击即可）。此时发现图片在红色背景的衬托下显得有些苍白，用CameraRaw滤镜进行调整。步骤4在形状素材I上方添加标题，并为其添加投影图层样式。步骤5复制形状素材和形状素材副本，然后调整其位置和高度，接着将位于上方的形状素材转换为普通图层，并为其填充深青色（#105766）.步骤6置入中国传统纹样.png文件，并将其剪贴于栅格化的形状素材图层中。步骤7新建一个图层，然后绘制一个宽度为200像素

7、、高度为380像素的浅黄色（#fffceb）矩形，并为其添加描边图层样式。【教师】讲解“源远流长”的内容（详见教材），引导学生了解中国传统纹样，深刻领会中华传统文化的源远流长步骤8再绘制一个宽度为200像素、高度为270像素的矩形,并使其与步骤7中创建的矩形顶端和左侧对齐，然后置入本书配套素材IMG_9674.jpg”文件，并将其剪贴于矩形中。步骤9选中并复制形状素材1,按i,ShiftCtrl组合键将复制的图层移至最顶层，然后调整其大4厢位置，并将其图层右侧的图标拖至删除图层按钮上删除图层样式，最后为其添加新的图层样式。步骤10在图片的上方和下方分别添加文本。步骤11复制两份步骤7至步骤1（

8、）创建的图层并修改内容。复制步骤4创建的标题并修改内容，然后为其应用宣传模块文本的图层样式。【教师】通过多媒体展示“绘制红色背景”“绘制形状”“复制形状并置入图片”图片（详见教材），随机邀请学生进行回答对比一下红色和深红色两种颜色优化图片的时候有哪些方式可以直接精准使用不同的颜色？【学生】聆听、观看、思考、回答【教师】总结学生的回答步骤12为图像编辑区下半部分添加红色（#e42317）背景。步骤】3用矩形工具绘制一个宽度为565像素、高度为600像素的矩形，然后用“椭圆工具在矩形上方绘制一个宽度为565像素、高度为565像素的正圆，同时选中两个形状图层，按cm+E”组合键将其合并，接着将其转换

9、为普通图层并填充深红色（#cal908）步骤14拷贝步骤13创建的形状，并调整其大小和位置，然后置入本书配套素材IMG_9654.jpg文件，并将其剪贴于复制的形状中，最后在形状上方添加标题（与步骤4中标题的参数相同）步骤15拷贝步骤5创建的图层，并将其向下移动，然后置入本书配套素材纹理素材Jpg文件，并将其剪贴于形状素材拷贝4图层（拷贝的栅格化图层）中，最后设置其图层混合模式为柔光。步骤16置入本书配套素材IMG_9676.jpgIMG_9678.jpg文件，并对其进行抠图处理，然后按Qrl+U组合键,打开“色相/饱和度”对话框,在其中设置饱和度为30后单击确定按钮,接着为其添加投影图层样式

10、，最后在图片上方添力时示题（与步骤H中标题的参数相同）【学生】聆听、观看、理解、记忆【教师】让学生分组由谛昨【学生】组内分工，根据本组的设计思路完成制作卖点模块任务【教师】巡堂辅导、答疑解惑3）制作口红色号展示模块【教师】演示并讲解设计步骤及具体操作步骤I添加模块标题（与制作卖点模块步骤4中标题的参数相同），然后置入本书配套素材形状素材2.jpgw文件，接着在形状素材2上绘制一个宽度为385像素、高度为235像素的圆角矩形（设置圆角矩形半径为30像素），并设置其填充色为任意颜色，描边为无，最后置入本书配套素材IMG_7126西柚红Jpg文件，并将其剪贴于圆角矩形中。步骤2在图片左侧添加文本，并

11、在文本之间添加分割线。步骤3复制三份步骤1（除标题外）和步骤2中创建的图层并修改内容。至此，口红详情页制作完成。【学生】聆听、观看、理解、记忆【教师】让学生分组进彳亍制作【学生】组内分工，根据本组的设计思路完成制作口红色号展示模块任务【教师】巡堂辅导、答疑解惑【学生】制作完成后，由小组代表展示本组设计的商品详情页图片【教师】与学生一起评选出最佳的商品详情页第二节课问题导入（3min）【教师】提出以下问题：家居用品类商品详情页中应设计哪些模块？【学生】聆听、思考、举手回答【教师】总结学生的回答家居用品类商品与人们的日常生活密切相关，其安全性至关重要。因此，这类商品详情页中除了要安排前面所涉及的模

12、块外，通常还会安排展示检测报告的模块，让消费者可以放心购买商品。通过问题导入，弓I导学生主动思考，激发学生的学习兴趣任务实施（27min）【教师】讲解设计保温杯详情页的具体步骤，并要求学生以小组为单位完成相关任务【教师】组织学生扫码观看“设计保温杯详情页”视频（详见教材），让学生对设计过程有一个大致地了解通过设计保温杯详情页任务，帮助学生熟悉设计家居用品类商品详情页的1.设计思路(1)模块安排：页头安排宣传内容，吸引消费者注意；接下来安排卖点模块，让消费者了解保温杯的特点；最后为保温杯详细信息模块，让消费者全面了解保温杯。【教师】随机邀请学生进行回答保温杯详情页的页面配色使用哪一种好？为什么？

13、【学生】聆听、思考、回答【教师】总结学生的回答(2)配色分析：整个页面以橙色为主色，给人温暖、舒适的感觉，贴合保温杯的特性；大部分文案颜色采用黑色，辅以橙色点缀，既能突出商品信息，又能保证画面和谐统一。【教师】随机邀请学生进行回答哪一种布局方式更适合保温杯详情页？【学生】聆听、思考、回答【教师】总结学生的回答(3)布局方式:采用层售和错位布局方式，可以增强画面的层次感和动感。【教师】让学生分组讨论设计思路【学生】组内讨论、确定思路、由小组代表发表讨论结果【教师】点评、总结各组的发言2.设计步骤1)制作宣传模块【教师】演示并讲解设计步骤及具体操作步骤1新建一个名为“保温杯详情页，宽度为750像素

14、，高度自定，分辨率为72像素/英寸，颜色模式为RGB模式的文档。步骤2置入本书配套素材IMG_9715.jpg文件，并将其转换为普通图层，然后用矩形选框工具圆度选图片顶部背景，并用变换工具调整其高度，最后在图片上方添加文本。步骤3在背景图层上方新建一个图层，然后绘制一个宽度为750像素、高度为300像素的橙色(#ff9747)矩形，接着置入本书配套素材保温杯图标png文件并放在合适的位置，最后在图标下方添加文本。步骤4选中保温杯图片图层，并为其添加图层蒙版，然后用矩形选框工具框选图片底部，选择渐变工具，单击工具属性栏的，在打开的渐变编辑器”对话框中选择“基本设置项下的“黑，白渐变，接着在选区内

15、自下而上拖动鼠标，使图片与图标背景过渡自然，最后用画笔工具”进行细致调整。流程和方法【学生】聆听、观看、理解、记忆【教师】让学生分组曲词作【学生】组内分工，根据本组的设计思路完成制作宣传模块任务【教师】巡堂辅导、答疑解惑2）制作卖点模块【教师】演示并讲解设计步骤及具体操作步骤I创建第一个卖点模块的标题，并将其中“补水两个字的字体颜色单独设置为橙色（#ff9747）,然后在其右侧添加图形装饰。步骤2在标题下方放置本书酉虚素材IMG_9718.jpg文件.步骤3复制步骤1创建的标题并修改内容，然后在其下方放置本书配套素材IMG_9755.jpg文件，接着在其右侧绘制一个宽度为265像素、高度为265像素的正圆，并设置其填充色为任意颜色，描边为无，最后置入本书配套素材IMG_9720.jpg文件,并将其剪贴于正圆中。步骤4添加文本并绘制线