网店美工视觉设计项目式教程（全彩微课版）-图书-人邮教育社区

内容摘要

本书结合电子商务行业的特点，紧扣网店美工的职业技能要求，按照项目式讲解网店美工在实际的视觉设计工作中需要掌握的专业知识和实操技能。本书基于Photoshop 2020，着重讲解如何从商业角度实现网店视觉设计，帮助读者提升设计水平，掌握网店视觉设计的技术和技巧，解决如何获取设计灵感、如何提升网店商业价值，以及如何熟练使用Photoshop 2020等实际问题。全书共10个项目，包括网店视觉设计基础、网店商品图片实拍、网店商品图片精修、网店首页视觉设计、网店主图视觉设计、网店详情页视觉设计、网店推广图视觉设计、网店视频拍摄、网店视频的后期制作、综合练习等内容。
本书配有PPT课件、电子教案、教学大纲、案例素材、效果文件、课后习题参考答案、微课视频、题库及试卷系统等教学资源，用书教师可在人邮教育社区（ www.ryjiaoyu.com）免费下载。
本书可作为高等院校电子商务类专业相关课程的教材，也可作为准备或正在从事网店美工相关工作人员的参考书。

前言

随着电子商务市场的不断扩大，网上购物日益火爆，网店数量与商品种类快速增多，
这也增加了商家的竞争压力。有着同样价格、功能和品质的两件商品，通常要靠外观是否
具有吸引力来决定用户是否购买。视觉能激发人们的情绪反应，我们在注意到一件商品时，
通常会首先被其外观所吸引。消费者在网上购买任何商品前都无法触摸到实物，所以网店
美工要确定商品的风格，通过视觉设计展现商品，以实现吸引人们购买商品的目的。设计
是商业沟通的利器，并对展现商品的自身价值起着关键作用。
本书着重讲解如何从商业角度去实现网店美工视觉设计，结合网店美工的职业素养、
技能素养，融合设计思维与商业化思维，详细讲解网店的视觉设计方法，旨在提升读者的
视觉设计水平，帮助其胜任网店美工这一工作岗位。
本书编写特点如下。
1. 项目式教学，从入门到精通
本书采用项目式教学，紧密贴合课程教学大纲并满足广大教师的授课需求，基于
Photoshop 2020 版本，定位于零基础人群，从基础着手，根据网店的实际设计需要，循序
渐进地讲解视觉设计的理论与技能，以帮助读者实现网店美工视觉设计从入门到精通。

2. 内容丰富实用，结构清晰明了
本书从知识结构、内容逻辑等层面着力钻研、精心打磨，在知识讲解中穿插对应的图
示和案例，内容丰富且实用，具有较强的可读性与参考性。全书结构清晰明了，采用“项
目描述+ 课前预习+ 知识讲解+ 项目实践+ 项目拓展+ 思考与练习”的结构进行编写，
基础知识讲解与项目实践的篇幅比例设置为1∶1，以强化读者的实践能力，帮助读者全
方位地提升网店美工设计的实战技能。

3. 搭配充足案例，一站式教学
本书遵循应用性与实用性结合的原则，在每个项目中设置充足的案例与实践项目，一步
一图，图文并茂，手把手教会读者使用Photoshop 实现网店美工页面、商品图片的视觉设计；同时，本书基于实际教学需要，设置网店视频拍摄与后期制作的内容，通过Premiere 的案例讲解实现网店美工动态视觉设计，全方位实现网店美工技能覆盖。

4. 贯彻立德树人，落实素养教学
本书深入贯彻落实“党的二十大精神进教材”的指示，将素养教学与职业技能相融合，
设置“素养课堂”模块，充分挖掘“网店美工”课程蕴含的德育元素，在专业知识中融入与
家国情怀、创新思维、工匠精神、人文情怀、进取精神、责任意识等相关的内容，以“润物
无声”的方式将正确的理想信念传递给读者。

