《商品信息采编》（文求实）719-8 教案 第19课 设计美妆洗护类和家居用品类商品详情页

PAGE10PAGE10PAGE11PAGE11

课题设计美妆洗护类和家居用品类商品详情页课时2课时（90min）教学目标知识技能目标：（1）了解美妆洗护类和家居用品类商品详情页的模块安排（2）能够完成美妆洗护类和家居用品类商品详情页的设计工作素质目标：能够将中国传统纹样应用到设计中，为作品增添文化内涵教学重难点教学重点：美妆洗护类和家居用品类商品详情页的设计教学难点：美妆洗护类和家居用品类商品详情页的设计教学方法问答法、讨论法、讲授法、实践法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：→→→任务实施（38min）第2节课：→任务实施（27min）→课堂讨论（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，预习本节课要学习的知识【学生】完成课前任务通过课前任务，使学生预习本节课要学习的知识，增加学生的学习兴趣考勤（2min）【教师】使用文旌课堂APP进行签到【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题：美妆洗护类商品详情页中应包括哪些内容？【学生】聆听、思考、举手回答【教师】总结学生的回答美妆洗护类商品详情页中除了要安排宣传或促销、搭配、卖点等模块外，通常还会安排配方模块，通过展示商品中含有的某些成分，让消费者更加放心地购买商品。通过问题导入，引导学生主动思考，激发学生的学习兴趣任务实施（38min）【教师】讲解设计口红详情页的具体步骤，并要求学生以小组为单位完成相关任务✈【教师】组织学生扫码观看“设计口红详情页”视频（详见教材），让学生对设计过程有一个大致地了解设计思路（1）模块安排：页头安排宣传内容，吸引消费者注意；然后安排卖点模块，让消费者了解口红的独特之处；最后安排口红色号展示模块，方便消费者根据自己的喜好选择口红。（2）配色分析：整个页面以中国红和复古青为主色，用金黄色点缀，配以中国传统纹样，使画面具有浓郁的中国风，显得十分有韵味，同时与口红膏体上的中国古典雕花相呼应。✈【教师】提出以下问题，随机邀请学生进行回答口红详情页的布局方式应该使用哪一种？为什么？✈【学生】聆听、思考、回答✈【教师】总结学生的回答，并通过多媒体展示“口红详情页效果”图片（详见教材）（3）布局方式：采用延伸布局方式，让模块之间的关联性增强、画面的层次感增强。【教师】让学生分组讨论设计思路【学生】组内讨论、确定思路、由小组代表发表讨论结果【教师】点评、总结各组的发言2.设计步骤1）制作宣传模块【教师】演示并讲解设计步骤及具体操作步骤1新建一个名为“口红详情页”，宽度为750像素，高度自定，分辨率为72像素/英寸，颜色模式为RGB模式的文档。步骤2置入本书配套素材“背景素材.jpg”“花素材.png”文件，并为花素材添加投影图层样式。步骤3打开项目5中制作的“口红主图.psd”文件，选中口红及其阴影所在图层，将其复制到“口红详情页”文档中。步骤4在背景素材左上角添加文本，并为其添加图层样式。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作宣传模块任务【教师】巡堂辅导、答疑解惑2）制作卖点模块【教师】演示并讲解设计步骤及具体操作步骤1置入“形状素材.png”文件，复制该文件并将复制文件适当缩放，使其上方和下方都显示部分原形状素材，最后为原形状素材添加渐变叠加图层样式。步骤2置入“形状素材1.png”文件，并为其添加图层样式。步骤3置入“IMG_9683.jpg”文件，并将其剪贴于形状素材1图层中（将该图层置于形状素材1图层上方，然后将光标移至两个图层之间，当光标呈状时单击即可）。此时发现图片在红色背景的衬托下显得有些“苍白”，用CameraRaw滤镜进行调整。步骤4在形状素材1上方添加标题，并为其添加投影图层样式。步骤5复制形状素材和形状素材副本，然后调整其位置和高度，接着将位于上方的形状素材转换为普通图层，并为其填充深青色（#105766）。步骤6置入“中国传统纹样.png”文件，并将其剪贴于栅格化的形状素材图层中。步骤7新建一个图层，然后绘制一个宽度为200像素、高度为380像素的浅黄色（#fffceb）矩形，并为其添加描边图层样式。✈【教师】讲解“源远流长”的内容（详见教材），引导学生了解中国传统纹样，深刻领会中华传统文化的源远流长步骤8再绘制一个宽度为200像素、高度为270像素的矩形，并使其与步骤7中创建的矩形顶端和左侧对齐，然后置入本书配套素材“IMG_9674.jpg”文件，并将其剪贴于矩形中。步骤9选中并复制形状素材1，按“Shift+Ctrl+】”组合键将复制的图层移至最顶层，然后调整其大小和位置，并将其图层右侧的图标拖至“删除图层”按钮上删除图层样式，最后为其添加新的图层样式。步骤10在图片的上方和下方分别添加文本。步骤11复制两份步骤7至步骤10创建的图层并修改内容。复制步骤4创建的标题并修改内容，然后为其应用宣传模块文本的图层样式。✈【教师】通过多媒体展示“绘制红色背景”“绘制形状”“复制形状并置入图片”图片（详见教材），随机邀请学生进行回答对比一下红色和深红色两种颜色，优化图片的时候有哪些方式可以直接精准使用不同的颜色？✈【学生】聆听、观看、思考、回答✈【教师】总结学生的回答步骤12为图像编辑区下半部分添加红色（#e42317）背景。步骤13用“矩形工具”绘制一个宽度为565像素、高度为600像素的矩形，然后用“椭圆工具”在矩形上方绘制一个宽度为565像素、高度为565像素的正圆，同时选中两个形状图层，按“Ctrl+E”组合键将其合并，接着将其转换为普通图层并填充深红色（#ca1908）。步骤14拷贝步骤13创建的形状，并调整其大小和位置，然后置入本书配套素材“IMG_9654.jpg”文件，并将其剪贴于复制的形状中，最后在形状上方添加标题（与步骤4中标题的参数相同）。步骤15拷贝步骤5创建的图层，并将其向下移动，然后置入本书配套素材“纹理素材.jpg”文件，并将其剪贴于“形状素材拷贝4”图层（拷贝的栅格化图层）中，最后设置其图层混合模式为“柔光”。步骤16置入本书配套素材“IMG_9676.jpg”“IMG_9678.jpg”文件，并对其进行抠图处理，然后按“Ctrl+U”组合键，打开“色相/饱和度”对话框，在其中设置饱和度为“30”后单击“确定”按钮，接着为其添加投影图层样式，最后在图片上方添加标题（与步骤11中标题的参数相同）。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作卖点模块任务【教师】巡堂辅导、答疑解惑3）制作口红色号展示模块【教师】演示并讲解设计步骤及具体操作步骤1添加模块标题（与“制作卖点模块”步骤4中标题的参数相同），然后置入本书配套素材“形状素材2.jpg”文件，接着在形状素材2上绘制一个宽度为385像素、高度为235像素的圆角矩形（设置圆角矩形半径为30像素），并设置其填充色为任意颜色，描边为无，最后置入本书配套素材“IMG_7126西柚红.jpg”文件，并将其剪贴于圆角矩形中。步骤2在图片左侧添加文本，并在文本之间添加分割线。步骤3复制三份步骤1（除标题外）和步骤2中创建的图层并修改内容。至此，口红详情页制作完成。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作口红色号展示模块任务【教师】巡堂辅导、答疑解惑【学生】制作完成后，由小组代表展示本组设计的商品详情页图片【教师】与学生一起评选出最佳的商品详情页通过设计口红详情页任务，帮助学生熟悉设计美妆洗护类商品详情页的流程和方法第二节课问题导入（3min）【教师】提出以下问题：家居用品类商品详情页中应设计哪些模块？【学生】聆听、思考、举手回答【教师】总结学生的回答家居用品类商品与人们的日常生活密切相关，其安全性至关重要。因此，这类商品详情页中除了要安排前面所涉及的模块外，通常还会安排展示检测报告的模块，让消费者可以放心购买商品。通过问题导入，引导学生主动思考，激发学生的学习兴趣任务实施（27min）【教师】讲解设计保温杯详情页的具体步骤，并要求学生以小组为单位完成相关任务✈【教师】组织学生扫码观看“设计保温杯详情页”视频（详见教材），让学生对设计过程有一个大致地了解1.设计思路（1）模块安排：页头安排宣传内容，吸引消费者注意；接下来安排卖点模块，让消费者了解保温杯的特点；最后为保温杯详细信息模块，让消费者全面了解保温杯。✈【教师】随机邀请学生进行回答保温杯详情页的页面配色使用哪一种好？为什么？✈【学生】聆听、思考、回答✈【教师】总结学生的回答（2）配色分析：整个页面以橙色为主色，给人温暖、舒适的感觉，贴合保温杯的特性；大部分文案颜色采用黑色，辅以橙色点缀，既能突出商品信息，又能保证画面和谐统一。✈【教师】随机邀请学生进行回答哪一种布局方式更适合保温杯详情页？✈【学生】聆听、思考、回答✈【教师】总结学生的回答（3）布局方式：采用层叠和错位布局方式，可以增强画面的层次感和动感。【教师】让学生分组讨论设计思路【学生】组内讨论、确定思路、由小组代表发表讨论结果【教师】点评、总结各组的发言2.设计步骤1）制作宣传模块【教师】演示并讲解设计步骤及具体操作步骤1新建一个名为“保温杯详情页”，宽度为750像素，高度自定，分辨率为72像素/英寸，颜色模式为RGB模式的文档。步骤2置入本书配套素材“IMG_9715.jpg”文件，并将其转换为普通图层，然后用“矩形选框工具”框选图片顶部背景，并用变换工具调整其高度，最后在图片上方添加文本。步骤3在背景图层上方新建一个图层，然后绘制一个宽度为750像素、高度为300像素的橙色（#ff9747）矩形，接着置入本书配套素材“保温杯图标.png”文件并放在合适的位置，最后在图标下方添加文本。步骤4选中保温杯图片图层，并为其添加图层蒙版，然后用“矩形选框工具”框选图片底部，选择“渐变工具”，单击工具属性栏的，在打开的“渐变编辑器”对话框中选择“基本”设置项下的“黑，白渐变”，接着在选区内自下而上拖动鼠标，使图片与图标背景过渡自然，最后用“画笔工具”进行细致调整。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作宣传模块任务【教师】巡堂辅导、答疑解惑2）制作卖点模块【教师】演示并讲解设计步骤及具体操作步骤1创建第一个卖点模块的标题，并将其中“补水”两个字的字体颜色单独设置为橙色（#ff9747），然后在其右侧添加图形装饰。步骤2在标题下方放置本书配套素材“IMG_9718.jpg”文件。步骤3复制步骤1创建的标题并修改内容，然后在其下方放置本书配套素材“IMG_9755.jpg”文件，接着在其右侧绘制一个宽度为265像素、高度为265像素的正圆，并设置其填充色为任意颜色，描边为无，最后置入本书配套素材“IMG_9720.jpg”文件，并将其剪贴于正圆中。步骤4添加文本并绘制线条和矩形，制作保温测试部分。步骤5复制步骤3修改的标题并再次修改内容，然后在其下方绘制一个宽度为750像素、高度为400像素的浅灰色（#ffdcae）矩形，接着在矩形上再绘制一个宽度为430像素、高度为400像素的矩形，使其与前一个矩形顶端和右侧对齐，最后置入本书配套素材“IMG_9733.jpg”文件，并将其水平翻转后剪贴于刚创建的矩形中。步骤6在图片左侧添加文本和矩形装饰。步骤7复制三份步骤5和步骤6创建的图层（除标题外）并修改内容。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作卖点模块任务【教师】巡堂辅导、答疑解惑3）制作商品参数模块【教师】演示并讲解设计步骤及具体操作步骤1添加商品参数模块的标题。步骤2在标题下方添加文本，并在文本之间添加分割线。至此，保温杯详情页制作完成。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作商品参数模块任务【教师】巡堂辅导、答疑解惑【学生】制作完成后，由小组代表展示本组设计的商品详情页图片【教师】与学生一起评选出最佳的商品详情页通过设计保温杯详情页任务，帮助学生熟悉设计家居用品类商品详情页的流程和方法课堂讨论（10min）【教师】组织学生分组讨论电风扇详情页的设计思路参照以下提示梳理电风扇详情页的设计思路。（1）确定模块安排：确定电风扇详情页中安排哪些模块，并根据模块安排确定具体内容，包括图片和文案。（2）确定配色方案：可以商品颜色为主色，从而获得和谐统一的画面效果。（3）确定布局方式：根据模块及模块中的元素安排选择合适的布局方式。组内讨论、确定思路、由小组代表发表讨论结果【教师】点评各组的发言通过小组讨论，帮助学生进一步巩固所学知识课堂小结（3min）【教师】简要总结本节课的要点本节课学习了设计美妆洗护类和家居用品类商品详情页的相关知识，同时通过具体的设计任务，帮助大家熟悉了这两类商品详情