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