6.3制作商品详情页(课件）-《电商视觉营销》同步教学（西南财经大学出版社）

详情页视觉设计 项目六 1 YCF 01 详情页布局 03 制作商品详情页 02 详情页设计理念 目录 CATALOG 2 思政课堂 2020 年年初，一场新型冠状病毒肺炎疫情席卷全国。在我国政府的正确引导下，中国人民战胜了疫情。请你为一家生产口罩的企业设计网店详情页，要求突出“战疫”元素，突出中国的医生、护士、大众对疫情的抗争。请将你的设计思路写在下面，并思考中国能够获得“抗疫”胜利的原因。 3 详情页视觉设计是针对网店中某个商品的视觉营销。详情页视觉设计的质量决定了被浏览的商品是否会转化为订单。详情页视觉设计是一项具体而细致的工作，要考虑到经营者和消费者的双重需求，尽可能高效率地利用有限的空间展示商品，通过店铺的整体风格和内部设计为消费者提供便捷、舒适的网络购物环境，形成美好的购物经历。 项目导读 01 掌握网店商品详情页的布局。 02 理解网店商品详情页设计的主要思路。 学习目标 03 能够制作详情页焦点图。 04 能够制作详情页搭配建议模块。 05 能够制作商品亮点图。 06 能够制作详情页商品展示图。 07 能够制作详情页商品细节图。 03 制作商品详情页 一、制作详情页焦点图 二、制作商品展示图 三、制作商品亮点图 四、制作商品细节图 五、制作商品规格图 六、制作商品功能展示图 6 一、制作详情页焦点图 步骤1：打开Photoshop软件，选择“文件”→“新建”菜单命令，新建大小为500像素×550像素，分辨率为72像素/英寸，名称为“详情页焦点图”的文件，如图所示。 7 一、制作详情页焦点图 步骤2：选择“渐变工具” ，单击上方选项栏中的颜色条，打开“渐变编辑器”对话框，点击颜色条下方颜色色标拾取颜色，左侧色标RGB值为“242/81/20”，右侧色标RGB值为“254/134/3”，如图左所示，按住“Shif”键从左向右拖动鼠标在背景图层上填充渐变色，如图右所示。 8 一、制作详情页焦点图 步骤3：新建图层“图层1”，选择“矩形选框工具” ，在图层1上绘制一个矩形，然后选择“选择”→“修改”→“平滑”菜单命令，在打开的对话框的“取样半径”数值框中输入数值7，单击“确定”按钮，如图所示。 9 一、制作详情页焦点图 步骤4：设置前景色RGB值为“255/255/255”，选择“油漆桶工具” 将矩形填充前景色，如图所示。 10 一、制作详情页焦点图 步骤5：选择“文件”→“打开”菜单命令，打开文件“素材/项目六/香酥果仁薄脆.jpg”。新建图层2使用“移动工具” 将素材移动到图层2上，按住Alt键的同时将鼠标放到图层控制面板上“图层1”和“图层2”的中间位置单击，创建剪切蒙版，如图所示。 11 一、制作详情页焦点图 步骤6：新建图层3，点击左侧工具栏中的钢笔工具 和矩形工具 绘制几何图形，填充颜色，如图所示。 12 一、制作详情页焦点图 步骤7：点击左侧工具栏中的文字工具 ，输入文字“香酥果仁薄脆”，字体设置为“思源黑体”，字号设置为58；输入文字“香浓酥脆”、“好吃不腻”字体设置为“思源黑体”，字号设置为26；输入文字“酥/香/脆 四种口味可选”字体设置为“思源黑体”，字号设置为32；输入文字“满满果仁 营养健康 ”字体设置为“思源黑体”，字号设置为50；输入文字“活动价”字体设置为“思源黑体”，字号设置为17.04；输入文字“19.8”字体设置为“思源黑体”，字号设置为54；输入文字“NAK”字体设置为“思源黑体”，字号设置为28。同时选择“矩形工具” 和“直线工具” ，加以装饰。 13 一、制作详情页焦点图 步骤8：选择“文件”→“存储”菜单命令，存储文件“制作详情页焦点图.psd”；选择“文件”→“存储为”菜单命令，文件类型选择.png，将文件另存为“制作详情页焦点图.png”，该类型用于上传平台使用。 14 二、制作商品展示图 步骤1：打开Photoshop软件，选择“文件”→“新建”菜单命令，新建大小为790像素×450像素，分辨率为72像素/英寸，名称为“产品展开图”的文件，如图所示。 15 二、制作商品展示图 步骤2：新建图层“图层1”，选择“圆角矩形工具” ，绘制圆角矩形，如图所示。 16 二、制作商品展示图 步骤3：在图层控制面板“图层1”上右击，点击混合选项，在打开的“图层样式”对话框中添加“斜面和浮雕”“投影”效果，如图左、图右所示。 17 二、制作商品展示图 步骤4：选择“文件”→“打开”菜单命令，打开文件“素材/项目六/芝麻薄脆.jpg”。 18 二、制作商品展示图 步骤5：新建图层2使用移动工具 将素材移动到图层2上，按住Alt键的同时将鼠标放到图层控制面板上“图层1”和“图层2”的中间位置单击，创建剪切蒙版，如图所示。 19 二、制作商品展示图 步骤6：点击左侧的工具栏中的文字工具