《视觉引流:网店美工操作实战》以实例和设计理论相结合的方式介绍了美工在网店装修方面的各个知识点,包括从*初的网店美工应该掌握的技能操作到网店中需要引流的模块制作和理论讲解。作者精心设计了多个与店铺视觉引流模块相关的实例,其中包含网店外部吸引流量的直通车、钻展图和店标的制作,店铺内部吸引流量的通栏广告、店招、商品广告、店铺收藏、店铺公告、详情页等知识与效果。 《视觉引流:网店美工操作实战》由一线电子商务网店美工教师和广告设计教师编写,全书共分8章,依次讲解了网店美工须掌握的基础操作、网店外部区域引流图像设计与制作、网店首屏元素设计与制作、商品广告图像设计与制作、快速导航区设计与制作、店铺公告模板设计与制作、店铺收藏与客服应用以及详情页设计与制作。 《视觉引流:网店美工操作实战》兼具技术手册和应用技巧参考手册的特点,技术实用,讲解清晰,不仅适合想自己装修店铺的初中级读者和网店美工,也可以作为大中专院校相关专业及电子商务方面培训班的教材。

第4章 商品广告图像设计与制作
本 章 重 点
950像素广告设计与制作
750像素广告设计与制作
190像素广告设计与制作
陈列区广告设计与制作
除去首屏中的广告视觉效果,在网店中还可以为宽度分别为950像素、750像素、190像素的广告以及陈列区广告进行设计与制作,以此来增加整个网店视觉效果。
提示
由于篇幅有限,本章中的案例只做简单的讲解,详细的操作大家可以参考附带的视频教程。
4.1 950像素广告设计与制作
网店中除了全屏通栏广告可以在首屏中进行展示与增加广告效果外,标准的通栏广告有时也会出现在首屏中,并且根据设计的不同也可以收获不少的视觉流量。标准通栏广告也就是淘宝网店中常说的宽度为950像素的广告,如图4-1所示。本节就以其中常用的商品整体参与设计与制作、商品局部参与设计与制作、多视点参与广告设计与制作和超出背景区域设计与制作为案例进行讲解。
图4-1 950像素的通栏广告
4.1.1 商品整体参与设计与制作
整体参与设计的图像,可以让浏览者看到商品的整体,在视觉中不会出现丢失部分图像的问题,这种设计方法常被用到传统的设计中。在图像中可以看到需要展示的整个商品,不需要进行更多的文案解释。本例中以简洁的风格制作了如图4-2所示的950像素广告效果。在设计时,单一的配色结合简洁的文案制作出此风格的广告。
图4-2 商品整体参与设计与制作
本例以家居作为设计内容,布艺沙发配以简单的吊灯、铁艺装饰以及简洁的分组布局文案让整个背景形成一种宁静舒适的感觉,再加上右边的小熊布偶,使宁静的环境出现了一点活泼氛围。下面就来讲解具体的制作步骤。
操作步骤
01 打开Photoshop软件,新建一个“宽度”为950像素、“高度”为500像素的空白文档, 设置前景色和背景色后,使用(渐变工具)填充渐变色,如图4-3所示。
图4-3 背景色制作
02 新建图层,绘制矩形选区,按Shift F5组合键打开“填充”对话框,为其填充“图案”,设置“不透明度”为11%,效果如图4-4所示。
图4-4 填充并设置不透明度
03 复制填充图案的图层,按Ctrl T组合键调出变换框,按住Ctrl键拖动控制点调整形状,效果如图4-5所示。
图4-5 复制并变换
04 使用 (自定义形状工具)绘制花纹,为其添加“斜面和浮雕”图层样式,效果如图4-6所示。
图4-6 绘制花纹并添加“斜面和浮雕”图层样式
05 复制多个花纹图层,将其转换为图层组,这样可更好地进行管理,效果如图4-7所示。
图4-7 绘制多个花纹图层并转换为图层组
06 背景制作完毕后,移入沙发素材,此时发现沙发的倒影和阴影与背景不是很搭配。为沙发所在的图层添加图层蒙版并复制图层,使用 (渐变工具)分别在蒙版中填充黑白渐变以编辑蒙版,选择下面的沙发所在的图层,设置“混合模式”为“正片叠底”,设置“不透明度”为53%,效果如图4-8所示。
图4-8 移入素材编辑蒙版
07 移入“吊灯”素材,为其添加“投影”图层样式,如图4-9所示。
图4-9 移入素材并添加投影
08 执行菜单栏中的“图层”→“图层样式”→“创建图层”命令,将投影单独变为一个图层,此时“混合模式”和“填充”会自动变为“投影”面板中的参数,再为投影图层添加图层蒙版,使用(渐变工具)编辑蒙版,效果如图4-10所示。
图4-10 编辑蒙版
09 移入“铁艺”素材复制一个副本,将副本进行垂直翻转并为其添加图层蒙版,使用 (渐变工具)编辑蒙版制作倒影效果,如图4-11所示。
图4-11 编辑倒影
10 移入“小熊布偶”素材,新建图层,在图像的右侧绘制花纹边缘,如图4-12所示。
图4-12 移入素材并绘制图形
11 分别在每个花纹边缘图形中输入文本并绘制直线和正圆,再在下方输入文字和绘制矩形,如图4-13所示。
图4-13 输入文字
12 在沙发所在的图层上方新建一个图层,并填充黑色,为图层添加图层蒙版后,再使用(渐变工具)编辑蒙版,如图4-14所示。
图4-14 编辑蒙版
13 至此,本例制作完毕,效果如图4-15所示。
图4-15 商品整体参与设计与制作*终效果

