韩鹏(网名沫沫) 字体“毛遂体”原创者，腾讯设计大咖秀特邀大咖讲师，韩绍杰网络课堂电商设计首席讲师，2015年开发了“店铺装修助手”为广大用户提供便利。

章电商设计的基础知识021
1．1电商设计概述022
1．1．1什么是电商设计022
1．1．2电商设计的基本内容022
1．1．3电商设计师的就业前景022
1．2电商设计师需要具备的基本能力023
1．2．1熟练使用设计软件023
1．2．2合理运用设计理念023
1．2．3学会视觉营销023
1．2．4掌握与团队沟通协作的能力023
1．3电商设计的四大法则024
1．3．1合理的店铺定位024
1．3．2耐看的版式026
1．3．3和谐的颜色搭配029
1．3．4舒服的字体搭配033
1．4关于店铺装修的一些基础知识033
1．4．1电商网页的结构与布局033
1．4．2电商网页的尺寸034
1．4．3淘宝旺铺034
1．4．4图片空间的使用036
1．4．5店铺装修的基础流程037
1．4．6图片的切割、优化与存储040
第2章如何处理淘宝图片043
2．1图片的基本处理方法044
2．1．1调整图像的大小044
2．1．2裁剪图片044
2．1．3更改图片格式045
2．2抠图045
2．2．1使用“魔棒工具”抠图045
2．2．2使用“钢笔工具”抠图046
2．2．3使用“调整边缘”抠图046
2．2．4使用“通道”抠图047
2．3调色047
2．3．1使用“色相/饱和度”调色047
2．3．2使用“色彩平衡”调色048
2．3．3使用“可选颜色”调色048
2．4其他常见问题的解决方法048
2．4．1对比度不够怎么办049
2．4．2如何虚化背景，突出主体049
2．4．3如何使用“仿制图章工具”修除瑕疵049
2．4．4如何使用“修补工具”去除人物眼袋050
2．4．5巧用“滤镜”，让人物皮肤变得光滑050
2．4．6巧用“蒙版”与“曲线”，让人物皮肤变白051
2．4．7巧用“液化”，对人物进行瘦身051
2．4．8如何进行图片的合成处理052
2．4．9如何添加和去除水印053
2．5电商产品图精修综合实战054
实战：不锈钢水壶图片精修案例详解054
实战：洗面奶图片精修案例详解058
实战：人像精修案例详解059
第3章常用电商字体的制作方法061
3．1字体的下载与安装062
3．2字体设计的三大炫酷技法063
3．2．1矩形造字063
3．2．2钢笔造字064
3．2．3字库改字065
3．3常用电商字体的制作与解析066
3．3．1折纸字体066
3．3．2粉笔字体067
3．3．3毛笔字体068
3．43D立体字的制作方法069
3．4．13D选项栏069
3．4．23D工具069
3．4．33D面板069
3．4．4属性面板069
实战：“双十一大促”3D立体字制作案例解析070
第4章电商LOGO的制作方法071
4．1常见类型的电商LOGO分析072
4．1．1字母型072
4．1．2文字型072
4．1．3吉祥物型072
4．1．4组合型072
4．2电商LOGO的制作要点说明073
4．2．1具备代表性073
4．2．2具备企业特征073
4．2．3具备易传播性073
4．2．4具备整体性073
4．3电商LOGO的制作073
实战：制作亿摆品牌的LOGO073
实战：制作厚德品牌的LOGO075
第5章电商GIF动图的制作方法077
5．1电商GIF动图的使用类型078
5．1．1导航栏动态图078
5．1．2页面动态图078
5．2电商GIF动图的制作078
实战：制作360°宝贝展示动图078
实战：制作下雪动态图080
实战：制作圆球动态图082
第6章电商醒目标识的制作方法083
6．1电商醒目标识的类型084
6．2电商醒目标识的制作084
实战：制作对话框标识084
实战：制作边角标识085
实战：制作箭头标识086
实战：制作爆炸多边形标识087
第7章投影效果的制作方法089
7．1投影效果制作的要点090
7．2常见的投影效果的制作与解析090
7．2．1按效果分类090
实战：制作模糊投影090
实战：制作渐变投影091
实战：制作扁平化长投影091
7．2．2按形态分类092
实战：制作正方体投影092
实战：制作圆柱体投影093
实战：制作长方体投影094
第8章时间轴的认识与应用095
8．1时间轴的概念096
8．2时间轴的设置与应用096
8．2．1主图视频096
8．2．2详情页动态图096
实战：时间轴的设置与应用案例解析096
实战：时间轴在动态店招制作中的运用098
第9章Cinema4D在电商设计中的应用技巧101
9．1Cinema4D软件在电商设计中的应用范畴102
9．1．1制作金属文字102
9．1．2制作可爱气球字102
9．1．3制作霓虹灯文字102
9．1．4拟人化建模103
9．1．5制作低多边形场景103
9．1．6制作城市建筑场景103
9．1．7商业产品建模104
9．2Cinema4D在电商设计中的应用实操详解104
实战：约惠春天——简单场景的搭建104
实战：年终狂欢盛典——霓虹灯文字海报设计113
0章店招的设计与安放119
10．1店招设计的规范与注意事项120
10．2店招的风格类型有哪些120
10．2．1品牌型120
10．2．2活动促销型121
10．2．3产品推广型121
实战：全屏店招的制作与安放121
拓展练习：制作一个服装店铺的店招128
1章导航栏设计129
11．1导航栏常见类型130
11．1．1按显示方式划分130
11．1．2按位置划分130
11．2导航栏的宝贝分类与管理设置130
实战：制作护肤品店铺的页头导航栏131
实战：制作装饰灯店铺的页尾导航栏132
实战：通过CSS代码修改导航栏133
拓展练习：制作一个服装店铺页头导航栏134
2章海报设计135
12．1电商海报的意义136
12．1．1传达产品信息136
12．1．2增强画面艺术表现力136
12．1．3增加画面趣味136
12．2电商海报的常用版式136
12．2．1左文右图/左图右文136
12．2．2左右产品，中间文案136
12．2．3居中构图137
12．2．4三角构图137
12．2．5S/Z形构图137
12．3电商海报的设计要点137
12．3．1主题突出137
12．3．2风格明确137
12．3．3构图合理137
12．3．4细节完善138
实战：简约海报的制作与安放138
拓展练习：制作一张服装店铺的海报142
3章宝贝陈列区设计143
13．1宝贝陈列区设计的要点144
13．1．1直截了当144
13．1．2重点突出144
13．1．3整体统一144
13．2“宝贝推荐”模块的设置方法144
实战：制作茶叶自定义陈列区页面146
拓展练习：制作一个零食自定义陈列区页面148
4章详情页设计149
14．1详情页的设计要点与规范150
14．1．1设计要点150
14．1．2布局的基本规范150
14．1．3尺寸规范151
14．2设计详情页时常见的问题151
14．2．1无休止的文字151
14．2．2过多的优惠信息151
14．2．3牛皮癣图的滥用152
14．3详情页的制作流程分析152
14．3．1设定页面风格152
14．3．2收集素材152
14．3．3确立布局框架152
14．3．4确定配色方案153
14．3．5选择字体153
14．3．6对文字和图片进行排版154
14．3．7确认定稿154
14．3．8切片存储154
14．3．9完成上传155
实战：制作女装的详情页155
拓展练习：制作一个男装详情页166
5章页尾设计167
15．1页尾的分类168
15．1．1返回顶部型168
15．1．2文字说明型168
15．1．3分类导航型168
15．2页尾设计的注意事项169
15．2．1设计要简约169
15．2．2使用图案元素169
15．2．3设计风格要统一169
15．2．4字号要小170
15．2．5包含的信息要全170
15．3页尾的设计与制作170
实战：制作返回顶部型页尾170
实战：制作旺旺客服页尾171
实战：制作分类导航型促销页尾173
拓展练习：制作一个文字说明型页尾174
6章店铺收藏栏设计175
16．1店铺收藏栏的设计要点176
16．1．1好看的图标176
16．1．2必要的提示文字176
16．2店铺收藏栏的设计与制作176
实战：制作服装店铺收藏栏176
实战：制作促销型收藏栏177
实战：制作动态型收藏栏178
拓展练习：制作一个化妆品店铺收藏栏180
7章首页背景设计181
17．1首页背景的分类182
17．1．1固定型182
17．1．2固定悬浮型182
17．1．3交替型182
17．1．4滚动型182
17．2首页背景的制作方法182
实战：制作固定型首页背景182
实战：制作固定悬浮型首页背景183
实战：制作交替型首页背景184
实战：制作滚动型首页背景185
拓展练习：制作一个固定悬浮型首页背景186
8章直通车图的设计187
18．1直通车的分类188
18．1．1店铺直通车188
18．1．2产品直通车188
18．2直通车图设计的基本流程189
18．2．1根据产品标题和卖点提炼文案189
18．2．2选产品图和确定主色调189
18．2．3使文案与产品图相互配合190
18．3常见的直通车图的构图方式190
18．3．1左右构图190
18．3．2上下构图191
18．3．3对角线构图191
实战：制作剃须刀直通车图192
实战：制作净水机直通车图194
实战：制作空气炸锅直通车图196
拓展练习：制作一个剃须刀直通车图198
9章钻展图设计199
19．1钻展图的分类200
19．1．1单品推广200
19．1．2活动店铺推广200
19．1．3品牌推广200
19．2钻展图的制作200
实战：制作家用榨汁机钻展图200
实战：制作食品店铺的钻展图202
拓展练习：制作一个食品店铺钻展图204
第20章电商设计综合实战案例详解205
20．1案例概述206
20．1．1确定店铺风格206
20．1．2确定模块数量，搭建框架206
20．1．3确定尺寸206
20．2店招/导航栏设计206
20．2．1设计前的构思207
20．2．2操作步骤207
20．3全屏海报设计209
20．3．1设计前的构思209
20．3．2操作步骤210
20．4宝贝列表设计213
20．4．1设计前的构思214
20．4．2操作步骤214
20．5详情页设计217
20．5．1首焦海报设计217
20．5．2产品基本信息栏设计219
20．5．3产品细节展示栏设计222
20．5．4售后说明栏设计223
20．6页尾设计225
20．6．1设计前的构思225
20．6．2操作步骤225
20．7优惠券设计225
20．7．1设计前的构思226
20．7．2操作步骤226
20．8客服中心栏设计226
20．8．1设计前的构思226
20．8．2操作步骤227
20．9直通车图设计228
20．9．1设计前的构思228
20．9．2操作步骤228
20．10钻展图设计229
20．10．1设计前的构思230
20．10．2操作步骤230
拓展练习：坚果零食店铺的首页设计230
第21章移动端店铺的装修技巧与方法231
21．1移动端店铺装修的常用模块详解232
21．1．1店招模块232
21．1．2智能宝贝模块232
21．1．3美颜切图模块232
21．1．4图片模块233
21．1．5焦点图模块233
21．1．6自定义模块233
21．2移动端店铺的装修流程234
21．2．1登录淘宝网234
21．2．2进入装修页面234
21．2．3装修首焦海报页面234
21．2．4装修优惠券页面235
21．2．5装修宝贝展示页面235
实战：移动端化妆品店铺装修案例详解236
拓展练习：装修移动端坚果零食店铺的首页238
第22章代码的知识与制作方法239
22．1认识Dreamweaver240
22．1．1菜单栏240
22．1．2插入栏240
22．1．3文档工具栏240
22．1．4文档窗口241
22．1．5属性栏241
22．2Dreamweaver常用功能解析241
22．2．1HTML标签的使用241
22．2．2Div的布局243
实战：制作弹出层代码244
实战：制作手风琴代码246
实战：制作倒计时代码248
实战：制作旋转木马代码251
拓展练习：制作一个倒计时效果的海报252

这是一本讲解电商设计基础知识与实战方法的专业教程。本书从学以致用的角度出发，讲解了电商设计行业的现状与前景，以及电商设计师应该具备的基本技能。同时，本书以软件操作、配色与版式设计、店铺装修、图片的处理、字体的设计与排版等基本技法为支撑，依次对淘宝店招、导航栏、电商海报、宝贝陈列区、宝贝详情页、页尾图、店铺收藏栏、店铺首页背景、直通车图、钻展图，以及手机淘宝店铺装修等知识进行了多方面的分析与讲解。作者精选了大量工作中的实战案例，目的是让读者能够快速地提升实战技能，从电商设计小白晋升为专业的电商设计师。随书附赠所有案例的源文件、素材文件和在线教学视频，读者可扫描资源与支持页中二维码获取，跟随书中的内容进行学习与操作。本书适合淘宝美工初学者、想要从事网店美术设计的电商设计师、淘宝店店主及设计爱好者学习使用，也可作为电商设计培训讲师和大、中专院校相关专业老师的教学参考书。