资源简介

(共85张PPT)
第4章
店铺首页视觉营销设计
电商视觉营销设计
设计并制作女装店铺首页
03
本节将以女装店铺首页的设计与制作为例，介绍店铺首页的设计技巧与制作方法。
案例最终效果可参考本书配套素材“素材与实例”→“第 4 章”→“女装店铺首页”文件夹中的“女装店铺首页 .psd”文件。
4.3 设计并制作女装店铺首页
4.3.1 设计思路
该女装店铺当前主推春夏上市新品，且目标消费者为 25 ～ 40 岁职业女性。
这类女性偏好精致、优雅的极简风，因此店铺风格确定为干净、大气的简约风。
接下来根据店铺营销策略和目标消费者的特点，对该女装店铺首页进行视觉营销设计。
女装店铺首页从上到下依次为七个区域，下面对这些区域进行规划和说明。
4.3.1 设计思路 1. 页面规划
（1）店铺招牌：选择品牌型店铺招牌，且加入店铺标志，并将其居中摆放，使其更加突显，方便消费者快速识别店铺信息。
在店铺招牌靠右位置添加搜索框和收藏店铺按钮，方便消费者搜索商品、收藏店铺。
另外，这样安排还可以让店铺招牌显得简洁大气，与店铺风格定位相符。
4.3.1 设计思路 1. 页面规划
（2）导航：设置通栏导航，将商品按服装类型进行分类，即导航基础内容为连衣裙、衬衫、毛衣、外套、半身裙、短裤、长裤。
考虑到新品上市的营销策略，在导航靠左位置加入上市新品导航项——新品推荐，并在该导航项的右上角添加“NEW”作为装饰，使该导航项更加突显，以引导消费者进入相应的推广页面中。
由于该女装店铺商品种类不多，因此不需要设置二级导航。导航中也无须添加任何其他元素，白底黑字的搭配可使导航文字更加突出，方便消费者快速识别信息，也与店铺招牌的风格相呼应。
4.3.1 设计思路 1. 页面规划
（3）轮播区：鉴于店铺当前主推春夏上市新品，选择主题活动型海报，并将主题设置为“春夏上新”，借此提醒消费者春夏来临，该换新了。
在海报中加入春夏首推新品图片，以引起消费者关注；加入“全场商品 2 件 8 折”“活动时间……”等活动信息，引导消费者参与活动、购买商品；加入一些装饰元素，如绿植，丰富画面的同时辅助主题阐述。
4.3.1 设计思路 1. 页面规划
（4）优惠券：在轮播海报下方安排多张风格统一的优惠券，用于吸引消费者注意，促进商品销售。
优惠券中安排面额、使用条件等内容，方便消费者查看和领取。
4.3.1 设计思路 1. 页面规划
（5）商品展示区：将店铺中的部分商品按照新品热卖、爆款热卖两类进行分区展示。
内容方面，新品热卖区展示重点推广的商品——春夏上市新品，并以商品自身优势作为信息传达点，以吸引消费者目光；爆款热卖区相当于“商品陈列区”，展示以往销量较高的商品，为消费者推荐优质商品，以获得消费者的好感。
设计方面，新品热卖区采用折线型陈列方式，这种排列方式符合消费者的视觉浏览路线，能给消费者带来良好的视觉感受；而爆款热卖区则采用两行三列的规范陈列方式，且在单个商品展示图中加入购物车图标，引导消费者将商品加入购物车的同时丰富商品展示图的表现。
4.3.1 设计思路 1. 页面规划
（6）交互区：添加店铺标志、收藏店铺按钮、客服联系方式、返回顶部按钮，方便消费者操作的同时，加深其对品牌的记忆。
4.3.1 设计思路 1. 页面规划
（7）页尾：添加底部导航、店铺声明等，方便消费者选购商品，提高消费者对店铺的信任度。
4.3.1 设计思路 1. 页面规划
（1）考虑到店铺风格定位为简约风，所以店铺首页的大部分文字使用黑色，背景以白色为主，这也方便消费者查看店铺和商品信息。
（2）考虑到店铺当前主推春夏上市新品，将海报背景、优惠券背景、页尾背景等设置为蓝色，能够给消费者以清凉之感。其中优惠券背景的蓝色比海报背景的蓝色更深，可使优惠券更加醒目，从而吸引消费者目光。
（3）对购买按钮这类重点强调的内容使用红色，使其非常显眼，以引导消费者点击。
（4）页面中的一些装饰元素使用粉色、紫色等，以丰富画面色彩。
4.3.1 设计思路 2. 配色方案确定
店铺首页的商品图片主要采用垂直线构图，能为画面增加延伸感；而海报一侧展示主推商品，另一侧添加文案，这种平衡式构图方式可以使画面形成视觉上的稳定。这种既具动感、又具稳定感的画面能给消费者带来良好的视觉体验。
另外，页面中的按钮使用点元素，使其成为焦点，从而吸引消费者注意；优惠券和部分图片边框等使用线元素，使画面效果更加丰富；每一幅图片都可以视为一个面元素，这些面元素面积、形状各不相同，可以形成一定的对比，使画面更具表现力。
4.3.1 设计思路 3. 构图选择
4.3.2 制作过程
4.3.2 制作过程 1. 制作页头
步骤 1　启动 Photoshop（本书使用的软件版本为 Photoshop 2020），单击其欢迎界面中的“新建”按钮，打开“新建文档”对话框，在其中设置参数后单击“创建”按钮新建一个文档。
不同电商平台对于店铺首页各区域尺寸的要求有所不同，下面仅以淘宝网店铺首页为例进行介绍。
店铺首页的宽度通常为 1920 像素，高度则根据页面内容的多少而定，因此可以先设置一个预估高度，然后在具体制作过程中根据实际需求进行调整。
店铺首页中不同区域的尺寸如下：全屏店铺招牌尺寸为 1920 像素 ×120 像素，普通店铺招牌尺寸为 950 像素 ×120 像素；通栏导航尺寸为 1920 像素 ×30 像素；全屏海报宽度为 1920 像素，普通海报宽度为 950 像素，高度自定（一般为 100 像素～ 600 像素）。
但是，为了保证店铺招牌和通栏导航在不同显示器中都能够正常显示，店铺招牌和通栏导航中的内容应尽量设置在中间，也就是 950 像素以内。
另外，若图片主要用于网络传播和屏幕显示，通常将其分辨率设置为72像素/英寸。
4.3.2 制作过程 1. 制作页头
小提示
步骤 2　选择“视图”→“新建参考线”菜单项，打开“新建参考线”对话框，在其中设置参数后单击“确定”按钮新建一条参考线。
采用同样的方法再新建两条参考线，参考线的参数及效果如下图所示。此时，店铺招牌的设计区域就利用参考线划分出来了。
4.3.2 制作过程 1．制作页头
店铺招牌的设计区域
4.3.2 制作过程 1．制作页头
小提示
选择“视图”→“锁定参考线”菜单项，可锁定参考线，避免制作过程中误操作导致参考线移动。
再次选择“视图”→“锁定参考线”菜单项，可解锁参考线。
步骤 3　单击工具箱中的“设置前景色”按钮 ，打开“拾色器（前景色）”对话框，在符号“#”右侧的编辑框中输入“000000” 后单击“确定”按钮，将前景色设置为黑色。
4.3.2 制作过程 1. 制作页头
4.3.2 制作过程 1. 制作页头
小提示
通常情况下，初次打开 Photoshop 时，前景色默认就是黑色。若当前前景色不是黑色，可利用步骤 3 的方法将前景色设置为黑色。
步骤 4　单击工具箱中的“横排文字工具” ，然后在店铺招牌的设计区域单击，当出现闪烁的“I”时输入“YUEJI FUSHI”，接着按“Esc”键确认，最后在工具属性栏设置文本属性。
4.3.2 制作过程 1. 制作页头
添加并设置店铺名称的拼音字母
单击该按钮并从展开的
下拉列表中选择字体
双击选中字号后，重
新输入所需字号，并
按“Enter”键确认
步骤 5　采用步骤 4 的方法在拼音字母下方添加店铺名称“悦己服饰”并设置其文本属性。
4.3.2 制作过程 1. 制作页头
步骤 6　保持步骤 5 创建的图层处于选中状态，按住“Ctrl”键的同时单击“图层”面板中步骤 4 创建的图层；
最后按“Ctrl+D”取消全选画布。
4.3.2 制作过程 1. 制作页头
店铺名称对齐效果
然后按“Ctrl+A”组合键全选画布，接着选择“移动工具” ，并单击工具属性栏中的“水平居中对齐”按钮 ，使步骤 4 和步骤 5 创建的文本相较于画布水平居中对齐；
步骤 7　按“Ctrl+Shift+N”组合键新建一个图层；
接着按“Alt+Delete”组合键为矩形选区填充黑色前景色；
最后按“Ctrl+D”组合键取消选区，以绘制装饰线。
4.3.2 制作过程 1. 制作页头
绘制装饰线
然后选择“矩形选框工具” ，并在“悦己服饰”文本的左侧绘制一个宽度为 42 像素、高度为 1 像素的矩形选区（矩形选区左侧与“YUEJI FUSHI”文本左侧对齐）；
步骤 8　选择“移动工具” ，然后将光标移至步骤 7 绘制的矩形上；
接着按住“Alt+Shift”组合键，当光标呈 状时按住鼠标左键并向右拖动矩形，直至矩形右侧与“YUEJI FUSHI”文本右侧对齐后释放鼠标，以水平复制装饰线。
4.3.2 制作过程 1. 制作页头
复制装饰线
　步骤 9　选择“圆角矩形工具” ，然后在店铺标志右侧绘制一个宽度为 126 像素、高度为 22 像素、半径为 50 像素的圆角矩形，最后在工具属性栏设置其属性。
4.3.2 制作过程 1. 制作页头
绘制搜索框
步骤 10　选择“文件”→“置入嵌入对象”菜单项，打开“置入嵌入的对象”对话框，在其中选择本书配套素材“素材与实例”→“第 4 章”→“女装店铺首页”文件夹中的“搜索 .png”文件；
然后单击“置入”按钮置入素材，并将置入的素材移至步骤 9 绘制的圆角矩形靠右位置；
最后缩小素材至合适大小后按“Enter”键确认，以添加搜索图标。
4.3.2 制作过程 1. 制作页头
添加搜索图标
步骤 11　采用步骤 9 的方法在搜索框右侧绘制一个宽度为 90 像素、高度为 22 像素、半径为 50 像素的圆角矩形，然后在工具属性栏设置其属性。
4.3.2 制作过程 1. 制作页头
绘制收藏店铺按钮底图
#e60012
步骤 12　采用步骤 10 的方法置入素材“爱心 .png”文件，并调整其位置和大小，然后在其右侧添加“收藏店铺”文本，并设置其字体为“微软雅黑”，字体大小为 13 点，字体颜色为白色（#ffffff）。
4.3.2 制作过程 1. 制作页头
步骤 13　采用步骤 2 的方法在水平 150 像素处新建一条参考线；
然后采用步骤 4 的方法在两条水平参考线之间添加导航文本“首页”并设置其文本属性；
接着复制“首页”文本并将其右移至合适位置后修改文本内容为“新品推荐”。
采用同样的方法制作其他导航文本。至此，页头制作完成。
4.3.2 制作过程 1. 制作页头
#ff0000
添加并设置导航文本
步骤 1　在水平 505 像素处新建一条参考线，然后选择“矩形工具” ，并在水平150 像素处的参考线与新建参考线及两条垂直参考线之间绘制矩形；
最后在工具属性栏设置矩形属性，以绘制海报背景。
4.3.2 制作过程 2. 制作海报
#c7dde7
绘制海报背景
步骤 2　置入素材“绿植 1.png”文件，然后将置入的素材移至海报背景的左下角。
4.3.2 制作过程 2. 制作海报
步骤 3　置入素材“绿植 2.png”文件并将其移至海报背景的右下角。
步骤 4　选择“椭圆工具” ，然后在海报背景右侧合适位置绘制一个直径为 300 像素的正圆（绘制时需按住“Shift”键）；
最后在工具属性栏设置正圆属性。需要注意的是，正圆的填充色可随意设置，因为后续会将颜色覆盖。
4.3.2 制作过程 2. 制作海报
步骤 5　置入素材“服装 1.jpg”文件并将其缩小；
然后将其移至正圆上方，接着将光标移至“图层”面板中“服装 1”和“椭圆 1”图层之间，并按住“Alt”键，当光标呈 状时单击，将服装图片剪贴到正圆中。
4.3.2 制作过程 2. 制作海报
步骤 6　采用上述方法，在海报中合适位置添加文本和装饰图形，各项参数和效果如下图所示。至此，海报制作完成。
4.3.2 制作过程 2. 制作海报
Adobe 黑体 Std，16 点，#ffffff
方正大黑 _GBK，
58 点，#016591
黑 体，28 点，#016591
方正大黑 _GBK，
12 点，#545454
方正细黑—简体，
24 点，#016591
方正大黑 _GBK，
26 点，#ffffff
方正大黑 _GBK，18 点，#ffffff
192 像素 ×26 像素，#75c4e8
方正细黑—简体，
58 点，#016591
28像素×120像素，
#75c4e8
步骤 1　在海报下方添加优惠券标题文本，并添加装饰线（由字符“-”组成）。
4.3.2 制作过程 3. 制作优惠券
黑体，18 点，#016591
黑体，20 点，#016591
黑体，18 点，#016591
添加优惠券标题文本和装饰线
步骤 2　使用“圆角矩形工具” 在优惠券标题左下方绘制一个宽度为 306 像素、高度为 96 像素、半径为 10 像素的圆角矩形，然后在工具属性栏设置其填充色为白色（#ffffff），描边为无；
接着双击其所在图层的空白处，在打开的“图层样式”对话框中单击并勾选“外发光”复选框，并在该对话框右侧设置参数；最后单击“确定”按钮，为圆角矩形添加外发光。
4.3.2 制作过程 3. 制作优惠券
#016591
步骤 3　按“Ctrl+J”组合键复制圆角矩形，然后按“Ctrl+T”组合键调出变换框，将光标移至变换框四角中的任意一角，按住“Alt”键的同时按住鼠标左键并向内拖动，缩小变换框至合适大小后按“Enter”键确认；
4.3.2 制作过程 3. 制作优惠券
接着将缩小后的圆角矩形的填充色改为深蓝色（#016591），最后将光标移至该图层右侧的 图标上，按住鼠标左键并将其拖至“删除图层”按钮 上释放，以删除复制图层的图层样式。
步骤 4　按“Ctrl+Shift+N”组合键新建一个图层，然后选择“钢笔工具” ，在工具属性栏“选择工具模式”下拉列表中选择“路径”，在圆角矩形右侧绘制路径，并按“Ctrl+Enter”组合键将路径转换为选区；
接着设置前景色为白色（#ffffff）并按“Alt+Delete”组合键为选区填充前景色，最后按“Ctrl+D”组合键取消选区。此时优惠券底图绘制完成。
4.3.2 制作过程 3. 制作优惠券
绘制路径　
填充图形效果
步骤 5　使用“椭圆工具” 在优惠券底图合适位置添加圆形装饰。
4.3.2 制作过程 3. 制作优惠券
直径为 6 像素，#ffffff
直径为 75 像 素， 描 边 色 为
#016591，描边宽度为 5 像素
直径为 13 像素，#ffffff
步骤 6　选中优惠券右侧圆形所在图层并右击，从弹出的快捷菜单中选择“栅格化图层”项，将该图层由形状图层转换为普通图层；
然后用“矩形选框工具” 框选右侧圆形位于优惠券底图以外的部分并按“Delete”键删除，最后按“Ctrl+D”组合键取消选区。
4.3.2 制作过程 3. 制作优惠券
框选多余部分　
删除多余部分
步骤 7　在优惠券底图合适位置添加文本。至此，一张优惠券制作完成。
4.3.2 制作过程 3. 制作优惠券
方正大黑简体，50 点，#016591
Adobe 黑体 Std，14 点，#ffffff
方正大黑简体，40 点，#ffffff
Adobe 黑体 Std，20 点，#ffffff
Adobe 黑体 Std，16 点，#ffffff
步骤 8　选中制作优惠券涉及的所有图层，按“Ctrl+G”组合键编组；
然后将其复制两份并移至合适位置，最后修改内容以制作其他优惠券。至此，优惠券制作完成。
4.3.2 制作过程 3. 制作优惠券
4.3.2 制作过程 3. 制作优惠券
小提示
每制作完一个区域，应对区域中的所有图层进行编组并自定义组名，便于后续操作与管理，以下不再赘述。
步骤 1　置入素材“新品 .png”文件并将其移至优惠券下方合适位置，然后在其右侧添加新品热卖区标题文本。
4.3.2 制作过程 4. 制作新品热卖区
Adobe 黑体 Std，40 点，#000000
步骤 2　新建一个图层，然后选择“多边形套索工具” ，在新品热卖区标题右下方绘制一个图形并为其填充黑色（#000000）。
4.3.2 制作过程 4. 制作新品热卖区
步骤 3　置入素材“服装 2.jpg”文件，然后将其移至步骤 2 绘制的图形上方。
4.3.2 制作过程 4. 制作新品热卖区
步骤 4　置入素材“花 1.png”文件，然后将其移至步骤 3 添加的素材的左上角作为装饰。
4.3.2 制作过程 4. 制作新品热卖区
步骤 5　在服装素材左侧添加文本和装饰图形。
4.3.2 制作过程 4. 制作新品热卖区
EU-B7，80 点，
#000000
Adobe 黑 体 Std，
20 点，#ffffff
125 像素 ×30 像素，#e60012
Adobe 黑 体 Std，
30 点，#000000，
行距为 40 点
Adobe 黑 体 Std，20 点，#e60012
步骤 6　置入素材“底纹 .jpg”文件并将其覆盖于“ELEGANT”文本上方（“底纹”图层也位于“ELEGANT”图层上方）；
然后将其剪贴于“ELEGANT”文本中。
4.3.2 制作过程 4．制作新品热卖区
剪贴效果
步骤 7　采用上述方法制作新品热卖区的其他部分。其中，文本部分可复制步骤 5 创建的文本并通过移动位置、修改内容获得。
4.3.2 制作过程 4. 制作新品热卖区
#c99190
#a5bee1
步骤 1　复制新品热卖区标题并通过移动位置、修改内容制作爆款热卖区标题。
4.3.2 制作过程 5. 制作爆款热卖区
步骤 2　新建一个图层，使用“矩形选框工具” 在爆款热卖区标题左下方绘制一个宽度为 308 像素、高度为 461 像素的矩形选区，并为其填充浅灰色（#f0f0f0）；
然后按“Ctrl+D”组合键取消选区，最后置入素材“服装 5.jpg”文件，并将其移至矩形上。
4.3.2 制作过程 5．制作爆款热卖区
步骤 3　在矩形下方添加文本。
4.3.2 制作过程 5. 制作爆款热卖区
Adobe 黑体 Std，14 点，
#000000，行距为 18 点
Adobe 黑体 Std，20点，
#e60012
步骤 4　置入素材“购物车 .png”文件，并将其放置在文本右侧。
此时，一幅爆款热卖商品展示图制作完成。
4.3.2 制作过程 5. 制作爆款热卖区
步骤 5　复制五份爆款热卖商品展示图，并通过移动位置、修改内容制作其他爆款热卖商品展示图。至此，爆款热卖区制作完成
4.3.2 制作过程 5. 制作爆款热卖区
步骤 1　新建一个图层，然后在爆款热卖区下方绘制一个宽度为 680 像素、高度为 2 像素的矩形选区，接着为其填充灰色（#d1d1d1）作为分割线，最后按“Ctrl+D”组合键取消选区。
步骤 2　复制店铺标志并将其移至矩形左下方。
4.3.2 制作过程 6. 制作交互区
步骤 3　在店铺标志下方绘制一个宽度为 106 像素、高度为 22 像素、半径为 10 像素的圆角矩形；
然后设置其填充色为红色（#e60012），描边为无，接着在其上添加文本“收藏店铺”，并设置其字体为方正大黑简体，字体大小为 18 点，字体颜色为白色（#ffffff）。
至此，收藏店铺按钮制作完成。
4.3.2 制作过程 6. 制作交互区
步骤 4　新建一个图层，然后在店铺标志右侧绘制一个宽度为 2 像素、高度为 90 像素的矩形选区，接着为其填充灰色（#cecece），最后按“Ctrl+D”组合键取消选区，以绘制装饰线。
4.3.2 制作过程 6. 制作交互区
步骤 5　在步骤 4 创建的矩形右侧添加文本，并设置其字体为 Adobe 黑体 Std，字体大小为 18 点，字体颜色为黑色（#000000），行距为 30 点；
然后置入素材“蓝色旺旺 .png”和“灰色旺旺 .png”文件并分别移至合适位置。至此，客服区制作完成。
4.3.2 制作过程 6. 制作交互区
步骤 6　复制步骤 4 绘制的矩形并将其移至客服区右侧；
然后在复制的矩形右侧添加文本“返回顶部”，并设置其字体为方正大黑简体，字体大小为 18 点，字体颜色为黑色（#000000）；
最后置入素材“返回顶部 .jpg”文件并移至合适位置。至此，交互区制作完成。
4.3.2 制作过程 6. 制作交互区
步骤 1　新建一个图层，然后在交互区下方绘制一个宽度为 1920 像素、高度为 360 像素的矩形选区，并为其填充浅蓝色（#c7dde7）。
步骤 2　在矩形上添加文本和装饰图形。其中，五角星、奖杯、对号、爱心形状可利用“自定义形状工具” 绘制。
4.3.2 制作过程 7. 制作页尾
微软雅黑，light，18 点，#016591
幼圆，19 点，
#016591
微软雅黑，light，
12 点，#016591，
行距为 20 点
幼圆，16 点，
#016591
描边色为
#016591， 描
边宽度为 2 像
素，描边类型
为虚线
幼圆，12 点，#016591
本实训通过设计并制作零食店铺首页，巩固所学知识。
案例最终效果可参考本书配套素材“素材与实例”→“第 4 章”→“零食店铺首页”文件夹中的“零食店铺首页 .psd”文件。
本章实训 ——设计并制作零食店铺首页
该零食店铺正在参加电商平台举办的“吃货节”活动，此活动主题下的店铺首页在内容方面应充分体现活动信息，在视觉呈现方面应给消费者以“热闹”感，这样才能将消费者带入“吃货节”的活动氛围中。
本章实训 ——设计并制作零食店铺首页 1. 设计思路
本章实训 ——设计并制作零食店铺首页 1. 设计思路
（1）页面规划。零食店铺首页安排店铺招牌、导航、轮播区、商品展示区和页尾。下面对这些区域进行规划和说明。
本章实训 ——设计并制作零食店铺首页 1. 设计思路
① 店铺招牌：因店铺参加平台活动，故选择营销型店铺招牌。
店铺招牌中除了加入引导消费者识别品牌的店铺标志、口号，以及引导消费者收藏店铺的按钮外，还加入优惠券，以刺激消费者在店铺内消费。
本章实训 ——设计并制作零食店铺首页 1. 设计思路
② 导航：设置通栏导航和页中的横向导航。其中，通栏导航基础内容是按零食类型分类获得的，分别为特色卤味、面包土司、果脯蜜饯、饼干沙琪玛、坚果炒货。
为了引导消费者参与“吃货节”活动，在导航靠左位置加入满减优惠导航项“满 99 减 30”和“满 169 减 50”，并将这两个导航项的字体颜色与其他导航项的字体颜色区分开，使其更加突显。
页中的横向导航只放置热销商品类别，并以图文结合的形式呈现，其中的图片选择当前类别下最能够引起消费者食欲的图片，以增加导航吸引力，引导消费者点击进入推广页面。
本章实训 ——设计并制作零食店铺首页 1. 设计思路
③ 轮播区：考虑到当前为“吃货节”活动，故选择主题活动型海报，并以“我为吃狂”为主题，引导消费者参与活动。
为了刺激消费者购买商品，在海报中加入“第二份半价！！！”文案。除文案外，在海报中还添加各类零食图片，使整个海报显得十分“热闹”，借此将消费者带入活动氛围中。
本章实训 ——设计并制作零食店铺首页 1. 设计思路
④ 商品展示区：将店铺中的部分商品按照“当季上新味”“精选实力派”两类进行分区展示。其中，当季上新味区展示当季上新商品，并以商品自身优势作为信息传达点；精选实力派区展示以往销量较好的商品，以促进商品销售。
两个区域都采用两行三列的规范陈列方式，但是每个区域都对商品展示图做出独特设计，使其更有吸引力。
其中，当季上新味区中每个展示图都利用美观、诱人的大图展示商品细节，利用小图展示商品包装、整体外观，这样能够在刺激消费者产生想享用美食欲望的同时展示商品信息；
而精选实力派区添加首推商品展示图，该展示图与当季上新味区中的展示图相似，也是将令人垂涎的美食效果展示出来，让消费者产生“饥饿感”，从而购买商品。
本章实训 ——设计并制作零食店铺首页 1. 设计思路
⑤ 页尾：添加返回顶部按钮、店铺声明、客服联系方式，方便消费者操作，提高其对店铺的信任度。
本章实训 ——设计并制作零食店铺首页 1. 设计思路
（2）配色方案确定。店铺首页大面积使用属于类似色的褐色和黄色，以获得和谐统一的画面效果。
同时这两种颜色象征着开朗、热情，用于零食店铺首页中，不仅能暗示消费者食用零食后会心情愉悦，又能渲染热闹的氛围，十分贴合活动主题。
另外，辅助颜色选择绿色、蓝色，既能给页面增加清新感，又能丰富画面效果。
本章实训 ——设计并制作零食店铺首页 2. 配色方案确定
（3）构图选择。店铺首页的部分商品图片采用对角线构图，能为画面增加动感；而海报采用中心构图，能使主题突出。
另外，页面还运用点、线、面元素及多种形状来丰富画面效果，如精选实力派区商品展示图边框为线元素，当季上新味区商品展示图为矩形，页中的横向导航图为圆形。
本章实训 ——设计并制作零食店铺首页 2. 配色方案确定
本章实训 ——设计并制作零食店铺首页 2. 制作过程
（1）制作页头。首先利用“矩形选框工具” 和“渐变工具” 绘制页头背景；
本章实训 ——设计并制作零食店铺首页 2. 制作过程
接着利用“圆角矩形工具” 、“钢笔工具” 、“矩形选框工具” 、“椭圆工具” 和“横排文字工具” 在页头右侧制作 30 元优惠券，复制 30 元优惠券并通过移动位置、修改内容获得 50 元优惠券；
最后利用“横排文字工具” 添加导航文本。
然后置入店铺标志并将其移至页头左侧，利用“圆角矩形工具” 在店铺标志右侧绘制圆角矩形线框并在其中添加文本以制作收藏店铺按钮；
小提示
优惠券背景的制作方法是先用“圆角矩形工具” 画出外形；
再用“钢笔工具” 调整外形，接着设置其属性，最后用“矩形选框工具” 绘制浅黄色色块并将其剪贴于圆角矩形中。
本章实训 ——设计并制作零食店铺首页 2. 制作过程
（2）制作海报。首先利用“矩形工具” 制作海报背景；
然后置入素材并调整其大小和位置后，利用图层样式功能为其添加投影，其中桌布素材需剪贴于海报背景中；
需要注意的是，爱心和箭头素材可根据需要进行添加。
本章实训 ——设计并制作零食店铺首页 2. 制作过程
最后利用“横排文字工具” 添加海报文案，并利用图层样式功能为其添加描边和投影。
（3）制作当季上新味区。首先利用“横排文字工具” 制作当季上新味区标题；
本章实训 ——设计并制作零食店铺首页 2. 制作过程
然后利用“矩形工具” 和“横排文字工具” 制作一个商品展示图，将其复制并通过移动位置、修改内容获得其他商品展示图。
小提示
提示：制作单个商品展示图时，先用“矩形工具” 绘制图片边框，再置入素材并将其剪贴于边框中，以固定图片显示大小。需要注意的是，添加下方的小图时，要为其添加投影图层样式。
本章实训 ——设计并制作零食店铺首页 2. 制作过程
（4）制作精选实力派区。首先复制当季上新味区标题并通过移动位置、修改内容获得精选实力派区标题；
本章实训 ——设计并制作零食店铺首页 2. 制作过程
接着利用“圆角矩形工具” 、“钢笔工具” 和“横排文字工具” 制作一个普通商品展示图，将其复制并通过移动位置、修改内容获得其他商品展示图。
然后利用“圆角矩形工具” 和“横排文字工具” 制作首推商品展示图；
小提示
制作“抢 | 前 1000 份……”文本底图时，可参照“（1）制作页头”中制作优惠券底图的方法用“钢笔工具” 调整底图的外轮廓。
本章实训 ——设计并制作零食店铺首页 2. 制作过程
（5）制作页中的横向导航。首先利用“椭圆工具” 、“圆角矩形工具” 和“横排文字工具” 制作一个导航项；
然后将其复制并通过移动位置、修改内容制作其他导航项。
本章实训 ——设计并制作零食店铺首页 2. 制作过程
（6）制作页尾。首先利用“矩形选框工具” 和“椭圆选框工具” 绘制页尾背景；
本章实训 ——设计并制作零食店铺首页 2. 制作过程
然后利用“横排文字工具” 、“圆角矩形工具” 、“直线工具” 和“自定形状工具” 添加文本和装饰图形。
谢谢观看

展开更多......

收起↑