第01章Photoshop CC设计淘宝店面的4项基本常识 16
1.1设计师必知的Photoshop CC软件7项新功能 16
1.1.1无损缩放让大图、小图都清晰 16
1.1.2消除抖动，让宝贝更靓丽 17
1.1.3圆角矩形及CSS复制 18
1.1.4形状和路径的应用更简单 19
1.1.5智能移除，让页面宝贝更突出 20
1.1.6径向滤波器，让宝贝尽显魅力 20
1.1.7更智能化的切图功能 21
1.2确定店面尺寸的3个重要事项 22
1.2.1淘宝界面设计的两个重要概念要知晓 22
1.2.2灵活改变画布的大小 22
1.2.3淘宝店面设计中常用的图像尺寸 23
1.3淘宝店面图像设计应知的3项常识 23
1.3.1新建文件，你真的了解吗 24
1.3.2了解图像的保存格式很重要 24
1.3.3 Web图像优化的3个关键点 25
1.4裁剪图像的3种方法 25
1.4.1图像裁切的3个技巧 25
1.4.2基本裁切 26
1.4.3透视裁剪 27
1.4.4标尺与参考线的应用 27
第02章 淘宝店面设计必知的6件事情 30
2.1淘宝店面设计中的4种视觉设计元素 30
2.1.1点元素 30
2.1.2线元素 30
2.1.3面元素 31
2.1.4花纹和图案 31
2.2淘宝店面设计应该遵循的4种创意原则 32
2.2.1给浏览者一个好的印象：界面布局要美观 32
2.2.2主题明确主体突出 33
2.2.3统一性 34
2.2.4直观简洁 34
2.3用户体验设计两个要点 35
2.3.1产品图片设计需要注意的6个问题 35
2.3.2产品详情页面设计的3项要点 37
2.4人气店面设计的5条秘籍 37
2.4.1店招，不得不说的秘密 38
2.4.2横幅海报，不可替代的视觉表现区 38
2.4.3导航与分类设计的要点：清晰、简单 39
2.4.4提升单击量的隐形推手：正确的选用素材 39
2.4.5细节展示的技巧要知道：排顺序 40
2.5设计师必须知道的8种设计构图 40
2.5.1中心构图 40
2.5.2三角形构图 41
2.5.3黄金分割构图 41
2.5.4九宫格构图 41
2.5.5框架式构图 42
2.5.6放射式构图 42
2.5.7并置式构图 43
2.5.8对称式构图 43
2.6淘宝店面设计中常用的3种基本构图技巧 43
2.6.1对比 43
2.6.2对称 44
2.6.3反复 44
第03章 淘宝店面中的7种主要元素 46
3.1淘宝店面中的7种主要元素 46
3.1.1店铺标志 46
3.1.2店招 46
3.1.3导航 47
3.1.4公告 48
3.1.5促销栏 48
3.1.6宝贝展示 48
3.1.7宝贝描述 48
3.2淘宝店面元素设计的11个重要知识点提炼 49
3.2.1修复图像 49
3.2.2修补图像 50
3.2.3内容感知 51
3.2.4图层的原理在店面设计中的3个应用技巧 52
3.2.5图层的不透明度 55
3.2.6图层蒙版 56
3.2.7合并图层与盖印图层 57
3.2.8文字字符的栅格化 57
3.2.9形状工具在网店界面设计中的4点应用技巧 58
3.2.10形状图层的高级应用技巧 59
3.2.11选框工具的使用 60
第04章 淘宝店面设计的7大设计误区 62
4.1淘宝店面设计的7大设计误区 62
4.1.1杂乱 62
4.1.2过多的说明文字 62
4.1.3关联推荐商品太多 63
4.1.4主体海报设计缺乏创意和吸引力 63
4.1.5主要推荐商品没有“跳”出来 64
4.1.6商品陈列的无序 64
4.1.7信息传递的不明确性 65
4.2设计优秀界面的入门必修课：抠图常用的4种方法 66
4.2.1磁性套索抠图 66
4.2.2钢笔工具抠图 66
4.2.3使用通道和蒙版抠图 67
4.2.4使用其他插件抠图 68
4.3重要知识点索引：创建精准选区的5个重要知识点 69
4.3.1创建选区一定要精准 69
4.3.2基于色调差异创建选区：魔棒与快速选择工具 71
4.3.3选区操作中的加减运算 71
4.3.4“调整边缘”不得不提的重点技巧 72
4.3.5通道与蒙版：不得不说的黑白灰 72
4.4创建商品倒影的4种常用技巧 74
4.4.1平面水平类商品的倒影 74
4.4.2酒饮类商品的倒影 74
4.4.3 45°放置的商品的倒影 75
4.4.4重叠放置的商品的倒影 75
第05章 淘宝店面中常见的5种装饰性元素 78
5.1淘宝店面中常见的5种装饰性元素 78
5.1.1书法与文化元素 78
5.1.2线框 78
5.1.3按钮 79
5.1.4标签 79
5.1.5指引标示 79
5.2 5则装饰性元素的设计案例 80
5.2.1书法与文化 80
5.2.2线框 81
5.2.3按钮 82
5.2.4标签 83
5.2.5指引标示 83
5.3重要知识点提炼：常用形状工具的另类讲解 84
5.3.1巧用形状让页面信息更有逻辑 84
5.3.2巧用图形让页面信息更有说服力 85
5.3.3图形与色彩“结亲” 85
5.3.4图形之间的“1＋1” 86
第06章 淘宝店面中“吸引眼球”的7种形式 88
6.1淘宝店面中“吸引眼球”的7种形式 88
6.1.1视觉层次 88
6.1.2色彩的妙用 88
6.1.3文字 88
6.1.4标示 89
6.1.5光影效果 89
6.1.6边框 89
6.1.7留白 90
6.2增强店面视觉营销效果的4种策略 90
6.2.1减少画面中需要浏览者记忆的材料数量 90
6.2.2遵循基本的视觉浏览习惯 91
6.2.3增加视觉刺激的维度 91
6.2.4选择最直观、最直接的表现形式 91
6.3 5则商品促销广告的设计 92
6.3.1用色彩吸引注意力：男士手表促销广告 92
6.3.2用文字吸引注意力：“双11”商城促销广告 94
6.3.3用边框来聚焦注意力：户外鞋促销广告 95
6.3.4用小巧的标签吸引注意力：手机打折广告 97
6.3.5用色彩渐变吸引注意力：羽绒服促销广告 98
6.4常用工具另类讲解：10个重要知识点 100
6.4.1模糊与锐化 100
6.4.2加深与减淡 100
6.4.3源与目标对象 101
6.4.4图像的智能修复 101
6.4.5纹理与图案 102
6.4.6复制与粘贴 103
6.4.7选区变换与对象变化的区别 105
6.4.8 遮盖与擦除有差异吗 105
6.4.9版面规划的两个重要工具 106
6.4.10页面元素的管理：图层分组 107
第07章 淘宝店面设计中的色彩知识 110
7.1色彩在店面设计中的3个作用 110
7.1.1渲染店面的特定氛围 110
7.1.2字体与色彩相互配合 110
7.1.3引导主次关系 110
7.2常见的5类行业配色方案 112
7.2.1休闲款女装店 112
7.2.2美容化妆品店 112
7.2.3家居电器店 112
7.2.4男性商品店 113
7.2.5童装店 113
7.3店面设计的3种配色秘籍 113
7.3.1“偷学”皇冠店铺的配色技巧 113
7.3.2“偷学”产品的标志用色 114
7.3.3储备2个常用的配色网站 115
7.4色彩调和的4种常用方法 115
7.4.1同种色调和 115
7.4.2邻近色调和 116
7.4.3对比色调和 116
7.4.4渐变色调和 116
7.5重要知识点提炼：Photoshop CC色彩的7种应用技巧 117
7.5.1巧妙设置色彩的明度 117
7.5.2巧妙设置色彩的饱和度的两种方法 117
7.5.3高效调整色彩的方法 118
7.5.4掌握渐变填充的技巧 119
7.5.5快速确定配色方案的利器：Kuler工具 120
7.6店招设计的5则案例 121
7.6.1店招设计的5个注意事项 121
7.6.2借用“点”的魅力设计男鞋店铺的店招 121
7.6.3凸显店铺主题的女鞋店招设计 122
7.6.4色彩与活动主题呼应的卫浴店铺的店招设计 124
7.6.5突出促销功能的包包店铺的店招设计 125
7.6.6高品质品牌男装店铺的店招设计 127
第08章 淘宝店面的LOGO设计 132
8.1认识网店LOGO：视觉营销的核心点 132
8.1.1网店LOGO承担的两个主要作用 132
8.1.2网店LOGO的3种常见类型 133
8.1.3网店LOGO设计常见的3种误区 134
8.2 LOGO设计常用的6种方法 135
8.2.1将笔画转换为曲线 135
8.2.2字与形共存 136
8.2.3直接使用店铺的名称 136
8.2.4借用七巧板 136
8.2.5修减 136
8.2.6巧用字母和数字 137
8.3 LOGO设计的5个步骤 137
8.3.1店铺的经营思路不同，设计效果有区别 137
8.3.2提炼网店LOGO的创意很重要 138
8.3.3草稿的绘制与改进 138
8.3.4色彩的应用 139
8.3.5正稿的设计 139
8.4网店LOGO设计案例5则 139
8.4.1简单图形的妙用：餐饮（休闲食品）店铺LOGO设计 139
8.4.2首写字母的魅力：男士领带店铺LOGO设计 140
8.4.3文字的局部变形：母婴用品店LOGO设计 142
8.4.4删减与统一：皮具用品店LOGO设计 144
8.4.5蒙版的奥妙：女式服饰店动态LOGO的设计 145
8.5网店LOGO设计的5个重要知识点提炼 147
8.5.1翻转 147
8.5.2旋转 148
8.5.3复制与缩放 148
8.5.4斜切与扭曲 149
8.5.5透视 149
第09章 淘宝店面中情感文字的设计 152
9.1淘宝店面中文字设计的4条基本原则 152
9.1.1页面文字的易读是必须的 152
9.1.2文字编排的美感很关键 152
9.1.3文字设计的鲜明风格很重要 153
9.1.4文字设计要有一定的创造性 153
9.2淘宝店面中的3种文字类型 154
9.2.1分类导航文字 154
9.2.2标题文字 154
9.2.3促销文字 155
9.3文案设计的4种重要技巧 156
9.3.1深度关注商品的特征 156
9.3.2整合优点 156
9.3.3利益，吸引客户的法宝 156
9.3.4信任，成单的通行证 157
9.3.5营销文案，我们应该这样写 157
9.4 5种情感文字的设计案例 157
9.4.1提升视觉冲击力：背景图案的衬托 157
9.4.2光影的运用：质感的标题艺术字 160
9.4.3氛围清晰的促销字 163
9.4.4运用构图原理制作促销文案 166
9.4.5运用图层原理快速设计促销立体字 168
9.5文字、文案设计的6个重要知识点提炼 169
9.5.1你真的会用“字符”吗 169
9.5.2你真的会用“段落”吗 172
9.5.3风格化滤镜组 174
9.5.4渲染滤镜组 175
9.5.5图层蒙版 176
9.5.6剪贴蒙版 177
第10章店铺促销海报设计与导航设计 180
10.1首先需要明白促销海报设计的内容是什么 180
10.2促销海报经常使用的5个版式 181
10.3设计促销海报必须知道的7个细节 182
10.3.1设计的主体必须要突出 182
10.3.2信息的编排层次要清晰 183
10.3.3目标消费对象的视觉审美特点要知晓 183
10.3.4标签和按钮不可少 183
10.3.5掌握色彩搭配的“631”很重要 184
10.3.6更有吸引力产品需要怎样调整色彩和色调 184
10.3.7如何设计恰当的背景更有影响力 185
10.4促销海报设计6则实例 185
10.4.1光影营造氛围：一则家用电器的海报设计 185
10.4.2整合素材的技巧：一则沐浴露产品的海报设计 188
10.4.3凸显产品的质感：一款男士皮鞋海报设计 191
10.4.4借用背景色与产品色：化妆品海报设计 193
10.4.5为产品注入个性：皮草促销海报设计 196
10.4.6借用光影提升产品质感：男士皮带海报设计 199
10.5重要知识点提炼：关于海报设计的9个重要知识点索引 201
10.5.1外部图像的置入 201
10.5.2网店图像色彩的明度解析 202
10.5.3曲线的奥妙：图像色彩3属性的调节 203
10.5.4还原宝贝的真实色彩：色彩平衡 204
10.5.5调节网页图像色调和通透度的技巧 206
10.5.6锐化：宝贝图像输出不可或缺的细节 208
10.5.7快速提取图像的白场和黑场 209
10.5.8透视变形：图像的透视校正 210
10.5.9镜头模糊滤镜：让商品的主体更突出 210
10.6掌握宝贝色调调整的5种技巧 212
10.6.1让“宝贝”的色调更通透：电饭锅调色 212
10.6.2让美味更有味：食品调色 213
10.6.3还原商品的原貌：皮包（箱）色彩调整 215
10.6.4色彩的多变：校正服饰的颜色 216
10.6.5饰品调色：色彩叠加的技巧 218
10.7导航的设计 220
10.7.1导航设计要注意4个基本要求 220
10.7.2必须知道淘宝店面的4种导航要素 221
10.7.3从浏览者角度设计导航，我们必须注意两点 222
10.7.4导航设计需要掌握的4点技巧 222
第11章淘宝店面设计常用的5个拓展工具 226
11.1设计师的网页配色利器：Color Scheme Designer 226
11.2 Xara 3D：轻松制作三维立体字 226
11.3 Flame_ Painter：快速制作网页中的光影 227
11.4 Photoshop精密抠图插件：Ⅵertus Fluid Mask 229
11.5支持矢量图浏览的软件：STThumbnails Explorer 230
第12章 女鞋店铺首页设计的完全案例 232
12.1创造浏览者的第1眼印象 232
12.1.1设计“情调”，提升购物的欲望 232
12.1.2导航设计，给出消费的原因 233
12.1.3作为设计师，应该知晓3种常见的店铺布局 234
12.1.4首屏设计的5种类型很重要 235
12.2恰当地分割页面的5个区域 237
12.2.1顶部形象区 237
12.2.2首屏吸引区 238
12.2.3营造氛围的促销区 238
12.2.4建立情感的交互区 240
12.2.5不可忽略的页脚区 240
12.3素材图像管理的3个技巧 240
12.3.1制定素材图像设计的标准 241
12.3.2素材的管理 241
12.3.3边框的添加 242
12.4女鞋店面设计案例 242
12.4.1店铺的店招设计 243
12.4.2店铺的导航设计 244
12.4.3主体促销海报设计 244
12.4.4热卖专区设计 246
12.4.5特色产品区的设计 248
12.4.6短鞋区的设计 251
12.4.7别致蕾丝＆长鞋区的设计 251
12.4.8店铺的页脚设计 251
第13章 商品描述页的设计 254
13.1详情页设计的5个W 254
13.1.1产品是什么 254
13.1.2好在哪里 254
13.1.3为什么要买 255
13.1.4“我”为什么要在这里买 255
13.1.5为什么现在就要买 255
13.2详情页设计的3个关键点 255
13.2.1浏览者关注的部位一定要注意 255
13.2.2用对比展现产品的品质 256
13.2.3产品细节与主要原料相关联 256
13.3商品描述页需要关注的4个编排要点 256
13.3.1版面的层次设计 256
13.3.2文案排版的条理性 258
13.3.3重点词汇的突出性 258
13.3.4色彩选择的连贯性 258
13.4设计过程 258
13.4.1商品的基本信息区域设计 259
13.4.2卖点解析 261
13.4.3产品主要卖点展示 263
13.4.4设计手稿 264
13.4.5产品展示部分的设计 265
13.4.6模特穿试 266
13.4.7产品参数及细节展示 267
13.4.8尺码设计 267
13.4.9关联商品区域的设计 268