本书是一本以淘宝美工综合技法案例实操教学为主的书，全方面地讲解美工设计师需具备的电商设计基本功底与美工实战技巧。以美工设计会涉及的软件、装修后台、配色及版式设计等基础知识和图片的处理、字体的设计与排版等基本技法为支撑，依次对淘宝店标、主图、电商海报、店铺首页背景、宝贝详情页、优惠券、客服中心栏、页尾图、无线视频，以及手机淘宝店铺的制作与安装等知识点进行全方位的实战演练与讲解，化难为易，聚散成整，让想要学习美工设计的读者朋友能够通过本书得到系统的学习与提升。

曾玉珍，笔名子若老师，平面设计师，淘宝美工设计师，8年电商从业经验，两年实战教学经验；服务过多家顶级的天猫旗舰店设计，有丰富的实践行业经验，擅长海报设计、淘宝天猫首页装修设计、手机端装修设计等，曾担任过腾讯课堂标杆行业的平面兼职讲师，历经8年的积累和沉淀。

01 美工设计的基本知识.......................17
1.1 概述.................................................18
1.2 认识Photoshop软件............................18
1.2.1 界面的基本介绍................................18
1.2.2 基础命令的介绍.................................19
1.3 认识CorelDRAW软件............................20
1.3.1 界面的基本介绍................................20
1.3.2 基础命令的介绍.................................20
1.4 认识Dreamweaver软件........................21
1.4.1 Dreamweave的编辑环境介绍.....................22
1.4.2 Dreamweave的基本功能介绍.................24
1.5 关于店铺装修后台的了解...................28
1.5.1 店铺首页的装修................................28
1.5.2 店铺详情页的装修.............................32
1.5.3 宝贝列表页的装修.............................34
02 配色的基础知识..............................37
2.1 认识色彩..........................................38
2.1.1 色彩的来源.......................................38
2.1.2 色彩模式的显示方式..........................38
2.1.3 RGB颜色模式......................................38
2.1.4 CMYK颜色模式....................................39
2.1.5 HSB颜色模式......................................39
2.2 色彩的三要素....................................41
2.2.1 色相..................................................41
2.2.2 明度..................................................42
2.2.3 饱和度...............................................44
2.3 色彩的心理学....................................45
2.3.1 色彩有冷暖........................................45
2.3.2 色彩有重量........................................46
2.3.3 色彩有远近........................................46
2.3.4 色彩有大小........................................46
2.3.5 色彩有味道........................................47
2.4 店铺色彩的搭配技巧..........................47
2.4.1 互补色搭配.......................................48
2.4.2 邻近色搭配........................................49
2.4.3 间隔色搭配........................................50
03 版式设计的基础知识......................51
3.1 什么是版式设计................................52
3.2 平面的构成原理.................................52
3.2.1 点.....................................................52
3.2.2 线......................................................53
3.2.3 面.....................................................54
3.3 版式设计的原则.................................54
3.3.1 思想性与单一性.................................55
3.3.2 艺术性与装饰性.................................55
3.3.3 趣味性与独创性.................................55
3.4 版式设计的类型.................................56
3.4.1 骨骼型..............................................56
3.4.2 满版型...............................................56
3.4.3 左右分割型........................................56
3.4.4 上下分割型........................................56
3.4.5 中轴型...............................................56
3.4.6 倾斜型...............................................56
3.4.7 曲线型...............................................57
3.4.8 对称型...............................................57
3.4.9 重心型................................................57
3.4.10 三角型............................................57
3.4.11 并置型............................................58
3.4.12 自由型............................................58
3.4.13 四角型............................................58
3.5 电商设计中的元素表现.......................58
3.5.1 重复..................................................58
3.5.2 类似..................................................58
3.5.3 渐变..................................................59
3.5.4 对比..................................................59
3.5.5 密集..................................................59
3.5.6 发射..................................................60
3.5.7 空间..................................................60
3.5.8 分割..................................................60
3.6 电商海报的排版技巧..........................60
3.6.1 对齐..................................................60
3.6.2 对比..................................................61
3.6.3 重复..................................................61
3.6.4 亲密..................................................62
04 图片处理的方法.............................63
4.1 几种常见的产品抠图方法...................64
4.1.1 婚纱人像的抠取................................64
实战：用色彩范围抠取人像...........................64
4.1.2 透明玻璃杯的抠取.............................66
实战：用通道抠取透明玻璃杯.......................66
4.1.3 纯色背景人像的抠取..........................68
实战：用色彩范围结合调整边缘抠取人像......69
4.1.4 人物发丝的抠取.................................71
实战：用多个命令与操作抠取发丝................71
4.1.5 火焰的抠取.......................................73
实战：用色彩范围结合混合模式抠取人像......73
4.2 如何去除/复制图像元素......................76
4.2.1 用仿制图章工具去除图像...................76
实战：去除图片中多余的花朵.......................76
4.2.2 用修复画笔工具去除图像 ..................76
实战：去除画面中多余的帆船.......................76
4.2.3 利用修复画笔工具复制图像 ...............77
实战：利用Alt键复制图像.............................77
4.2.4 用消失点功能去除杂物.......................78
实战：去除图像中多余的树叶.......................78
4.3 如何去除图片中的水印.......................79
4.3.1 用修补工具去除水印..........................79
实战：去除茶叶图片中的水印.......................79
4.3.2 用矩形选框工具去除水印....................80
实战：去除密码箱产品图中的水印................80
4.3.3 用借图法去除水印..............................80
实战：去除白色茶杯图片中的水印................81
4.3.4 利用选区+色阶+仿制图章工具去除水印 81
实战：去除挎包产品图中的链接....................82
4.3.5 用内容识别功能去除水印....................83
实战：去除素材图片中的水印.......................83
4.3.6 用魔棒工具去除水印..........................83
实战：去除折扇产品图中的水印....................83
4.4 用污点修复工具去除瑕疵...................84
实战：修复人物脸部的瑕疵...........................84
4.5 如何完成人物的磨皮处理...................85
4.5.1 光滑磨皮...........................................85
实战：人物脸部的光滑磨皮处理....................85
4.5.2 计算磨皮...........................................87
实战：半身人像的滤镜磨皮处理....................87
4.5.3 PortraitPlus一键磨皮.........................90
技术专题：PortraitPlus插件的下载与安装......90
实战：半身人像的润色美白磨皮处理.............91
4.6 产品图的调色处理和方法...................92
4.6.1 如何处理产品图过曝问题...................92
实战：女包产品图的过曝问题处理................92
4.6.2 如何处理产品图过暗..........................93
实战：女包产品图的过暗问题处理................93
4.6.3 如何给产品图校色..............................94
实战：苹果产品图的校色处理.......................94
4.6.4 如何给产品图换色..............................96
实战：女包产品图的换色处理.......................96
4.6.5 不同风格的调色处理...........................97
实战：唯美淡青色风格调色...........................97
实战：怀旧复古风格调色..............................99
技术专题：相框效果的添加.........................103
实战：日系淡色风格调色............................104
4.7 产品投影效果的制作........................108
4.7.1 接触阴影的制作...............................108
实战：男鞋产品图的阴影绘制与表现...........108
4.7.2 柔和阴影的制作...............................109
实战：茶杯产品图的阴影绘制与表现............109
4.7.3 投射阴影的制作...............................110
实战：顶光投射阴影效果的绘制与表现........110
实战：侧光投射阴影的绘制与表现..............110
4.7.4 产品倒影的制作...............................111
实战：纸箱水平倒影的制作与表现..............112
4.8 产品批处理的方法...........................113
实战：女鞋产品图的批处理.........................114
4.9 综合案例：钻戒精修........................115
4.9.1 产品的结构分析...............................116
4.9.2 操作步骤.........................................116
技术专题：关于投影的另外一种制作方法.....122
4.10 综合案例：面膜精修......................122
4.10.1 产品的结构分析.............................123
4.10.2 操作步骤.......................................123
05 字体的设计与排版........................131
5.1 概述...............................................132
5.2 字体的下载与安装...........................132
5.3 电商字体的风格划分........................133
5.3.1 秀丽柔美.........................................133
5.3.2 稳重挺拔.........................................133
5.3.3 活泼有趣.........................................134
5.3.4 苍劲古朴.........................................134
5.4 字体设计的原则与排版设计流程.......134
5.4.1 字体设计的原则...............................134
5.4.2 字体排版设计的基本流程..................134
5.5 毛笔字的制作与运用........................135
5.5.1 基本特点和使用途径........................135
5.5.2 设计要点..........................................135
实战：“开年大促”海报字体的制作...........136
5.6 3D字体的制作与运用........................141
5.6.1 基本特点和使用途径........................141
5.6.2 设计要点..........................................141
实战：“约惠情人节”海报字体的制作........141
06 淘宝店标的制作...........................147
6.1 什么是店标.....................................148
6.2 店标的制作格式与规范.....................148
6.3 静态店标的制作...............................148
实战：慕子小铺静态店标制作.....................148
6.4 动态店标的制作...............................150
实战：慕子小铺动态店标制作.....................150
07 产品主图的设计与制作................153
7.1 什么是产品主图..............................154
7.2 产品主图设计的三要素.....................154
7.2.1 产品图片.........................................154
7.2.2 文案................................................155
7.2.3 背景................................................155
7.3 常见的主图排版结构方式.................156
7.4 产品主图的五种展示角度.................156
7.5 创意主图的制作...............................157
7.5.1 展示位置介绍..................................157
7.5.2 设计原则.........................................157
实战：“电吹风”创意主图的制作..............158
7.6 直通车主图的制作...........................165
7.6.1 展示位置介绍..................................166
7.6.2 设计原则.........................................166
实战：“水云凝晚霜”直通车主图的制作....167
08 电商海报的设计与制作................175
8.1 什么是电商海报..............................176
8.2 全屏海报的制作...............................176
8.2.1 什么是全屏海报...............................176
8.2.2 全屏海报的设计意义.........................176
实战：彩妆品牌的全屏海报制作..................176
8.3 促销海报的制作...............................182
8.3.1 什么是促销海报...............................182
8.3.2 促销海报的设计意义........................182
实战：运动鞋品牌的促销海报制作..............182
09 店铺首页背景的制作、代码安装与发布....................................187
9.1 什么是店铺首页背景........................188
9.2 首页移动背景的制作与安装..............188
实战：女鞋店铺首页移动背景的制作............188
9.3 首页固定背景的制作与安装..............191
实战：女鞋店铺首页固定背景的制作...........191
10 宝贝详情页的制作、代码安装与发布..........................................195
10.1 什么是宝贝详情页.........................196
10.2 详情页的设计要点.........................197
10.3 详情页的结构拆分与说明...............198
10.4 宝贝详情页设计实战解析...............198
10.4.1 宝贝详情页的尺寸规范..................198
10.4.2 “黄金前三屏3秒注意力”原则.......198
实战：女鞋产品详情页的制作.....................199
11 优惠券的设计、代码安装与发布..213
11.1 什么是优惠券...............................214
11.2 优惠券的设置与发布.....................214
11.2.1 订购优惠券流程............................214
11.2.2 创建店铺优惠券.............................215
11.2.3 创建商品优惠券.............................216
11.2.4 创建包邮券...................................216
11.3 优惠券的领取位置说明..................217
11.3.1 在店招上方位置领取.....................217
11.3.2 在旺旺对话框右侧领取...................218
11.3.3 在宝贝详情页领取.........................218
11.3.4 在首页领取...................................218
11.4 优惠券的制作实战解析..................218
实战：制作一张女装店铺优惠券..................218
12 客服中心栏的设计、代码安装与发布..........................................225
12.1 什么是客服中心栏.........................226
12.2 客服中心栏背景的制作...................226
实战：用Photoshop制作客服中心栏背景.......226
实战：用Dreamweaver制作客服中心栏背景...228
12.3 如何在Dreamweaver中添加旺旺代码229
12.4 如何在Dreamweaver中添加旺旺头像229
12.5 如何将旺旺客服代码安装到店铺.....230
13 页尾图的设计、代码安装与发布..231
13.1 什么是页尾图...............................232
13.2 页尾图的制作实战解析...................232
实战：女鞋店铺页尾图的设计、代码安装与发布.............................................232
14 淘宝官方视频的制作、订购、上传与发布...................................239
14.1 什么是淘宝官方视频.....................240
14.2 淘宝官方视频的制作......................240
14.3 关于“淘宝官方无线视频”的订购..241
14.3.1 “无线视频”功能对于商家的划分..241
14.3.2 无线视频的订购流程......................241
14.4 视频的上传与发布方法..................242
14.4.1 将视频发布到手机淘宝首页............242
14.4.2 将视频发布到微淘.........................244
14.4.3 将详情页视频发布到手机淘宝首页..246
15 手机淘宝店铺的设计、代码安装与发布...................................249
15.1 装修后台的位置说明.....................250
15.2 装修后台的模块组成与介绍............250
15.3 综合案例：手机淘宝女鞋店铺的首页装修与发布.............................251
15.3.1 店招图片的制作、安装与发布........251
15.3.2 轮播图的制作、安装与发布............254
15.3.3 双列分类图片模块的制作与安装......256
15.3.4 自定义区模块的制作、切片与安装..260
15.3.5 优惠券模块的制作与安装................266
15.3.6 页尾图的制作、安装与发布............269
15.3.7 保存、发布与备份..........................271