第二章商品详情页设计(三)

广东省技工学校文化理论课教案（首页）（代号A-3）共6页科目网店美工第二章课题：商品详情页设计授课日期课时4班级授课方式讲、练结合作业题数1拟用时间90分钟教学目的1.了解商品详情页的尺寸要求2.了解详情页包含的元素3.学会使用蒙版和通道选用教具挂图网络教室电子教鞭重点1.了解详情页包含的元素2.学会使用蒙版和通道难点学会使用蒙版和通道教学回顾前面学习了如何制作商品主图说明其中讲授90分钟，练习90分钟审阅签名：教学过程（代号A—4）第2页时间分配教学过程教学方法教学手段5分钟15分钟[新课引入]：优秀的商品详情页可以激发买家的购买欲望，促使买家下单，帮组卖家树立店铺形象，提高销量，优化商品详情页对提升转化率有很大的作用[新课内容]：商品详情页的尺寸要求1.计算机端描述页面要求 每张图片的容量建议不超过2MB，图片宽度不超过750像素，商品描述页面“源码”不超过200000个字符。2.手机端（无线端）描述页面要求图片宽度要求在480~1242像素，高度小于等于1546像素；图片总容量不超过2560KB，总字数不得超过5000个字；摘要内容不超过140个字。详情页包含的元素1.基本信息基本信息模块是商品详情页最常用的模块之一，用来介绍商品的品牌、名称、型号、材质、结构以及功效等。2.产品展示卖家要精挑细选商品图片进行展示，图片不必过多，因为商品描述模板还有详细的图文说明。3.商品焦点图商品焦点图主要是提炼商品卖点，突出该商品与其他商品不同的特点，这些特点是该商品独有的。复习回顾讲授教师使用网络教室的“屏幕广播”功能进行课件和讲解。教学过程（代号A—4）第3页时间分配教学过程教学方法教学手段15分钟4.商品细节图商品细节图是近距离展示商品的亮点，对商品的每一个细节进行详细描述，从而突出商品的特殊性。购物须知是要告知买家邮费、发货时间、包装、退换货保障、售后等信息。蒙版和通道的使用蒙版保护被选取或指定的区域不受编辑操作的影响，起到遮蔽的作用。可用Alpha通道和存储选区产生蒙版。1.蒙版（1）蒙版效果遮照物作用于被遮照物，遮照物是以8位灰度通道形式存储。（2）蒙版使用通过编辑形成更复杂的选区2.通道通道就是在PhotoshopCS6环境下，将图像颜色分离成基本的颜色，每一个基本颜色使用的灰度亮度值就是一个基本的通道。主要用于存放图像的颜色分量和选区信息，是存储不同类型信息的灰度图像。（1）通道的分类讲授教师使用网络教室的“屏幕广播”功能进行课件和讲解。教学过程（代号A—4）第4页时间分配教学过程教学方法教学手段5分钟20分钟1）复合通道2）颜色通道3）专色通道4）Alpha通道5）单色通道（2）通道控制面板在通道控制面板内还包括4个命令按钮，在它们的帮助下，可以完成常用的通道操作。（3）通道的作用通道最主要的作用就是选区，特别是复杂选取的选取。技能训练一、商品焦点图的设计制作1.新建一画布，大小为750像素×500像素，背景为白色。2.打开背景图片“花.jpg”，调整大小，设置图层花的透明度3.打开商品图片“夹克.jpg”，裁切，调整大小，拖动到焦点图文件中4.为“夹克”图层添加图层蒙版，设置前景色为“黑色”，用“画笔工具”进行涂抹，去除商品图片背景。5.添加文字“NEW”，栅格化文字，对文字进行编辑和修改。6.添加其他文字7.按照效果图的设计制作所示，完成操作。讲授讲练结合教师使用网络教室的“屏幕广播”功能进行课件和讲解。教学过程（代号A—4）第5页时间分配教学过程教学方法教学手段30分钟90分钟二、产品信息图设计与制作1.新建750像素×750像素的文件，2.用椭园选框工具，按住Shift键绘制正圆，描边3.执行菜单“选择”→“修改”→“收缩命令”，将选区缩小为“5像素”，填充为“黑色”。4.用直线工具绘制直线，输入文字。5.打开“产品素材2.jpg”将产品图片拖动到产品信息下，修改大小，6.选择画笔工具，设置画笔，绘制虚线。7.输入文字8.输入产品尺码信息三、产品详情模板图的设计制作1.打开模板素材.JPG2.在本实例中选择水平划分图片，打开“切片工具”选择工具，在图片上单击，打开“划片切片”对话框。3.单击“切片工具”，移动到图片中黄色的小点上，拖动鼠标，调整切片。4.完成后，选择“存储为WEB所用的格式”，设置存储的对话框。[作业]：完成技能训练讲练结合教师使用网络教室的“屏幕广播”功能进行课件和讲解。教学