第1章 网店美工须掌握的基础操作 1.1 网店配色基础 001 1.1.1 色彩原理 001 1.1.2 网页**色 003 1.1.3 网店色彩分类 006 1.1.4 网店色彩采集 008 1.1.5 识别色域以外的颜色 009 1.1.6 网店页面色彩搭配 010 1.1.7 网店图像配色 021 1.2 网店图像的布局 024 1.2.1 图片基本构图 024 1.2.2 图像中文本布局规则 026 1.2.3 图像参与布局的规则 029 1.2.4 版面布局设计 031 1.3 美工修图基础 032 1.3.1 宝贝图片色调调整 032 1.3.2 宝贝图片校正 037 1.3.3 瑕疵图片处理 038 1.3.4 人物磨皮处理 041 1.3.5 校正模糊图片 042 1.4 网店中常用的美工抠图 045 1.4.1 按规则几何图形进行抠图 045 1.4.2 复杂图像快速抠图 046 1.4.3 复杂图像精细抠图 046 1.4.4 透明图像抠图 049 1.4.5 毛发抠图 052 第2章 网店外部区域引流图像设计与制作 2.1 店标设计与制作 055 2.1.1 店标设计原则 055 2.1.2 店标的制作构思 056 2.1.3 店标的制作过程 057 2.2 直通车设计与制作 060 2.2.1 直通车图片的设计原则 061 2.2.2 直通车图片的制作 064 2.3 钻展图设计与制作 069 2.3.1 钻展图片的设计原则 069 2.3.2 钻展图片主图设计与制作 069 2.3.3 钻展图片右侧小图设计与制作 074 第3章 网店首屏元素设计与制作 3.1 店招设计与制作 078 3.1.1 店招设计的原则 078 3.1.2 商品参与店招设计与制作 079 3.1.3 与导航一同进行设计与制作 085 3.2 首屏全屏广告设计与制作 091 3.2.1 首屏全屏广告及轮播图的作用 091 3.2.2 渐变背景广告设计与制作 092 3.2.3 大面积配色背景广告设计与制作 096 3.2.4 图像背景广告设计与制作 100 第4章 商品广告图像设计与制作 4.1 950像素广告设计与制作 105 4.1.1 商品整体参与设计与制作 105 4.1.2 商品局部参与设计与制作 111 4.1.3 多视点参与广告设计与制作 115 4.1.4 超出背景区域设计与制作 119 4.2 750像素广告设计与制作 123 4.2.1 暖色系方案设计与制作 123 4.2.2 冷色系方案设计与制作 127 4.2.3 中性色方案设计与制作 131 4.3 190像素广告设计与制作 136 4.3.1 凸显特点方案设计与制作 136 4.3.2 商品本身参与设计与制作 139 4.4 陈列区广告设计与制作 141 4.4.1 格局分布方案设计与制作 142 4.4.2 单色与图片搭配方案设计与制作 144 第5章 快速导航区设计与制作 5.1 悬浮导航设计与制作 148 5.1.1 半透明方案设计与制作 149 5.1.2 单色背景方案设计与制作 153 5.2 宝贝分类设计与制作 155 5.2.1 宝贝分类设计与制作原则 156 5.2.2 按钮式图像方案设计与制作 157 5.2.3 文字效果方案设计与制作 161 5.2.4 子分类设计与制作 163 第6章 店铺公告模板设计与制作 6.1 横幅公告模板设计与制作 166 6.1.1 950 像素店铺公告模板的制作 166 6.1.2 750像素店铺公告模板的制作 170 6.2 直幅公告模板设计与制作 174 6.3 为制作的模板创建切片 175 第7章 店铺收藏与客服应用 7.1 店铺收藏设计与制作 178 7.1.1 宽幅店铺收藏的制作 178 7.1.2 窄幅店铺收藏的制作 183 7.2 客服图片设计与制作 184 7.2.1 宽幅客服图像设计与制作 185 7.2.2 窄幅客服图像设计与制作 188 第8章 详情页设计与制作 8.1 详情页的设计思路以及操作流程 190 8.2 详情页的格局构成 191 8.3 详情页的设计原则 192 8.4 详情页的制作过程 193 8.4.1 详情页框架 193 8.4.2 商品广告区设计 193 8.4.3 商品色彩展示区设计 197 8.4.4 商品细节展示区设计 200 8.4.5 随行搭配区的设计 205 8.4.6 尺码区的设计 208 8.4.7 购物须知区设计 209 8.4.8 合成详情页 210