5. 微课视频讲解，配套资源充足
本书提供微课视频，读者扫描书中二维码即可观看相应视频。此外，本书还配备丰富的
教学资源，包括 PPT 课件、电子教案、教学大纲、案例素材、效果文件、课后习题参考答案、题库及试卷系统等，用书教师可在人邮教育社区（www.ryjiaoyu.com）免费下载。
本书在编写过程中得到了不少一线教师、精通网店美工设计的设计师及网店商家的大力
支持，他们为本书的案例选择和内容写作提出了很多宝贵的意见与建议，在此向他们表示诚
挚的感谢！
本书由王蕾蕾、刘志宝担任主编，罗屿、涂立利、白颖担任副主编。由于编者水平有限，
书中难免存在疏漏和不足之处，敬请广大读者批评指正。

本书特色

目录
项目1 网店视觉设计
基础 ........................ 1
项目描述 ......................................................1
课前预习 ......................................................2
1.1　网店视觉设计的目的与原则 ............. 3
1.1.1　注重网店实用性及功能性 ........ 3
1.1.2　注重网店视觉设计的审美性及艺
术性..........................................3
1.1.3　注重网店视觉设计的统
一性..........................................3
1.2　认识视觉设计的元素 ......................... 4
1.2.1　点 ............................................ 4
1.2.2　线 ............................................ 4
1.2.3　面 ............................................ 5
1.3　网店的色彩搭配技巧 ......................... 5
1.3.1　色彩分类 ................................. 5
1.3.2　色彩属性 ................................. 5
1.3.3　色彩调性 ................................. 8
1.3.4　色彩对比 ................................. 9
1.3.5　色彩搭配 ............................... 10
1.4　网店的文案创作 .............................. 11
1.4.1　文案的策划要点......................11
1.4.2　文案的写作技巧..................... 12
1.5　网店的文字设计 .............................. 12
1.5.1　字体的性格及常用字体 ...........13
1.5.2　网店字体设计及运用
原则........................................14
1.5.3　文字的排版技巧..................... 14
1.6　网店的页面布局 .............................. 15
1.6.1　页面布局设计的基本原则 .......15
1.6.2　巧用辅助线 ............................ 16
项目实践：鉴赏网店首页色彩与字体的
应用 .........................................16
项目拓展：网店美工的自我提升 ..............18
思考与练习 ................................................19
项目2 网店商品图片
实拍 .......................20
项目描述 ....................................................20
课前预习 ....................................................21
2.1　商品图片拍摄的要求 ....................... 22
2.1.1　突出商品 ............................... 22
2.1.2　画面清晰且大小适中 ............. 22
2.1.3　足够多的细节展示 ................. 22
2.1.4　准确还原商品色彩 ................. 22
2.2　拍摄器材的选择 .............................. 23
2.2.1　相机的选购要素..................... 23
2.2.2　常用的辅助器材..................... 24
2.2.3　相机的持握方式..................... 25
2.3　拍摄场景与布光 .............................. 26
2.3.1　拍摄场景 ............................... 26
2.3.2　光的特性 ............................... 27
2.3.3　常见的布光方法..................... 28
2.4　不同材质商品的拍摄技巧 ............... 29
2.4.1　吸光类商品拍摄..................... 29
2.4.2　反光类商品拍摄..................... 29
2.4.3　透明类商品拍摄..................... 29
2.5　构图的技巧 ...................................... 30
2.5.1　认识主体、陪体和背景 .......... 30
2.5.2　取景方位与取景角度 ............. 31
2.5.3　常用的构图方式..................... 32
2.6　商品拍摄的基本流程 ....................... 33
项目实践：女式夏季麻布服装实拍 ..........34
项目拓展：曝光三要素及其对画面
的影响 .....................................37
思考与练习 ................................................38
项目3 网店商品图片
精修 .......................39
项目描述 ....................................................39
课前预习 ....................................................40
3.1　认识图像处理软件Photoshop ....... 41
3.1.1　菜单栏与标题栏..................... 41
3.1.2　工具箱与工具选项栏 ............. 42
3.1.3　面板与状态栏 ........................ 42
3.2　掌握常用的调色命令 ....................... 43
3.2.1　亮度/对比度 ........................... 43
3.2.2　色阶....................................... 44
3.2.3　曲线....................................... 46
3.2.4　色相/饱和度 ........................... 49
3.2.5　色彩平衡 ............................... 50
3.3　掌握常用的修图工具 ....................... 51
3.3.1　污点修复画笔工具 ................. 51
3.3.2　修补工具 ............................... 52
3.3.3　“内容识别”命令 ................. 52
3.3.4　仿制图章工具 ........................ 53
3.3.5　“智能锐化”滤镜 ................. 54
项目实践：BB霜图片精修 ...................... 55
项目拓展：液化修饰使人物形象更
完美 ........................................65
思考与练习 ................................................67
项目4 网店首页视觉
设计 .......................68
项目描述 ....................................................68
课前预习 ....................................................69
4.1　网店首页的主要功能 ....................... 70
4.1.1　展示形象 ............................... 70
4.1.2　展示商品 ............................... 70
4.1.3　推广与营销 ............................ 70
4.1.4　引流....................................... 70
4.2　网店首页的核心模块 ....................... 70
4.2.1　店招与导航栏 ........................ 70
4.2.2　海报....................................... 70
4.2.3　优惠活动 ............................... 71
4.2.4　商品展示 ............................... 71
4.2.5　页尾....................................... 71
4.3　网店设计与风格定位 ....................... 72
4.4　店招与导航栏设计要点 ................... 72
4.4.1　展示品牌形象 ........................ 73
4.4.2　抓住商品定位 ........................ 73
4.4.3　设计风格 ............................... 73
4.4.4　尺寸与格式 ............................ 73
4.5　海报设计要点 .................................. 73
4.5.1　主题....................................... 74
4.5.2　风格....................................... 74
4.5.3　构图....................................... 74
4.5.4　配色....................................... 74
4.5.5　设计规范 ............................... 74
4.6　优惠券的设计要点 ........................... 75
项目实践：家居收纳网店首页设计 ..........75
项目拓展：网店视觉设计常用图像
格式 .........................................81
思考与练习 ................................................81
项目5 网店主图视觉
设计 .......................83
项目描述 ....................................................83
课前预习 ....................................................84
5.1　什么是主图 ...................................... 85
5.2　主图的设计要点 .............................. 85
5.2.1　商品图片 ............................... 85
5.2.2　卖点....................................... 85
5.2.3　促销信息 ............................... 86
5.2.4　设计风格 ............................... 86
5.2.5　设计规范 ............................... 86
5.3　调整商品图片尺寸 ........................... 86
5.4　裁剪商品图片 .................................. 87
5.5　抠图 ...................................................88
5.5.1　规则商品抠图 ........................ 88
5.5.2　简单背景抠图 ........................ 89
5.5.3　精细商品抠图 ........................ 90
5.5.4　半透明物体抠图..................... 93
项目实践：拉杆箱主图设计 .................... 95
项目拓展：批处理商品图片 ..................104
思考与练习 ............................................ 106
项目6 网店详情页视觉
设计 .....................107
项目描述 ................................................. 107
课前预习 ................................................. 108
6.1　详情页的主要组成部分 .................109
6.1.1　焦点图 ................................. 109
6.1.2　商品卖点图 ...........................110
6.1.3　商品信息描述图....................110
6.1.4　服务与售后图 .......................111
6.2　详情页设计的前期准备 ................. 112
6.2.1　深入了解商品 .......................112
6.2.2　进行市场调查 .......................112
6.2.3　分析调查结果，确定设计
思路......................................112
6.3　详情页的设计要点 ......................... 113
6.3.1　引发消费者的兴趣 ................113
6.3.2　激发消费者的潜在需求 .........113
6.3.3　赢得消费者的信任 ................113
6.3.4　促使消费者下单....................113
6.4　详情页的设计规范 ......................... 114
6.4.1　尺寸......................................114
6.4.2　图片大小与格式....................114
6.4.3　版面布局 ..............................114
6.4.4　设计风格 ..............................114
项目实践：卡通水杯详情页设计 ........... 116
项目拓展：图片的切片 ..........................122
思考与练习 ............................................. 124
项目7 网店推广图视觉
设计 .....................126
项目描述 ................................................. 126
课前预习 ................................................. 127
7.1　智钻图的视觉设计 .........................128
7.1.1　智钻图的展现方式 ............... 128
7.1.2　智钻图的投放步骤 ............... 128
7.1.3　智钻图的设计要点 ............... 129
7.2　直通车图的视觉设计 .....................129
7.2.1　直通车图的投放位置 ........... 129
7.2.2　直通车图的投放目的
和策略 ..................................130
7.2.3　直通车图的设计要点 ........... 130
项目实践①：制作智钻图 ......................131
项目实践②：制作直通车图 ..................133
项目拓展：H5页面 .................................137
思考与练习 ............................................. 141
项目8 网店视频拍摄 ..... 142
项目描述 ................................................. 142
课前预习 ................................................. 143
8.1　网店视频拍摄器材的准备 .............144
8.1.1　拍摄设备 ............................. 144
8.1.2　稳定设备 ............................. 144
8.1.3　灯光设备 ............................. 144
8.1.4　外置麦克风 .......................... 145
8.1.5　其他辅助设备 ...................... 145
8.2　网店中的视频类型 .........................145
8.3　网店视频拍摄的要求 .....................146
8.4　网店视频拍摄的流程 .....................147
8.4.1　了解要拍摄的商品 ............... 147
8.4.2　制订拍摄方案 ...................... 147
8.4.3　布置拍摄场景 ...................... 147
8.4.4　清点和检查设备、道具 ........ 147
8.4.5　拍摄视频 ............................. 148
8.5　网店视频拍摄的技巧 .....................148
8.5.1　画面构图的设计................... 148
8.5.2　用单反相机拍摄视频的
方法......................................149
8.5.3　网店视频拍摄的注意
事项......................................150
项目实践：拍摄迷你电热杯主图视频 ... 150
项目拓展：运动镜头 ..............................152
思考与练习 ............................................. 154
项目9 网店视频的后期
制作 .................... 155
项目描述 ................................................. 155
课前预习 ................................................. 156
9.1　认识视频编辑软件Premiere ........157
9.1.1　菜单栏 ................................. 157
9.1.2　“源”面板 .......................... 157
9.1.3　“节目”面板 ...................... 158
9.1.4　“项目”面板 ...................... 158
9.1.5　“工具”面板 ...................... 158
9.1.6　“时间轴”面板................... 158
9.2　视频的制作流程 ............................158
9.2.1　视频导入与捕获................... 158
9.2.2　视频剪辑 ............................. 158
9.2.3　视频调色 ............................. 159
9.2.4　添加转场与特效................... 159
9.2.5　添加音乐或旁白................... 159
9.2.6　添加字幕 ............................. 159
9.2.7　视频输出 ............................. 159
9.3　视频剪辑与制作的原则和技巧 .....159
9.3.1　镜头组接 ............................. 159
9.3.2　画面转场 ............................. 160
项目实践：后期制作迷你电热杯
主图视频 .............................. 162
项目拓展：手机视频剪辑App ...............169
思考与练习 ............................................. 170
项目10 综合练习 .......... 171
项目描述 ................................................. 171
课前预习 ................................................. 172
10.1　服装类网店分析 ...........................173
10.2　版式布局与配色分析 ...................173
10.2.1　版式布局 ........................... 173
10.2.2　配色分析 ........................... 174
项目实践：童装网店页面设计 ..............175
项目拓展：上传图片到素材中心 ........... 186
思考与练习 ............................................. 188