《商品信息采编》（文求实）719-8 教案 第13课 设计服装配饰类和数码电器类商品主图

PAGE10PAGE10PAGE11PAGE11

课题设计服装配饰类和数码电器类商品主图课时2课时（90min）教学目标知识技能目标：（1）了解商品主图（2）掌握商品主图的构图方式（3）了解服装配饰类和数码电器类商品主图的内容安排（4）能够完成服装配饰类和数码电器类商品主图的设计工作素质目标：增强知识产权保护意识教学重难点教学重点：服装配饰类和数码电器类商品主图的设计教学难点：服装配饰类和数码电器类商品主图的设计教学方法问答法、讨论法、讲授法、实践法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：→→→传授新知（15min）→任务实施（23min）第2节课：→任务实施（25min）→课堂讨论（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，预习本节课要学习的知识【学生】完成课前任务通过课前任务，使学生预习本节课要学习的知识，增加学生的学习兴趣考勤（2min）【教师】使用文旌课堂APP进行签到【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题：王多多完成了商品图片的美化工作，接下来开始设计网店页面中的各个部分，包括商品主图、海报和短视频等。那么，什么是商品主图？【学生】聆听、思考、举手回答通过问题导入，引导学生主动思考，激发学生的学习兴趣传授新知（15min）【教师】通过学生的回答引入要讲的知识，讲解商品主图的相关知识5.1.1商品主图简介✈【教师】通过多媒体展示“搜索结果中的商品主图”和“商品详情页中的商品主图”图片（详见教材），并进行讲解狭义的商品主图是指消费者用电商平台的搜索功能搜索关键字后，在搜索结果中显示的商品图片，通常此图也是商品详情页顶部左侧显示的第一幅图片。✈【教师】提出以下问题，随机邀请学生进行回答商品主图能够起到什么作用？✈【学生】聆听、思考、回答✈【教师】总结学生的回答优质的商品主图能起到吸引消费者眼球，使消费者对商品产生兴趣，从而促成点击的作用。商品主图通常带有放大镜功能，尺寸一般在700像素×700像素以上（大多为800像素×800像素），大小小于500kB，多使用JPG或PNG格式。【知识链接】商广义的商品主图是指商品详情页顶部左侧显示的所有图片。5.1.2商品主图的构图方式✈【教师】提出以下问题，随机邀请学生进行回答商品主图中一般包括哪些内容？✈【学生】聆听、思考、回答✈【教师】总结学生的回答商品主图中通常包括图片、文案和背景等元素，在设计商品主图时应根据图片和文案选择合适的构图方式，使画面中的各元素相互呼应并达到平衡。✈【教师】通过多媒体展示“沉底式构图”“左右式构图”“灵活运用式构图”图片（详见教材），并进行讲解商品主图常见的构图方式有以下几种。（1）沉底式：是指将图片或大量文案置于画面底部，使画面“头轻脚重”的构图方式。这是商品主图最常用的一种构图方式，能获得舒适的画面效果。（2）左右式：是指画面的一侧放置文案，另一侧放置图片的构图方式。采用这种构图方式的画面看起来非常有层次感。（3）灵活运用式：是指不拘泥于一种固定形式，而是根据商品位置调整文案摆放位置，从而形成协调融洽的画面效果的构图方式。【知识链接】一些商品主图会沿用商品图片的构图方式，然后在图片的左上角或右上角加入品牌标志。另外，设计商品主图时，要避免画面凌乱、主题混乱、字体风格与文案内容背离、颜色搭配失衡、装饰图案烦琐等问题。5.1.3服装配饰类商品主图的内容安排✈【教师】提出以下问题，随机邀请学生进行回答服装配饰类商品主图中一般会安排什么内容？✈【学生】聆听、思考、回答✈【教师】总结学生的回答在设计服装配饰类商品主图时，通常会安排以下内容。（1）商品图片：这是商品主图必不可少的一部分，用以展示商品的外观，让消费者快速了解商品。（2）品牌标志：可以让消费者在了解商品的同时提高对品牌的关注度。【课堂思政】讲述“治国重器”的内容（详见教材），进行课堂思政，让学生了解知识产权的相关知识（3）卖点：可以让消费者了解商品的亮点。（4）优惠信息：能吸引消费者注意，从而促成点击。【学生】聆听、思考、记录通过教师讲解和课堂讨论等方式，使学生了解商品主图的概念、构图方式，以及服装配饰类商品主图的内容安排等相关知识任务实施（23min）【教师】讲解设计针织衫主图的具体步骤，并要求学生以小组为单位完成相关任务✈【教师】组织学生扫码观看“设计针织衫主图”视频（详见教材），让学生对设计过程有一个大致地了解设计思路内容安排：选择由模特展示的针织衫图片，让消费者直观地了解针织衫的实际穿着效果；添加品牌标志，加深消费者对品牌的认识；加入卖点和优惠信息，让消费者对针织衫产生浓厚的兴趣。配色分析：用白色作为文案的主色，能与图中针织衫的颜色相呼应；将优惠价文案的颜色单独设置为黄色，不仅醒目，可让消费者快速捕捉关键信息，还与图中的黄色元素（如模特的发色）相呼应，使画面效果更加和谐。✈【教师】通过多媒体展示“针织衫主图效果”图片（详见教材），并随机邀请学生进行回答针织衫使用哪种构图方式比较好呢，为什么？✈【学生】聆听、思考、回答✈【教师】总结学生的回答（3）构图方式：采用左右式构图，且文案浮于图片上方，使画面极具层次感。【教师】让学生分组讨论设计思路【学生】组内讨论、确定思路、由小组代表发表讨论结果【教师】点评、总结各组的发言设计步骤【教师】演示并讲解设计步骤及具体操作步骤1启动Photoshop2020，按“Ctrl+N”组合键打开“新建文档”对话框，在其中设置相关参数后，单击“创建”按钮创建文档。选择“文件”→“置入嵌入对象”菜单项，打开“置入嵌入的对象”对话框，从中选择本书配套素材“素材与实例”→“项目5”→“针织衫”文件夹中的“IMG_9340.jpg”文件，单击“置入”按钮置入图片。在图片上右击，从弹出的快捷菜单中选择“水平翻转”项，然后调整图片大小并将其移至合适位置，最后按“Enter”键确认。步骤2选择“矩形工具”，在图像编辑区左侧单击，在打开的“创建矩形”对话框中设置矩形大小后单击“确定”按钮，然后在工具属性栏中设置填充色为黑色，描边为无，最后在“图层”面板的“不透明度”编辑框中输入“30%”，并按“Enter”键确认设置矩形的不透明度。【知识链接】描边色的设置方法和填充色的设置方法相同。步骤3采用步骤2的方法绘制一个宽度为260像素、高度为50像素的黑色矩形，并设置其图层不透明度为“50%”。步骤4选择“横排文字工具”，然后在工具属性栏设置相关参数，接着在步骤3创建的矩形左侧单击，当出现闪烁的“I”时，输入文本“NEW2022”，并按“Esc”键结束输入。步骤5采用步骤4的方法添加其他文本并设置文本属性，如图所示。在文本“8”后单击插入光标，按住鼠标左键并向左拖动直至选中文本“198”，然后在工具属性栏设置字体大小为“48点”，接着设置前景色为黄色（#ff9c00），此时选中的文本自动变为黄色，最后按“Esc”键确认。【课堂思政】讲述“世界上最美的文字——中文”的内容（详见教材），并进行课堂思政，增强学生的民族自豪感，坚定文化自信步骤6双击“秋季新品”图层空白处，在打开的“图层样式”对话框中单击并勾选“投影”复选框，然后在对话框右侧设置相关参数，为其添加投影图层样式。步骤7在“秋季新品”图层上右击，从弹出的快捷菜单中选择“拷贝图层样式”项，然后在“镂空时尚系列”图层上右击，从弹出的快捷菜单中选择“粘贴图层样式”项，为“镂空时尚系列”文本也添加投影图层样式。利用“图层样式”对话框为“限时198元”文本添加内发光图层样式。至此，针织衫主图制作完成。【知识链接】如果要让多个图层按照一定的方式对齐或分布，可在选择“移动工具”的情况下，单击工具属性栏中的对齐与分布按钮。【学生】聆听、观看、理解、记忆【教师】让学生分组进行设计【学生】组内分工，根据本组的设计思路完成设计主图任务【教师】巡堂辅导、答疑解惑【学生】设计完成后，由小组代表展示本组设计的商品主图【教师】与学生一起评选出最佳商品图片通过设计针织衫主图任务，帮助学生熟悉服装配饰类商品主图的设计流程和设计方法第二节课问题导入（5min）【教师】提出以下问题：数码电器类商品主图中应安排哪些内容？【学生】聆听、思考、举手回答【教师】总结学生的回答数码电器类商品主图中除了放置商品图片、品牌标志、卖点、优惠信息外，通常还会放置赠送信息，以吸引消费者点击观看。通过问题导入，引导学生主动思考，激发学生的学习兴趣任务实施（25min）【教师】讲解设计移动硬盘主图的具体步骤，并要求学生以小组为单位完成相关任务✈【教师】组织学生扫码观看“设计移动硬盘主图”视频（详见教材），让学生对设计过程有一个大致地了解1．设计思路（1）内容安排：选择灰白色几何背景，以增加画面的科技感；添加移动硬盘斜侧角度图片，以便于消费者从多角度了解移动硬盘的外观；添加品牌标志，加深消费者对品牌的认识；加入卖点、优惠和赠送信息，以吸引消费者注意。（2）配色分析：用品牌标志颜色（红色）作为文案颜色或文案底图颜色，既可以获得和谐统一的画面效果，又可以引导消费者识别品牌。（3）构图方式：采用左右式构图，可以获得具有一定平衡感的画面。【教师】让学生分组讨论设计思路【学生】组内讨论、确定思路、由小组代表发表讨论结果【教师】点评、总结各组的发言2．设计步骤【教师】演示并讲解设计步骤及具体操作步骤1打开本书配套素材“素材与实例”→“项目5”→“移动硬盘”文件夹中的“移动硬盘主图背景.jpg”文件，然后置入“IMG_9547.jpg”文件，调整其大小并移至合适的位置后按“Enter”键确定。步骤2选择“魔棒工具”，在工具属性栏设置容差为“50”，然后单击移动硬盘图片的白色背景，接着按住“Alt”键的同时单击“图层”面板底部的“添加图层蒙版”按钮，抠取移动硬盘。步骤3按“Ctrl+J”组合键拷贝移动硬盘图层，然后按“Ctrl+T”组合键调出变换框并右击，从弹出的快捷菜单中选择“垂直翻转”项，接着按住“Shift”键的同时将拷贝的移动硬盘向下拖动至其顶点与原移动硬盘的底点重合后释放鼠标，按住“Ctrl”键的同时移动变换框左上角的角点，直至拷贝的移动硬盘的顶边与原移动硬盘的底边重合后释放鼠标，并按“Enter”键确认，最后按“Ctrl+【”组合键将该图层下移一层。步骤4在拷贝的移动硬盘图层上右击，从弹出的快捷菜单中选择“栅格化图层”项，然后在其图层蒙版缩览图上右击，从弹出的快捷菜单中选择“应用图层蒙版”项。再为其添加一个图层蒙版，选择“渐变工具”，单击工具属性栏的，在打开的“渐变编辑器”对话框中选择“基础”设置项下的“黑，白渐变”，单击“确定”按钮，最后在图像编辑区自下而上拖动鼠标，移动硬盘倒影效果即制作完成。步骤5选择“圆角矩形工具”，在工具属性栏设置半径为“50像素”，然后在图像编辑区单击，在打开的“创建矩形”对话框中设置圆角矩形的宽度为350像素、高度为80像素，接着在工具属性栏设置填充色为红色（#e60005），描边为无。将光标移至圆角矩形上并按住“Alt”键，当光标呈状时向下拖动鼠标将其复制，采用同样的方法再复制一个圆角矩形。步骤6用“横排文字工具”在圆角矩形上添加文本并设置文本属性（字体样式为“方正兰亭特黑简体”，字体大小为“42点”）。步骤7置入本书配套素材“移动硬盘标志.gif”文件，然后用步骤2的方法对其进行抠图处理，接着调整其大小并移至合适的位置。步骤8置入本书配套素材“礼包图标.jpg”文件，对其进行抠图处理，并调整其大小和位置，然后在其右侧添加文本“送大礼包”，设置字体样式为“方正兰亭特黑简体”，字体大小为“32点”，字体颜色为红色（#e60005）。用“矩形工具”绘制一个宽度为248像素、高度为90像素的矩形，并设置其填充为无，描边色为红色（#e60005），描边宽度为2像素。至此，移动硬盘主图制作完成。【学生】聆听、观看、理解、记忆【教师】让学生分组进行设计【学生】组内分工，根据本组的设计思路完成设计主图任务【教师】巡堂辅导、答疑解惑【学生】设计完成后，由小组代表展示本组设计的商品主图【教师】与学生一起评选出最佳商品图片通过设计移动硬盘主图任务，帮助学生熟悉数码电器类商品主图的设计流程和设计方法课堂讨论（10min）【教师】组织学生分组讨论设计音响主图的设计思路参照以下提示梳理音响主图的设计思路。（1）确定主图内容：确定音响主图中放置哪些内容，并根据放置的内容确定具体文案。（2）确定配色方案：此款音响的目标消费者大多是男性，可从该角度考虑配色方案。（3）确定构图方式：根据图片和文案选择合适的构图方式。组内讨论、确定思路、由小组代表发表讨论结果【教师】点评各组的发言通过小组讨论，帮助学生进一步巩固所学知识课堂小结（3min）【教师】简要总结本节课的要点本节课学习了商品主图的概念、构图方式，以及服装配饰类和数码电器类商品主图的内容安排等相关知识，同时通过具体的设计任务，帮助大家熟悉了这两类商品主图的设计流