Photoshop 淘宝店面设计从入门到精通

本书由一线讲师和设计师倾力编写，系统地讲解了在淘宝店面设计、淘宝店面运营、视觉营销、网店界面设计工作中的一些设计技巧和应用技巧。

本书共分3部分。基础知识部分（第1～2章）主要介绍淘宝店面设计中的一些基础知识，包括淘宝界面设计之前如何从浏览者的角度思考页面的布局构成、如何洞察浏览者的需求、如何明确网站的设计焦点及Photoshop CC软件新添加的一些主要功能等；重点技巧应用部分（第3～11章）重点讲解了淘宝店面设计中的各个组成要素的制作技巧、表现技巧和应用技巧，主要包括色彩的搭配、色彩的情感心理、网店店招、网店LOGO、网店促销海报、网店视觉艺术字、商品详情页的设计技巧及Photoshop核心知识点在应用中的设计技巧；综合实战部分（第12～13章）以淘宝店面设计中常用的表现技巧和应用技巧为着陆点，重点与读者分享了女鞋店铺界面的详细思索过程和设计过程。

附赠87个约600分钟多媒体语音教学视频，详细讲解了核心知识点和主要案例的设计制作过程。还收录了所有案例的素材文件，可提高读者的学习效率。

本书适合于在校学生、广告设计爱好者阅读学习，也适合作为相关专业毕业生实训、社会培训班、相关培训机构的教材。

,

第01章　Photoshop CC设计淘宝店面的4项基本常识
1．1 设计师必知的Photoshop CC软件7项新功能　016
1．1．1 无损缩放让大图、小图都清晰　016
1．1．2 消除抖动，让宝贝更靓丽　017
1．1．3 圆角矩形及CSS复制　018
1．1．4 形状和路径的应用更简单　019
1．1．5 智能移除，让页面宝贝更突出　020
1．1．6 径向滤波器，让宝贝尽显魅力　020
1．1．7 更智能化的切图功能　021
1．2 确定店面尺寸的3个重要事项　022
1．2．1 淘宝界面设计的两个重要概念要知晓　022
1．2．2 灵活改变画布的大小　022
1．2．3 淘宝店面设计中常用的图像尺寸　023
1．3 淘宝店面图像设计应知的3项常识　023
1．3．1 新建文件，你真的了解吗　024
1．3．2 了解图像的保存格式很重要　024
1．3．3 Web图像优化的3个关键点　025
1．4 裁剪图像的3种方法　025
1．4．1 图像裁切的3个技巧　025
1．4．2 基本裁切　026
1．4．3 透视裁剪　027
1．4．4 标尺与参考线的应用　027

第02章　淘宝店面设计必知的6件事情
2．1 淘宝店面设计中的4种视觉设计元素　030
2．1．1 点元素　030
2．1．2 线元素　030
2．1．3 面元素　031
2．1．4 花纹和图案　031
2．2 淘宝店面设计应该遵循的4种创意原则　032
2．2．1 给浏览者一个好的印象：界面布局要美观　032
2．2．2 主题明确 主体突出　033
2．2．3 统一性　034
2．2．4 直观简洁　034
2．3 用户体验设计两个要点　035
2．3．1 产品图片设计需要注意的6个问题　035
2．3．2 产品详情页面设计的3项要点　037
2．4 人气店面设计的5条秘籍　037
2．4．1 店招，不得不说的秘密　038
2．4．2 横幅海报，不可替代的视觉表现区　038
2．4．3 导航与分类设计的要点：清晰、简单　039
2．4．4 提升单击量的隐形推手：正确的选用素材　039
2．4．5 细节展示的技巧要知道：排顺序　040
2．5 设计师必须知道的8 种设计构图　040
2．5．1 中心构图　040
2．5．2 三角形构图　041
2．5．3 黄金分割构图　041
2．5．4 九宫格构图　041
2．5．5 框架式构图　042
2．5．6 放射式构图　042
2．5．7 并置式构图　043
2．5．8 对称式构图　043
2．6 淘宝店面设计中常用的3 种基本构图技巧　043
2．6．1 对比　043
2．6．2 对称　044
2．6．3 反复　044

