本书打破了传统脱离实际的单一软件讲解模式，从“学以致用”的角度出发，首先叙述
了网店美工在网店中的重要性、网店美工的设计法则、美学基础及视觉营销等内容，然后精
选了 Photoshop 在网店设计中的相关商业案例，系统并全面地讲解了 Photoshop 网店美工的实
战应用和技能知识。
全书共分 9 章，浅入深出地讲解了电子商务之网店美工的重要性、美工的理性设计法则、
美工的感性视觉营销、美工的 P 图神器、网店首页的设计、导购详情页的设计、产品主图的设计、
产品推广图的设计，以及代码在美工设计中的应用等内容。
本书内容全面，讲解清晰，图文直观。既适用于网上开店的店主学习使用，也适用于想
从事网店美工而又缺乏设计经验与实战的读者学习参考，同时还可以作为大、中专院校、各
类社会培训学习的教材参考用书。

FOREWORD
Photoshop CC 是由美国 Adobe 公司开发的一款市面上最优秀的图像处理软件。
其有易于操作、功能强大的特点，被广泛应用于网店美工设计与图像处理领域。
 本书特点
●
学以致用：本书打破了传统脱离实际的单一软件讲解模式，从“学以致用”
的角度出发，首先叙述了网店美工在网店中的重要性、网店美工的设计法则、
美学基础及视觉营销等内容，然后精选了 Photoshop 在网店设计中的相关商
业案例，系统并全面地讲解了 Photoshop 网店美工的实战应用和技能知识。
快速让您从“菜鸟”的设计水平，提升到“达人”水平。
●
案例丰富：编者从工作实践中精选了多个典型案例，全面涵盖了网店美工设
计的相关领域，如首页设计、详情页设计、主图设计、推广图设计等。并在
每章前面都有各领域设计的行业知识链接，让读者快速掌握行业设计经验，
在学会软件的同时提高实战能力和应用经验。
●
视频教学：本书配送一张多媒体教学光盘，包含了书中所有实例的素材文件
和结果文件，方便读者学习时同步练习。并且还配送重点应用案例的视频教
学录像，书盘结合学习，其效果立竿见影。
 本书内容
全书共分 9 章，浅入深出地讲解了电子商务之网店美工的重要性、美工的理性
设计法则、美工的感性视觉营销、美工的 P 图神器、网店首页的设计、导购详情
页的设计、产品主图的设计、产品推广图的设计，以及代码在美工设计中的应用等
内容。
 本书读者
●
●
●
●
●
想在网上开店的店主；
已在网上开店，但想提高店铺销售业绩的店主；
大、中专职业院校设计专业的学生和社会职业培训的相关学生；
想从事网店美工岗位，但缺乏行业经验和实战经验的读者；
广大 Photoshop 广告设计和图像处理爱好者。
前言.indd 1
2015-8-11 11:36:01

 读者服务
凡 购 买 本 书 的 读 者， 即 可 申 请 加 入 读 者 学 习 交 流 与 服 务 QQ 群（ 群 号：
363300209），有机会获得《中文版 Photoshop 图像处理从入门到精通》电子图书一份，
而且还为读者不定期举办免费的计算机技能网络公开课，欢迎加群了解详情。
本书由一线文化与中国铁道出版社联合策划，并由一线文化组织编写。参与本书
编创的人员都具有丰富的实战经验和一线教学经验，并已编写和出版过多本计算机相
关书籍。在此，向所有参与本书编创的人员表示感谢！最后，真诚感谢您购买本书。
您的支持是我们最大的动力，我们将不断努力，为您奉献更多、更优秀的计算机图书！
由于计算机技术发展非常迅速，加上编者水平有限，书中疏漏和不足之处在所难免，
敬请广大读者及专家批评指正。
编者
2015 年 7 月
前言.indd 2
2015-8-11 11:36:02

CONTENTS
网
店
美
工
设
计
目录
电子商务之网店美工
知识讲解——行业知识链接................... 2
Point 01
年轻的你需要了解的 ......................... 2
1．什么是美工 ..................................................... 2
2．淘宝美工的工作内容 ...................................... 3
3．淘宝美工的就业前景 ...................................... 3
4．淘宝设计大师对美工的理解 ........................... 5
Chapter
01
Point 02
做好美工的五大重点 ......................... 5
1．学会美工的常用工具 ...................................... 5
2．运用设计理念 ................................................. 6
3．学会视觉营销 ................................................. 6
4．熟悉淘宝平台 ................................................. 7
5．掌握团队沟通与配合 ...................................... 7
学习小结......................................... 8
美工的理性设计法则
知识讲解——行业知识链接..................10
Point 01
设计思维整理 ................................ 10
1．亲密 ............................................................. 10
2．对齐 ............................................................. 12
3．重复 ............................................................. 13
4．对比 ............................................................. 16
Chapter
02
2015-8-11 11:33:15
目录.indd 1

