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

广东省技工学校文化理论课教案（首页）（代号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.打开模板素材.JPG

2.在本实例中选择水平划分图片，打开“切片工具”选择工具，在图片上单击，打开“划片切片”对话框。

3.