第1章 网店装修美工设计快速入门
■ 1.1∣初步了解网店装修 ..... 001
1.1.1 什么是网店装修 ............ 001
1.1.2 网店装修的重要性 ......... 005
1.1.3 网店装修与转化率的
关系 .............................. 006
■ 1.2∣网店装修的风格 ........ 008
1.2.1 如何确定网店装修的
风格 ............................... 009
1.2.2 不同行业网店装修的
风格 ................................011
■ 1.3∣网店装修中需要注意
的问题 ....................... 012
1.3.1 装修图片的显示 ............ 012
1.3.2 适量使用闪图和特效 ..... 012
1.3.3 添加音乐要有讲究 ......... 013
1.3.4 控制装修图片的色彩 ..... 013
1.3.5 网店风格的选择 ............ 013
1.3.6 网店视频切忌过长 ......... 013
第2章 网店装修四大要点：图片、配色、布局与文字
■ 2.1∣准备图片素材 ............ 015
2.1.1 拍摄商品图片 ................ 015
2.1.2 收集修饰素材 ................ 017
■ 2.2∣网店色彩搭配 ............ 018
2.2.1 常见的配色方法 ............ 018
2.2.2 色彩与网店营销 ............ 020
2.2.3 不同色调的展示页面 ..... 021
■ 2.3∣不拘一格的页面
布局 ..........................023
2.3.1 页面布局的组成要素 ..... 023
2.3.2 常用的页面布局方式 ..... 024
■ 2.4∣准确、抢眼的文字 ..... 026
2.4.1 网店页面段落文字的
排列方式 ....................... 026
2.4.2 打造具有高表现力的
文字造型 ....................... 028
2.4.3 利用文字营造特定的
氛围 .............................. 030
第3章 网店装修六大技能
■ 3.1∣裁图——纠正商品图片
角度 ..........................032
3.1.1 调整图片大小 ................ 032
3.1.2 裁剪商品图片中多余的
图像 .............................. 033
3.1.3 对商品外形进行校正 ..... 034
■ 3.2∣抠图——选取商品替换
背景 ..........................035
3.2.1 快速抠取单色背景
图片 .............................. 035
3.2.2 抠取规则的商品图片 ..... 036
3.2.3 抠取多边形对象 ............ 037
3.2.4 抠取轮廓清晰的图片 ..... 038
3.2.5 精细抠取图像 ................ 039
3.2.6 抠取复杂或半透明
图像 .............................. 040
3.2.7 调整抠取的商品图像
边缘 .............................. 043
■ 3.3∣修图——完美展现商品
细节 ..........................044
3.3.1 去除多余的水印 ............ 044
3.3.2 局部去除多余内容 ......... 046
3.3.3 对模特进行美化处理 ..... 047
3.3.4 调整模特身形 ................ 049
3.3.5 对商品图像进行锐化
处理 .............................. 050
■ 3.4∣调色——校正有色差的
商品图片 ................... 051
3.4.1 调整图片的亮度 ............ 051
3.4.2 校正商品图片的白
平衡 .............................. 053
3.4.3 调整商品图片的色调 ..... 054
■ 3.5∣编辑——美化与修饰商品
图像 ..........................055
3.5.1 利用图层样式增强特
效感 .............................. 055
3.5.2 利用图层混合模式制作
特殊效果 ....................... 056
3.5.3 利用蒙版控制图像显示
效果 .............................. 058
3.5.4 制作GIF动态闪图 .......... 059
■ 3.6∣文字——商品信息辅助
说明 ..........................061
3.6.1 添加文字并设置格式 ..... 061
3.6.2 制作创意标题文字 ......... 062
3.6.3 对段落文字进行艺术化
编排 .............................. 063
第4章 店标与店招设计
■ 4.1∣网店店标的设计 ........ 065
4.1.1 店标的设计形态 ............ 065
4.1.2 不同行业的店标设计 ..... 066
■ 4.2∣课堂案例：水果网店店标
设计 ..........................067
4.2.1 设计理念 ....................... 067
4.2.2 技术要点 ....................... 068
4.2.3 实操演练 ....................... 068
■ 4.3∣了解网店店招与
导航 ..........................070
4.3.1 认识店招与导航 ............ 070
4.3.2 店招与导航的设计
思路 .............................. 071
■ 4.4∣课堂案例：母婴网店
店招与导航设计 ........ 072
4.4.1 设计理念 ....................... 072
4.4.2 技术要点 ....................... 072
4.4.3 实操演练 ....................... 072
■ 4.5∣综合实训 ................... 077
■ 4.6∣技能拓展 ................... 077
第5章 首焦轮播区和商品陈列区设计
■ 5.1∣首焦轮播区及其设计
思路 ..........................079
5.1.1 认识首焦轮播区 ............ 079
5.1.2 首焦轮播区的设计
思路 .............................. 081
■ 5.2∣课堂案例：节日主题的
5.2.1 设计理念 ....................... 081
5.2.2 技术要点 ....................... 082
5.2.3 实操演练 ....................... 082
■ 5.3∣商品陈列区视觉
设计 ..........................085
5.3.1 营造视觉动线 ................ 086
5.3.2 商品布局艺术化 ............ 088
■ 5.4∣课堂案例：当季热卖
商品陈列区设计 ........ 089
5.4.1 设计理念 ....................... 090
5.4.2 技术要点 ....................... 090
5.4.3 实操演练 ....................... 090
■ 5.5∣综合实训 ................... 095
■ 5.6∣技能拓展 ................... 096
第6章 首页设计——服饰网店
■ 6.1∣课堂案例：甜美女装网店
首页设计 ................... 098
6.1.1 设计理念 ....................... 098
6.1.2 技术要点 ....................... 099
6.1.3 实操演练 ....................... 099
■ 6.2∣课堂案例：可爱童装网店
首页设计 ................... 105
6.2.1 设计理念 ....................... 105
6.2.2 技术要点 ....................... 105
6.2.3 实操演练 ....................... 105
■ 6.3∣综合实训 ................... 113
第7章 首页设计——箱包网店
■ 7.1∣课堂案例：时尚拉杆箱
网店首页设计 ............ 115
7.1.1 设计理念 ........................115
7.1.2 技术要点 ........................115
7.1.3 实操演练 ........................116
■ 7.2∣课堂案例：女式箱包网店
首页设计 ................... 125
7.2.1 设计理念 ....................... 125
7.2.2 技术要点 ....................... 125
7.2.3 实操演练 ....................... 125
■ 7.3∣综合实训 ................... 133
第8章 商品详情页设计
■ 8.1∣商品详情页及其设计
思路 ..........................135
8.1.1 认识商品详情页 ............ 135
8.1.2 商品详情页的设计
思路 .............................. 136
■ 8.2∣课堂案例：零食网店商品
详情页设计 ................ 138
8.2.1 设计理念 ....................... 139
8.2.2 技术要点 ....................... 139
8.2.3 实操演练 ....................... 139
■ 8.3∣课堂案例：数码网店商品
详情页设计 ................ 145
8.3.1 设计理念 ....................... 145
8.3.2 技术要点 ....................... 145
8.3.3 实操演练 ....................... 145
■ 8.4∣综合实训 ................... 150
■ 8.5∣技能拓展 ................... 150
第9章 商品短视频制作
■ 9.1∣商品短视频的
作用 ..........................153
■ 9.2∣商品主图视频制作 ..... 154
9.2.1 设置视频项目属性并
导入素材 ....................... 155
9.2.2 修整素材 ....................... 156
9.2.3 添加字幕 ....................... 157
9.2.4 导出商品主图视频 ......... 159
9.2.5 按电商平台要求转换
视频文件 ....................... 161
■ 9.3∣商品详情页视频
制作 ..........................162
9.3.1 设置视频项目属性并
导入素材 ....................... 162
9.3.2 修整素材 ....................... 163
9.3.3 添加滤镜效果 ................ 165
9.3.4 添加转场效果 ................ 166
9.3.5 制作运动追踪动画 ......... 167
9.3.6 制作短视频字幕 ............ 169
9.3.7 添加音效并导出视频 ..... 170
■ 9.4∣综合实训 ................... 171
第10章 移动端网店装修美工设计
■ 10.1∣移动端网店页面结构
分析 ........................173
10.1.1 移动端网店页面的框架
结构 ............................ 173
10.1.2 移动端网店图片发布尺寸
要求 ............................ 174
■ 10.2∣移动端网店装修快速
入门 ........................176
10.2.1 保持网店设计风格的
一致性......................... 176
10.2.2 采用简单且便于操作的
设计方式 ..................... 176
10.2.3 网店色彩的设计与
选择 ............................ 178
■ 10.3∣课堂案例：美妆商品
直播秒杀主图设计 ... 180
10.3.1 设计理念 ..................... 180
10.3.2 技术要点 ..................... 181
10.3.3 实操演练 ..................... 181
第11章 移动端网店首页与详情页装修设计
■ 11.1∣移动端网店首页装修
设计 ........................186
11.1.1 店招的装修设计 .......... 187
11.1.2 轮播图片的装修设计 ... 189
11.1.3 优惠券的装修设计 ....... 190
11.1.4 商品分类导航的装修
设计 ............................ 191
11.1.5 商品分类展示的装修
设计 ............................ 191
■ 11.2∣移动端网店详情页装修
设计 ........................193
11.2.1 详情页装修的FABE
原则 ............................ 193
11.2.2 直截了当地突出商品
信息 ............................ 196
■ 11.3∣课堂案例：女装网店
年中盛典首页设计 ... 197
11.3.1 设计理念 ..................... 197
11.3.2 技术要点 ..................... 197
11.3.3 实操演练 ..................... 197