第03章　淘宝店面中的7种主要元素
3．1 淘宝店面中的7 种主要元素　046
3．1．1 店铺标志　046
3．1．2 店招　046
3．1．3 导航　047
3．1．4 公告　048
3．1．5 促销栏　048
3．1．6 宝贝展示　048
3．1．7 宝贝描述　048
3．2 淘宝店面元素设计的11个重要知识点提炼　049
3．2．1 修复图像　049
3．2．2 修补图像　050
3．2．3 内容感知　051
3．2．4 图层的原理在店面设计中的3个应用技巧　052
3．2．5 图层的不透明度　055
3．2．6 图层蒙版　056
3．2．7 合并图层与盖印图层　057
3．2．8 文字字符的栅格化　057
3．2．9 形状工具在网店界面设计中的4点应用技巧　058
3．2．10 形状图层的高级应用技巧　059
3．2．11 选框工具的使用　060

第04章　淘宝店面设计的7大设计误区
4．1 淘宝店面设计的7大设计误区　062
4．1．1 杂乱　062
4．1．2 过多的说明文字　062
4．1．3 关联推荐商品太多　063
4．1．4 主体海报设计缺乏创意和吸引力　063
4．1．5 主要推荐商品没有“跳”出来　064
4．1．6 商品陈列的无序　064
4．1．7 信息传递的不明确性　065
4．2 设计优秀界面的入门必修课：抠图常用的4种方法　066
4．2．1 磁性套索抠图　066
4．2．2 钢笔工具抠图　066
4．2．3 使用通道和蒙版抠图　067
4．2．4 使用其他插件抠图　068
4．3 重要知识点索引：创建精准选区的5个重要知识点　069
4．3．1 创建选区一定要精准　069
4．3．2 基于色调差异创建选区：魔棒与快速选择工具　071
4．3．3 选区操作中的加减运算　071
4．3．4 “调整边缘”不得不提的重点技巧　072
4．3．5 通道与蒙版：不得不说的黑白灰　072
4．4 创建商品倒影的4种常用技巧　074
4．4．1 平面水平类商品的倒影　074
4．4．2 酒饮类商品的倒影　074
4．4．3 45°放置的商品的倒影　075
4．4．4 重叠放置的商品的倒影　075

第05章　淘宝店面中常见的5种装饰性元素
5．1 淘宝店面中常见的5种装饰性元素　078
5．1．1 书法与文化元素　078
5．1．2 线框　078
5．1．3 按钮　079
5．1．4 标签　079
5．1．5 指引标示　079
5．2 5 则装饰性元素的设计案例　080
5．2．1 书法与文化　080
5．2．2 线框　081
5．2．3 按钮　082
5．2．4 标签　083
5．2．5 指引标示　083
5．3 重要知识点提炼：常用形状工具的另类讲解　084
5．3．1 巧用形状让页面信息更有逻辑　084
5．3．2 巧用图形让页面信息更有说服力　085
5．3．3 图形与色彩“结亲”　085
5．3．4 图形之间的“1+1”　086

第06章　淘宝店面中“吸引眼球”的7种形式
6．1 淘宝店面中“吸引眼球”的7种形式　088
6．1．1 视觉层次　088
6．1．2 色彩的妙用　088
6．1．3 文字　088
6．1．4 标示　089
6．1．5 光影效果　089
6．1．6 边框　089
6．1．7 留白　090
6．2 增强店面视觉营销效果的4种策略　090
6．2．1 减少画面中需要浏览者记忆的材料数量　090
6．2．2 遵循基本的视觉浏览习惯　091
6．2．3 增加视觉刺激的维度　091
6．2．4 选择最直观、最直接的表现形式　091
6．3 5 则商品促销广告的设计　092
6．3．1 用色彩吸引注意力：男士手表促销广告　092
6．3．2 用文字吸引注意力：“双11”商城促销广告　094
6．3．3 用边框来聚焦注意力：户外鞋促销广告　095
6．3．4 用小巧的标签吸引注意力：手机打折广告　097
6．3．5 用色彩渐变吸引注意力：羽绒服促销广告　098
6．4 常用工具另类讲解：10个重要知识点　100
6．4．1 模糊与锐化　100
6．4．2 加深与减淡　101
6．4．3 源与目标对象　100
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章　淘宝店面设计中的色彩知识
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设计
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章　淘宝店面中情感文字的设计
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章　店铺促销海报设计与导航设计
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个拓展工具
11．1 设计师的网页配色利器：Color Scheme Designer　226
11．2 Xara 3D：轻松制作三维立体字　226
11．3 Flame_Painter：快速制作网页中的光影　227
11．4 Photoshop 精密抠图插件：Vertus Fluid Mask　229
11．5 支持矢量图浏览的软件：ST Thumbnails Explorer　230

第12章　女鞋店铺首页设计的完全案例
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章　商品描述页的设计
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