Photoshop网店美工设计（含盘）

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