资源简介

(共43张PPT)
第6章
专题页视觉营销设计
电商视觉营销设计
设计并制作
女装店铺专题页
03
6.3 设计并制作女装店铺专题页
本节将以女装店铺专题页的设计与制作为例，介绍专题页的设计技巧与制作方法。
案例最终效果可参考本书配套素材“素材与实例”→“第 6 章”→“女装店铺专题页”文件夹中的“女装店铺专题页 .psd”文件。
6.3.1 设计思路
为了“促活”（让消费者活跃起来），该女装店铺计划举办促销活动。考虑到当前为春季，故将活动主题确定为“春夏焕新”。接下来对以“春夏焕新”为活动主题的专题页进行视觉营销设计。
6.3.1 设计思路 1. 页面规划
专题页从上到下依次为首屏海报、促销优惠区、商品展示区。下面对这些区域进行规划和说明。
6.3.1 设计思路 1. 页面规划
（1）首屏海报：安排活动主题、活动时间、活动优惠等内容，以帮助消费者了解活动。
根据活动目的和活动主题，将首屏海报主题文案设计成“春夏新品 钜惠放送”，借助“钜惠”一词表现活动价值，引发消费者对活动的兴趣。将辅助文案设计成“焕新周 | 5.1—5.6”，再次点明主题，同时说明活动时间，提醒消费者不要错过活动；以文案“全场 2 件 8 折 领券下单更优惠”说明优惠力度，刺激消费者参与活动。
鉴于此次营销活动为春夏新品促销，画面中除了加入主推商品图片外，还加入花草、青山等元素，以营造活动氛围。
另外，将“夏季新品 钜惠放送”主题文案放大显示，以使其突显，引发消费者关注。
6.3.1 设计思路 1. 页面规划
（2）促销优惠区：采用满减促销方式，并且为了确保消费者能以优惠的价格购买商品，特在促销优惠区展示购物攻略。不仅如此，购物中涉及的需要消费者领取的优惠券都罗列在此，方便消费者领取。
另外，考虑到店铺优惠券面额较大，会将其突出显示，以吸引消费者目光，激发消费者的购买欲望。
6.3.1 设计思路 1. 页面规划
（3）商品展示区：分成两个区域，一个是新品专区，一个是爆款专区。其中，新品专区展示少量春夏主推新品，爆款专区展示以往销售较好的少量爆款商品，以引发消费者对商品的兴趣。
在每个区域的底部加入“查看更多……”按钮，点击即可进入相应分类的商品展示页面，方便消费者选购。
另外，在每幅商品展示图中都加入“立即购买”按钮，以引导消费者点击购买商品
6.3.1 设计思路 2. 配色方案确定
考虑到此次营销活动主要针对的商品为春夏新品，故将页面背景、优惠券、部分文案等都设置成蓝色，给消费者以清爽、轻松的感觉；
对于一些重要信息，如“立即领取”按钮，使用红色将其突显，以引导消费者点击或查看；将一些辅助信息设置成黑色，可以让画面更显沉稳，以表现职场女性的沉着、干练。
不仅如此，这些色彩结合使用，可以与店铺首页风格保持统一，以强化品牌在消费者心中的印象。
6.3.1 设计思路 3. 构图选择
首屏海报采用中心构图，将活动信息居中摆放，左右两侧对称摆放商品模特图片，不仅能突出主体——促销活动信息，还能给消费者以和谐、稳定的感觉。
促销优惠区采用折线型陈列方式，为其增添趣味性和氛围感。商品展示区中的两个区域都添加首推商品展示图，并对其进行精心设计，以使整个商品展示区给消费者带来美感和新鲜感。
6.3.2 制作过程
步骤 1　新建一个名为“女装店铺专题页”、宽度为 1920 像素、高度为 7000 像素、分辨率为 72 像素 / 英寸、颜色模式为 RGB 的文档，然后在垂直 485 像素处和垂直 1435 像素处各新建一条参考线。
6.3.2 制作过程 1. 制作首屏海报
由于活动期间通常将专题页作为店铺首页，因此专题页的尺寸可参考店铺首页的尺寸，宽度通常为 1920 像素，高度则根据页面内容的多少而定。
为了保证专题页在不同显示器中都能够正常显示，活动信息应尽量放置在中间（950 像素以内）。
6.3.2 制作过程 1. 制作首屏海报
小提示
6.3.2 制作过程 1. 制作首屏海报
步骤 2　将前景色设置为浅蓝色（#c8e4f2），并按“Alt+Delete”组合键为“背景”图层填充前景色，然后置入素材“背景 .png”文件，并将其顶端移至与页面顶端对齐。
步骤 3　置入素材“花草 1.png”“花草 2.png”“花草 3.png”文件，并将它们移至合适位置；
然后复制花草 3 素材，按“Ctrl+T”组合键调出变换框并右击，从弹出的快捷菜单中选择“水平翻转”项；
接着将其移至合适位置，最后按“Enter”键确认。
6.3.2 制作过程 1. 制作首屏海报
步骤 4　在背景素材中间合适位置添加文本和装饰图形，其中装饰图形需添加投影图层样式。
6.3.2 制作过程 1. 制作首屏海报
文鼎圆立
体，70 点，
#00587d
文鼎圆立
体，120点，
#00587d
汉仪中圆
简，70 点，
#ffffff
950 像素 ×105 像素，#00587d，
半径为 10 像素
步骤 5　置入素材“服装 1.jpg”文件并将其栅格化处理，然后使用“魔棒工具” 对其进行抠图，接着使用“橡皮擦工具” 擦去边缘多余部分，最后调整其大小和位置。
采用同样的方法处理“服装 2.jpg”文件。
6.3.2 制作过程 1. 制作首屏海报
6.3.2 制作过程 1. 制作首屏海报
步骤 6　在左侧模特脚部绘制一个宽度为 268 像素、高度为 115 像素、填充色为蓝色（#6a9ed1）、描边为无的椭圆作为投影，并将其图层移至“服装 1”图层下方；
然后复制一个椭圆并将其移至右侧模特脚部，以制作投影。
6.3.2 制作过程 2. 制作促销优惠区
步骤 1　在首屏海报下方绘制一个宽度为 1260 像素、高度为 1485 像素、半径为50 像素的圆角矩形，并设置其填充色为白色（#ffffff），描边为无。
6.3.2 制作过程 2. 制作促销优惠区
步骤 2　置入素材“标题底图 .png”文件并将其移至合适位置，然后在其上添加文本“购物攻略”并设置其字体为尔雅创意黑，字体大小为 96 点，字体颜色为白色（#ffffff），以制作促销优惠区标题。
6.3.2 制作过程 2. 制作促销优惠区
步骤 3　在标题下方添加文本和装饰线，以制作店铺优惠券标题。
EU-B2X，150 点，#009ee7
黑体，30 点，#000000
801 像素 ×3 像素，#cdefff
黑体，60 点，#009ee7
6.3.2 制作过程 2. 制作促销优惠区
步骤 4　置入素材“优惠券底图 1.png”文件，并将其移至合适位置，然后在其上添加文本和装饰图形，以制作 100 元优惠券。
由字符“-”组成
尔雅棉花糖，130 点，#009ee7
Adobe 黑体 Std，30 点，#000000
方正大黑 _GBK，26 点，#ffffff
黑体，24 点，#000000
直径为 46 像素，填充色为
#009ee7，描边色为 #ffffff，
描边宽度为 3 像素
方正大黑 _GBK，24 点，#ffffff
178 像素 ×47 像素，半径
为 50 像素，#ff0000
6.3.2 制作过程 2. 制作促销优惠区
步骤 5　复制两份 100 元优惠券并通过移动位置、修改内容制作其他优惠券。
6.3.2 制作过程 2. 制作促销优惠区
步骤 6　复制店铺优惠券标题并通过移动位置、修改内容制作平台品类券标题，然后采用步骤 4 和步骤 5 的方法制作平台品类券。
尔雅棉花糖，22 点，
#009ee7
尔雅棉花糖，90 点，
#009ee7
Adobe 黑体 Std，
22 点，#000000
121 像素 ×35 像素，
#ff0000
Adobe 黑体 Std，
16 点，#ffffff
6.3.2 制作过程 2. 制作促销优惠区
步骤 7　采用同样的方法制作购物部分内容。
160 像 素 ×161 像
素，半径为 10 像
素，#009ee7
方正大黑 _GBK，
62 点，#ffffff
方正大黑 _GBK，
80 点，#000000
方正大黑 _GBK，150 点，#ff0000
950 像素 ×208 像素，半径为
10 像素，#ffffff
步骤 1　使用“钢笔工具” 绘制不规则图形，然后为其填充蓝色（#0494da）。复制一个不规则图形，将其放大后修改其参数。
6.3.2 制作过程 3. 制作商品展示区
绘制不规则图形
填充不规则图形
复制不规则图形并
调整其大小和参数
步骤 2　添加新品专区标题文本和装饰线（由字符“*”组成）。
6.3.2 制作过程 3. 制作商品展示区
Adobe 黑体 Std，14 点，#0494da
Adobe 黑体 Std，
62 点，#ffffff
Adobe 黑体 Std，
60 点，#0494da
步骤 3　在标题下方绘制一个宽度为 1258 像素、高度为 652 像素的矩形，然后设置其填充色为白色（#ffffff），描边为无，最后为其添加投影图层样式。
6.3.2 制作过程 3. 制作商品展示区
步骤 4　置入素材“服装 4.jpg”文件，并调整其大小和位置，然后将其剪贴到步骤3 绘制的矩形中，最后在模特左侧合适位置添加文本和装饰图形。
6.3.2 制作过程 3. 制作商品展示区
华文仿宋，46 点，#363636
汉仪家书简，50 点，#363636
汉仪家书简，40 点，#ffffff
191 像素 ×38 像素，描边色为 #363636，
描边宽度为 2 像素，描边类型为虚线
华文仿宋，22 点，#363636
方正大标宋 _GBK，36 点，#ff0000
方正大黑 _GBK，22 点，#ffffff
118 像素 ×38 像素，#363636
华文仿宋，16 点，#363636，
行距为 24 点
330 像素 ×52 像素，#363636
华文仿宋，108 点，#363636
利用“矩形选框工具” 自行绘制，#363636
步骤 5　采用同样的方法制作其他新品展示图。商品价格文案的参数与第一幅新品展示图相似文本的参数相同，不再标注。
6.3.2 制作过程 3. 制作商品展示区
600 像素 ×1002 像素，
#ffffff，投影参数与第
一幅新品展示图背景
的投影参数相同
600 像素 ×125 像素，
#ffffff
黑体，24 点，#363636
164像素×46像素，
#363636
方正大黑 _GBK，
30 点，#ffffff
步骤 6　置入素材“查看更多新品按钮 .png”文件，并调整其大小和位置。
6.3.2 制作过程 3. 制作商品展示区
步骤 7　复制整个新品专区并通过修改内容、移动位置制作爆款专区。
6.3.2 制作过程 3. 制作商品展示区
本实训通过设计并制作零食店铺专题页，巩固所学知识。
案例最终效果可参考本书配套素材“素材与实例”→“第 6 章”→“零食店铺专题页”文件夹中的“零食店铺专题页 .psd”文件。
本章实训 ——设计并制作零食店铺专题页
本章实训 ——设计并制作零食店铺专题页 1. 设计思路
为了“促活”，该零食店铺计划举办“吃货节”促销活动。
其中，促销商品分为两类，一类参与第二件半价活动，另一类参与满减活动——“满 99 减 30”“满 169 减 50”。
因此，将活动主题确定为“吃货节大甩卖”。接下来对以“吃货节大甩卖”为活动主题的专题页进行视觉营销设计。
本章实训 ——设计并制作零食店铺专题页 1. 设计思路
（1）页面规划。专题页从上到下依次为首屏海报、促销优惠区、商品展示区。下面对这些区域进行规划和说明。
本章实训 ——设计并制作零食店铺专题页 1. 设计思路
① 首屏海报：鉴于活动目的和活动主题，将首屏海报主题文案设计为“吃货节大甩卖”，且用较粗字体、较大字号将其突出显示，以吸引消费者注意；添加文案“活动时间：5.17-5.19”来提醒消费者不要错过活动；
为了引导消费者参与活动，加入“部分商品第二件半价！”文案吸引消费者。另外，此次活动是吃货节促销，因此画面中除了加入商品图片外，还加入礼盒、云纹等装饰元素，以烘托吃货节的热闹氛围。
本章实训 ——设计并制作零食店铺专题页 1. 设计思路
② 促销优惠区：展示满减活动优惠券的领取及使用攻略，方便消费者操作。
③ 商品展示区：划分为三个区域，分别为“第二件半价专区”“满 99 减 30 专区”“满169 减 50 专区”，每个区域都添加“更多 >>”文字链接，可以将消费者引导至相应分类的商品展示页面中。
不仅如此，在每个商品展示图中都加入购物车图标，以引导消费者将商品添加至购物车中。
另外，采用货架的形式展示促销商品，能使消费者产生在实体店购物的感觉，从而产生“逛店”的乐趣，进而激发消费者的购买欲望。
本章实训 ——设计并制作零食店铺专题页 1. 设计思路
（2）配色方案确定。为了强化促销氛围，整个页面多使用给人喜庆、热闹感觉的红色、褐色和黄色。
而优惠券使用攻略部分使用绿色，不仅可以丰富画面效果，还可以与红色形成对比，增加画面的视觉冲击力。
另外，这些颜色的使用可以使专题页的风格与店铺首页保持一致，从而给消费者留下完整、统一的印象。
本章实训 ——设计并制作零食店铺专题页 1. 设计思路
（3）构图选择。首屏海报、促销优惠区采用中心构图，将活动信息、优惠券居中摆放，能使活动信息、优惠信息更加突出。
商品展示区则采用两列的规范陈列方式，并且在单个商品展示图中加入购物车图标，既可以引导消费者将商品加入购物车，又可以丰富商品展示图的表现。
本章实训 ——设计并制作零食店铺专题页 2. 制作过程
（1）制作首屏海报。首先置入底纹素材并调整其大小、位置及图层不透明度，然后置入背景素材并将其顶端移至与页面顶端对齐，最后添加活动信息和商品图片。
每个活动信息文案都需先添加文本，并为其添加图层样式，然后复制两份并调整图层样式，以制作多层描边效果。
小提示
本章实训 ——设计并制作零食店铺专题页 2. 制作过程
（2）制作促销优惠区。首先置入促销优惠区相关底图素材，然后添加促销优惠标题和正文文本。
可先制作 30 元优惠券，然后通过复制并修改内容、移动位置获得 50 元优惠券。
小提示
本章实训 ——设计并制作零食店铺专题页 2. 制作过程
（3）制作商品展示区。首先置入商品展示区相关底图素材，然后添加商品展示标题和正文文本，以及装饰图形。
可先制作一个商品展示图，然后通过复制并修改内容、移动位置获得其他商品展示图。
小提示
谢谢观看

展开更多......

收起↑