实战应用——Photoshop 网店美工设计
Point 02
版式设计原理 ................................ 17
1．版面构图的要点 ........................................... 17
2．图片构成的理论 ........................................... 19
3．图解图说的理论 ........................................... 24
4．文字组合的理论 ........................................... 26
Point 03
配色设计原理 ................................ 28
1．色彩的基本属性 ........................................... 28
2．决定整体配色的理论 .................................... 29
3．选择基本配色的理论 .................................... 32
4．出现多种色彩的配色理论 ............................. 34
Point 04
字体设计原理 ................................ 38
1．字体之间的关系 ........................................... 38
2．字体对比 ...................................................... 39
学习小结....................................... 40
Chapter
美工的感性视觉营销
知识讲解——行业知识链接..................42
Point 01
视觉营销的定义 ............................. 42
1．电子商务中的视觉营销 ................................. 42
2．视觉营销的根本目的 .................................... 43
03
Point 02
视觉色彩系统 ................................ 43
1．色彩的情感 ................................................... 43
2．色彩的心理 ................................................... 47
Point 03
视觉文字的应用 ............................. 49
1．字体的选择与设计 ........................................ 49
2．字体的搭配与布局 ........................................ 51
Point 04
文案视觉营销 ................................ 52
目录.indd 2
2015-8-11 11:33:16

目　录
1．吸引顾客的文案 ........................................... 53
2．让顾客消费的文案 ........................................ 54
3．FABE 销售法 ................................................ 54
Point 05
用户体验抓住你的客户 .................... 55
1．为什么要注重用户体验 ................................. 55
2．如何做好用户体验 ........................................ 55
学习小结....................................... 58
美工的 P 图神器
知识讲解——行业知识链接................. 60
Point 01
Photoshop在网店美工中的应用 ...... 60
1．画面基本处理 ............................................... 60
2．颜色搭配与调整 ........................................... 61
3．版面设计 ...................................................... 61
4．图片优化 ...................................................... 61
Chapter
04
Point 02
Point 03
Photoshop的操作界面 ................... 61
平面设计转美工的必知要点 ............. 62
1．颜色模式 ...................................................... 62
2．分辨率 .......................................................... 62
3．图片格式 ...................................................... 63
4．图像单位 ...................................................... 63
5．素材品质 ...................................................... 63
6．操作技能 ...................................................... 63
7．字体字号 ...................................................... 64
8．展示平台 ...................................................... 64
Point 04
最牛的Photoshop技能 ................... 64
1．快速找到需要的图层 .................................... 64
2．快速对齐 ...................................................... 64
目录.indd 3
2015-8-11 11:33:16

实战应用——Photoshop 网店美工设计
3．非破坏性编辑 ............................................... 65
4．万能的鼠标滚轮 ........................................... 66
5．小键大作用 ................................................... 66
6．隐藏辅助工具 ............................................... 66
7．智能参考线 ................................................... 66
8．缩放字体大小 ............................................... 66
9．批量显示或隐藏图层 .................................... 67
10．快速展开或收起图层 .................................. 67
实战应用——上机实战训练................. 68
Example 01
Example 02
裁剪出最佳角度的图片 .............. 68
钢笔工具万能抠图 .................... 70
Example 03 蒙版合成精美画面 .................... 73
Example 04
对产品素材进行精修 ................. 75
Example 05 对模特进行人像处理 ................. 78
Example 06
Example 07
Example 08
Example 09
为店铺内图片添加水印 .............. 80
批处理提高工作效率 ................. 82
对页面进行规则的切片 .............. 85
对页面进行不规则切片 .............. 89
学习小结........................................91
Chapter 这才是大气的首页
05
目录.indd 4
知识讲解——行业知识链接................. 93
Point 01
整体布局和定位 ............................. 93
1．店铺整体结构 ............................................... 93
2．店铺整体布局 ............................................... 94
2015-8-11 11:33:17

