网店美工视觉设计实战教程 第3版 第9章 综合案例—糕点店铺视觉设计

（2）设计视频卖点说明图
调
整
视
频
模
速
拟
度
视
频
所
在
区
域
效
添
果
加
字
幕
1
19
2
3
9.3.2 设计实施
4
视频效果
20
3
目录 Contents
9.1 美化糕点商品图像 9.2 设计糕点店铺首页 9.3 设计糕点店铺商品详情页 9.4 设计糕点店铺推广图 9.5 实战演练
9.4.1 案例分析
22
01
将画面分为3部分，中间为商品图像，使 其在整个画面中处于紧抓消费者视线的位 置；上部分为品牌Logo及优惠文本；下 部分为商品价格以及商品名称。
9.3.2 设计实施
16
1. 设计焦点图
焦点图可使用之前美化后的商品图，然后添加卖点文字，其具体操作步骤如下。
1
焦 点 图 效 果
输入并调整文本
2
9.3.2 设计实施
17
2. 设计信息展示图 信息展示图的重点在于展示商品的各项信息，因此需要着重设计信息区域，装点商品
图像，其具体操作步骤如下。
1
2
4
商品促销区、商品分类和商品展示区3个 模块作为展示店铺内商品的区域，可选取 各式糕点进行展示，使消费者产生店铺商 品丰富的印象。
9.2.2 设计实施
7
1. 制作PC端店铺首页 通常情况下，PC端首页的浏览顺序为店招、轮播海报、优惠券、商品促销区，网店美
工可按照该顺序进行制作，其具体操作步骤如下。
9.5.1 案例分析
27
（1）PC端首页的宽度可设定为950像素，便于后期转化成移动端尺寸，整体制 作按照店招、轮播海报、优惠券、商品促销区的顺序，色彩的变化由店招至商品 促销区逐渐变浅，丰富画面效果。
（2）移动端首页可选用PC端首页的优惠券和轮播海报之一，新制作顶部的轮播 海报、商品分类、商品展示区模块，色彩变化延续PC端的模式，以此呼应。
为文本所在区域添加装饰形状，下 部分使用有膨胀效果的元素，使其 在视觉效果上看起来更加稳固；而
上部分使用略微平的元素，使其在 03
视觉效果上看起来更加轻盈。
02
商品图像的空间占据 绝大部分区域，因此 需要提升美观度。
9.4.2 设计实施
23
根据案例分析结果开始设计推广图，其具体操作步骤如下。
1
渐变参数
9.2.1 案例分析
1
店招作为PC端首页的门面，视觉效果需 要美观，并添加部分商品作为推广，其 他模块的设计风格需要与其保持一致。
2
轮播海报作为吸引消费者浏览首页和商 品的重要区域，应选择主推或热销商品 图像为主体，添加卖点文字和装饰，制
作成视觉效果较佳的作品。
3
优惠券的设计需要较为明显，使消费者能 够注意到，并自主领取，使其产生消费欲 望。
商品周围物体的细节明显、色彩鲜明且面积较大，需要降低其存在感。
9.1.2 设计实施
根据案例分析结果开始美化商品图像，其具体操作步骤如下。
1 3
4
4
调整画面大小
2
加强画面的饱和度
5
调整画面整体色彩
调整酥皮的色彩
创建选区
目录 Contents
9.1 美化糕点商品图像 9.2 设计糕点店铺首页 9.3 设计糕点店铺商品详情页 9.4 设计糕点店铺推广图 9.5 实战演练
2
调 整 图 像 色 彩 并 创 建 剪 贴 蒙 版
ቤተ መጻሕፍቲ ባይዱ
9.4.2 设计实施
复 制 图 片 并 调 整 位 置
3
24
设 置 渐 变 叠 加 和 投 影 参 数
4
9.4.2 设计实施
5
25
6
添加描边并设置图层填充
调整图片大小和位置
目录 Contents
9.1 美化糕点商品图像 9.2 设计糕点店铺首页 9.3 设计糕点店铺商品详情页 9.4 设计糕点店铺推广图 9.5 实战演练
1
制作分类标题
2
商品分类效果
9.2.2 设计实施
（3）设计店铺商品展示区
1
置 入 图 标
2
制 作 商 品 展 示
13
3
商品展示区效果
目录 Contents
9.1 美化糕点商品图像 9.2 设计糕点店铺首页 9.3 设计糕点店铺商品详情页 9.4 设计糕点店铺推广图 9.5 实战演练
9.3.1 案例分析
（3）实木类商品的详情页可选用店铺内热销的实木电视柜商品进行制作，扩大 宣传度，详情页的宽度选用PC端和移动端都能支持的750像素，按照焦点图、信 息展示图、卖点说明图的顺序制作，绿色作为点缀色使用，营造简约风格。
（4）引力魔方图的设计以商品图片为主，绘制绿色的形状，并输入少量的卖点 文字，制作典雅风格的引力魔方图，提升商品格调。
信
添 加 投 影
息 展 示 图 效
果
9.3.2 设计实施
18
3. 设计卖点说明图 商品图文卖点说明图可使用线条串联的方式制作，第2部分的视频则先制作装饰区域，
再切换到剪映软件中制作。其具体操作步骤如下。 （1）设计图文卖点说明图
标
题
区 域 效 果
1
卖
点
2
和
卖
点
卖
3
点
效
1 效
2
果
果
3
9.3.2 设计实施
修改文本和图像
9.2.2 设计实施
11
2. 制作移动端店铺首页 网店美工可选用PC端已制作好的相同模块，只需要按照移动端的要求修改其对应的尺
寸，再接着设计其他模块，其具体操作步骤如下。 （1）设计店铺轮播海报和优惠券
调整轮播海报
1
3
调整优惠券
2
轮播海报效果
4
优惠券效果
9.2.2 设计实施
12
（2）设计店铺商品分类
（1）设计店铺店招
1
输入文本
2
置入素材
3
PC端店招效果
9.2.2 设计实施
（2）设计店铺轮播海报
1
置入素材
2
输入文本和绘制底纹
8
3
轮播海报1效果
4
置入素材
9.2.2 设计实施
5
轮播海报2效果
6
制作优惠券背景
7
输入文本
9
8
优惠券效果
9
制作标题
10
绘制形状
9.2.2 设计实施
10
12
11
商 品 促 销 区 效 果
第9章 网店美工视觉设计实战教程（第3版）
综合案例—糕点店铺视觉设计
目录 Contents
9.1 美化糕点商品图像 9.2 设计糕点店铺首页 9.3 设计糕点店铺商品详情页 9.4 设计糕点店铺推广图 9.5 实战演练
9.1.1 案例分析
3
案例 分析
画面整体色彩和亮度较为昏暗，需要调整饱和度和亮度。 商品酥皮色彩黯淡，与周围色彩融为一体，需要单独调整。
焦点图作为详情页的顶部模块， 卖点文字的制作可沿用移动端 焦点图思路，简洁展示即可。
卖点说明图可根据卖点来设计， 划分为2个部分，一部分采用图文
的方式展示蛋黄酥的手工制作流 程另一部分采用视频方式说明传
统手工制作工艺。
15
对于食品类商品而言，充分的信息展示 是吸引消费者的关键。因此，网店美工 可将信息展示图放在焦点图下方，整体 设计以方便消费者阅读为主，以确保消 费者能够迅速获取到所需的信息。