零基础电商设计全套技能修炼

第1章 电商设计的基础知识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．4　3D立体字的制作方法069
3．4．1　3D选项栏069
3．4．2　3D工具069
3．4．3　3D面板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章　Cinema 4D在电商设计中的应用
技巧101
9．1　Cinema 4D软件在电商设计中的应用范畴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．2　Cinema 4D在电商设计中的应用实操详解104
实战：约惠春天——简单场景的搭建104
实战：年终狂欢盛典——霓虹灯文字海报设计113
第10章　店招的设计与安放119
10．1　店招设计的规范与注意事项120
10．2　店招的风格类型有哪些120
10．2．1　品牌型120
10．2．2　活动促销型121
10．2．3　产品推广型121
实战：全屏店招的制作与安放121
拓展练习：制作一个服装店铺的店招128
第11章　导航栏设计129
11．1　导航栏常见类型　130
11．1．1　按显示方式划分130
11．1．2　按位置划分130
11．2　导航栏的宝贝分类与管理设置　130
实战：制作护肤品店铺的页头导航栏131
实战：制作装饰灯店铺的页尾导航栏132
实战：通过CSS代码修改导航栏133
拓展练习：制作一个服装店铺页头导航栏134
第12章　海报设计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．5　S/Z形构图137
12．3　电商海报的设计要点　137
12．3．1　主题突出137
12．3．2　风格明确137
12．3．3　构图合理137
12．3．4　细节完善138
实战：简约海报的制作与安放　138
拓展练习：制作一张服装店铺的海报142
第13章　宝贝陈列区设计143
13．1　宝贝陈列区设计的要点　144
13．1．1　直截了当144
13．1．2　重点突出144
13．1．3　整体统一144
13．2　“宝贝推荐”模块的设置方法144
实战：制作茶叶自定义陈列区页面146
拓展练习：制作一个零食自定义陈列区页面148
第14章　详情页设计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
第15章　页尾设计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
第16章　店铺收藏栏设计175
16．1　店铺收藏栏的设计要点176
16．1．1　好看的图标176
16．1．2　必要的提示文字176
16．2　店铺收藏栏的设计与制作176
实战：制作服装店铺收藏栏176
实战：制作促销型收藏栏　177
实战：制作动态型收藏栏　178
拓展练习：制作一个化妆品店铺收藏栏180
第17章　首页背景设计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
第18章　直通车图的设计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
第19章　钻展图设计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．2　Dreamweaver常用功能解析241
22．2．1　HTML标签的使用241
22．2．2　Div的布局243
实战：制作弹出层代码244
实战：制作手风琴代码246
实战：制作倒计时代码248
实战：制作旋转木马代码251
拓展练习：制作一个倒计时效果的海报252