目　录
3．店铺视觉定位 ............................................... 97
4．客户群体定位 ............................................. 103
Point 02
店招 ........................................... 109
1．店招所传递的信息 ...................................... 109
2．店招如何引导点击 .......................................110
Point 03
导航 ........................................... 110
1．隐形导航 .....................................................110
2．半隐形导航 ..................................................111
3．显性导航 .....................................................111
Point 04
首焦 ........................................... 112
1．首焦的高度 ..................................................112
2．首焦的信息传递 ..........................................113
3．首焦的版面布局 ..........................................114
4．首焦的展现方式 ..........................................116
5．首焦的视觉冲击 ..........................................117
Point 05
产品分类 ..................................... 117
1．分类的表现方式 ..........................................117
2．分类的交互效果 ..........................................118
Point 06
产品陈列 ..................................... 118
1．干净简洁 .....................................................118
2．突出爆款 .....................................................119
3．整体统一 .................................................... 120
4．搭配展示 .................................................... 120
5．产品排序 .................................................... 121
Point 07
页尾 ........................................... 122
实战应用——上机实战训练................ 122
Example 01
Example 02
设计带收藏的全屏店招 ............ 122
设计图片式导航栏 .................. 127
目录.indd 5
2015-8-11 11:33:17

实战应用——Photoshop 网店美工设计
Example 03 上传整个全屏页头 .................. 129
Example 04
设计首页整体布局 .................. 141
Example 05 设计全屏海报 ......................... 151
Example 06
上传全屏海报至首页 ............... 157
Example 07 在首页添加搜索栏 .................. 165
Example 08
Example 09
Example 10
Example 11
设计图文结合的产品分类 ......... 168
设计按颜色分类的产品展示 ...... 173
设计简约大牌的产品陈列 ......... 180
设计功能全面的页尾 ............... 185
学习小结......................................190
Chapter 金牌导购详情页
06
知识讲解——行业知识链接................ 192
Point 01
让顾客一见钟情的描述 .................. 192
1．整体设计 .................................................... 192
2．说服逻辑 .................................................... 192
3．视觉呈现 .................................................... 192
Point 02
详情页的分类 .............................. 192
1．产品展示类 ................................................. 193
2．实力展示类 ................................................. 193
3．吸引购买类 ................................................. 193
4．交易说明类 ................................................. 194
5．促销说明类 ................................................. 194
Point 03
详情页包括哪些基本内容 .............. 195
目录.indd 6
2015-8-11 11:33:17

目　录
1．宝贝整体图片 ............................................. 195
2．宝贝细节图片 ............................................. 196
3．模特图 ........................................................ 196
4．宣传广告图 ................................................. 197
5．SKU 属性 ................................................... 198
6．产品介绍 .................................................... 198
7．使用说明 .................................................... 198
8．产品卖点 .................................................... 199
9．产品类比 .................................................... 200
10．使用场景图 ............................................... 200
11．口碑 .......................................................... 200
12．产品包装 .................................................. 201
13．售后说明 .................................................. 201
14．品牌文化 .................................................. 202
15．关联营销广告位 ....................................... 202
16．活动图片 .................................................. 202
17．情感营销图 ............................................... 203
Point 04
宝贝描述模块排序 ........................ 204
1．了解用户需求 ............................................. 204
2．进行合理排序 ............................................. 204
Point 05
宝贝描述的设计要点 ..................... 205
1．控制页面长度 ............................................. 205
2．选择合适的内容 ......................................... 206
3．根据顾客需求设计页面 ............................... 206
实战应用——上机实战训练................206
Example 01
Example 02
Example 03
Example 04
设计详情页整体布局 ............... 207
设计促销活动模块 .................. 214
设计产品实拍模块 .................. 218
设计尺码说明模块 .................. 222
目录.indd 7
2015-8-11 11:33:18

实战应用——Photoshop 网店美工设计
Example 05 设计产品属性模块 .................. 227
Example 06
设计产品细节模块 .................. 232
Example 07 设计产品卖点提取模块 ............ 234
Example 08
Example 09
Example 10
设计关联营销广告位模块 ......... 237
设计售后保障模块 .................. 239
将详情页页面切片优化上传发布 248
学习小结......................................259
Chapter 大师教你做主图
07
知识讲解——行业知识链接................ 261
Point 01
Point 02
主图的重要性 .............................. 261
主图的主要规范 ........................... 262
1．天猫主图发布规范 ...................................... 262
2．C 店主图发布规范 ...................................... 264
Point 03 主图的素材要求 ........................... 265
1．主图清晰度 ................................................. 265
2．主图的曝光度 ............................................. 265
3．主图的像素大小 ......................................... 266
Point 04
主图的构图方式 ........................... 266
1．黄金分割构图 ............................................. 266
2．直线式构图 ................................................. 267
3．渐次式构图 ................................................. 267
4．三角形构图 ................................................. 268
5．辐射性构图 ................................................. 268
6．对角线构图 ................................................. 268
目录.indd 8
2015-8-17 15:37:48

目　录
7．其他构图 .................................................... 269
Point 05
Point 06
Point 07
主图的信息分层 ........................... 269
主图的品牌宣传 ........................... 270
主图的场景表现 ........................... 270
实战应用——上机实战训练................ 271
Example 01
Example 02
Example 03
Example 04
Example 05
设计品牌感主图 ...................... 271
设计简约型主图 ...................... 273
设计场景化主图 ...................... 275
设计营销型主图 ...................... 278
设计带质感主图 ...................... 282
学习小结......................................287
传情达意的推广图
知识讲解——行业知识链接................289
Point 01
直通车广告位 .............................. 289
1．搜索推广 .................................................... 289
2．定向推广 ................................................... 290
3．增值服务 .................................................... 291
Chapter
08
Point 02 钻展广告位 .................................. 291
1．淘宝首页焦点图 ......................................... 291
2．一屏右侧 banner 图.................................... 292
3．淘宝底部通栏 - 小图等 ............................... 292
4．淘宝垂直频道，如淘宝女装、家居商品等 .. 292
5．收藏夹底部的小图和通栏 ........................... 292
6．淘宝站外的广告位，如优酷的资源位 ......... 293
目录.indd 9
2015-8-11 11:33:18

实战应用——Photoshop 网店美工设计
Point 03
推广图的设计准则 ........................ 293
1．推广主题清晰 ............................................. 294
2．目标人群准确 ............................................. 295
3．表现形式美观 ............................................. 296
Point 04
单品推广设计 .............................. 297
1．价格差异化 ................................................. 298
2．折扣差异化 ................................................. 298
3．销量差异化 ................................................. 299
4．品质差异化 ................................................. 299
5．创意差异化 ................................................. 299
Point 05
Point 06
店铺推广设计 .............................. 300
明星店铺图设计 ........................... 301
Point 07 活动推广设计 .............................. 301
Point 08
钻展图设计.................................. 301
1．明确的主题 ................................................. 302
2．钻展文字信息 ............................................. 302
3．钻展图片要求 ............................................. 303
实战应用——上机实战训练................303
Example 01
Example 02
体现价格单品推广 .................. 304
体现折扣单品推广 .................. 306
Example 03 体现销量单品推广 .................. 309
Example 04
Example 05
Example 06
全店活动店铺推广 .................. 312
明星店铺推广设计 .................. 314
钻展图设计 ............................ 316
学习小结...................................... 318
目录.indd 10
2015-8-11 11:33:18

目　录
对不起！代码我来晚了
知识讲解——行业知识链接................320
Point 01
什么是代码 .................................. 320
Chapter
Point 02 代码在网店中的应用 ..................... 320
Point 03
Point 04
编辑代码的软件 ........................... 320
学习代码的网站 ........................... 321
09
实战应用——上机实战训练................ 321
Example 01
Example 02
Example 03
Example 04
通过CSS代码修改导航 ........... 322
生成全屏海报 ......................... 325
生成固定背景 ......................... 330
生成旺旺在线模板 .................. 333
学习小结......................................340
目录.indd 11
2015-8-11 11:33:19

目录.indd 12
2015-8-11 11:33:19

一线文化工作室成立于2006年，主要从事图书策划与出版服务，以策划研究和著、编、译IT图书、摄影图书、旅游图书、经管图书、生活图书等为主要方向。
工作室汇集了IT、旅游、摄影、经管等相关行业领域的名家名师，并拥有一批非常优秀的图书策划、创作编辑的专业人员，他们热情豪放、敢想敢做、积极向上、专心专注。秉承“高品质、严要求、精定位”的标准，自工作室成立以来，先后策划、创作图书207多本，受到市场高度关注与读者的欢迎。其中多套图书上市以来荣登全国各大书城、网上书店的同类畅销书排行榜前列。

※ 丰富的行业案例，专家实战讲解，让您一看即会、学以致用
※ 海量设计资源，拿来即用，超大容量教学视频，享受视听盛宴。