网店美工视觉设计实战教程（全彩微课版 第2版）

　　网店美工是基于网上购物蓬勃发展，针对网店页面视觉设计的一个新兴职业。本书从网店美工的角度出发，不仅结合大量精美案例讲解了网店页面视觉设计，也为卖家提供了网店页面的装修指导。本书共有10章，涵盖了网店美工必备的各项知识与技能，主要包括网店美工基础知识、图片调色、图片修饰、店铺首页核心模块设计、详情页视觉设计、页面装修、视觉营销推广图的制作等，以及无线终端首页、详情页的视觉设计与装修，最后还讲解了无线终端H5设计。本书内容结构清晰，图文并茂，可有效地引导读者对网店页面进行视觉设计与装修，加强自身的职业技能并提高职业素养。

　　编写团队的作者既有丰富的电商从业经验，也长期和企业对接，有丰富的社会培训经验，了解网店美工的工作内容及技巧。

第 1 章　网店美工基础知识．．．．．001
1．1　网店美工概述 ．．．．．．．．．．．．．．．．．．．　002
1．1．1　网店美工的工作范畴．．．．．．　002
1．1．2　网店美工的技能要求．．．．．．　003
1．2　网店美工必备的视觉营销知识 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　004
1．2．1　色彩搭配．．．．．．．．．．．．．．．．．．．．．．004
1．2．2　图形元素的应用．．．．．．．．．．．．　006
1．2．3　文字的应用．．．．．．．．．．．．．．．．．．．　007
1．3　Photoshop CS6 的基本操作 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　010
1．3．1　设置前景色与背景色．．．．．．010
1．3．2　图层的基本操作．．．．．．．．．．．　011
1．3．3　裁剪并更改图片尺寸．．．．．．012
1．3．4　批处理图片．．．．．．．．．．．．．．．．．．．013
1．4　利用 Photoshop CS6 抠图 ．．．　014
1．4．1　规则图像抠图．．．．．．．．．．．．．．．　014
1．4．2　简单背景抠图．．．．．．．．．．．．．．．．016
1．4．3　复杂图像抠图．．．．．．．．．．．．．．．．018
1．4．4　毛发抠图．．．．．．．．．．．．．．．．．．．．．．　020
1．4．5　半透明物体抠图．．．．．．．．．．．．　022
1．5　实战演练 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　024
1．5．1　为沙发更换背景．．．．．．．．．．．．　025
1．5．2　为榨汁机更换背景．．．．．．．．．　026
课后练习　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　029
第　2 篇 网店图片处理
第　2章 图片调色 ．．．．．．．．．．．．．．．．．．030
2．1　了解图片调色 ．．．．．．．．．．．．．．．．．．．　031
2．1．1　图片调色的原则．．．．．．．．．．．．031
2．1．2　使用调整图层调色．．．．．．．．．　032
2．2　处理曝光不足或曝光过度的图片 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　033
2．2．1　提高亮度与对比度．．．．．．．．．034
2．2．2　调整高光、阴影与中间调．．．．．．．．．．．．．．．．．．．．．．．．．．034
2．3　图片调色 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　039
2．3．1　图片偏色矫正．．．．．．．．．．．．．．．．　039
2．3．2　图片特殊颜色调整．．．．．．．．．　042
2．4　实战演练 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　045
2．4．1　童装调色．．．．．．．．．．．．．．．．．．．．．．．　045
2．4．2　打造街拍图片风格．．．．．．．．．047
课后练习　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　049
第　3 章 图片修饰 ．．．．．．．．．．．．．．．．．051
3．1　修饰商品图片 ．．．．．．．．．．．．．．．．．．．　052
3．1．1　清除商品上的污迹．．．．．．．．．　052
3．1．2　去除背景中多余的物品．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　053
3．1．3　美化模特．．．．．．．．．．．．．．．．．．．．．．　055
3．1．4　光滑材质表面．．．．．．．．．．．．．．．．　056
3．1．5　加强亮部与暗部的对比．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　057
3．1．6　增加金属质感．．．．．．．．．．．．．．．．　059
3．1．7　提高图片清晰度．．．．．．．．．．．．　062
3．2　丰富商品图片内容 ．．．．．．．．．．．．　063
3．2．1　添加与美化图片文本．．．．．．．　063
3．2．2　添加形状与图案．．．．．．．．．．．．．　066
3．3　添加图片特效 ．．．．．．．．．．．．．．．．．．．　067
3．3．1　虚化背景．．．．．．．．．．．．．．．．．．．．．．．　067
3．3．2　添加发光效果．．．．．．．．．．．．．．．．　068
3．3．3　添加高光与投影效果．．．．．．．　070
3．4　实战演练 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　072
3．4．1　修饰家用榨汁机．．．．．．．．．．．．．　072
3．4．2　修饰羽绒服．．．．．．．．．．．．．．．．．．．　075
课后练习　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　078
第３篇　店铺装修
第4章　店铺首页核心模块设计 ．．．．．．079
4．1　店招设计 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　080
4．1．1　店招制作规范．．．．．．．．．．．．．．．．　080
4．1．2　制作常规店招．．．．．．．．．．．．．．．．　080
4．1．3　制作通栏店招．．．．．．．．．．．．．．．．　083
4．2　海报设计 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　084
4．2．1　制作全屏海报．．．．．．．．．．．．．．．．084
4．2．2　制作常规海报．．．．．．．．．．．．．．．．　085
4．3　优惠券设计 ．．．．．．．．．．．．．．．．．．．．．．．　087
4．3．1　优惠券的设计原则．．．．．．．．．　087
4．3．2　制作优惠券．．．．．．．．．．．．．．．．．．．　088
4．4　活动区设计 ．．．．．．．．．．．．．．．．．．．．．．．　090
4．4．1　活动区的设计要点．．．．．．．．．　090
4．4．2　制作活动区．．．．．．．．．．．．．．．．．．．　090
4．5　实战演练 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　094
4．5．1　制作女装店铺店招．．．．．．．．．　094
4．5．2　制作女装店铺海报．．．．．．．．．　097
课后练习　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　099
第　5 章 详情页视觉设计 ．．．．．．100
5．1　详情页设计要点 ．．．．．．．．．．．．．．．．　101
5．1．1　商品详情页制作规范．．．．．　101
5．1．2　商品详情页的内容分析与策划要点．．．．．．．．．．．．．．．．．．．．．．　101
5．2　宝贝描述核心模块设计 ．．．．．　102
5．2．1　宝贝焦点图设计．．．．．．．．．．．．．102
5．2．2　功能描述图设计．．．．．．．．．．．．　104
5．2．3　信息展示图设计．．．．．．．．．．．．．106
5．2．4　卖点说明图设计．．．．．．．．．．．．．107
5．3　实战演练 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　110
5．3．1　制作四件套焦点图．．．．．．．．．　110
5．3．2　制作四件套展示图．．．．．．．．．　112
课后练习　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　115
第6章　店铺装修 ．．．．．．．．．．．．．．．．．．117
6．1　使用素材中心 ．．．．．．．．．．．．．．．．．．．　118
6．1．1　切片技巧．．．．．．．．．．．．．．．．．．．．．．　118
6．1．2　图片切片与保存．．．．．．．．．．．　118
6．1．3　上传图片到素材中心．．．．．．120
6．1．4　重命名并移动图片．．．．．．．．　121
6．1．5　删除与替换图片．．．．．．．．．．．．122
6．2　使用模块装修店铺 ．．．．．．．．．．．．　123
6．2．1　认识装修模块．．．．．．．．．．．．．．．．123
6．2．2　装修页头．．．．．．．．．．．．．．．．．．．．．．　124
6．2．3　热点+源代码装修．．．．．．．．．．．126
6．2．4　其他模块装修．．．．．．．．．．．．．．．．128
6．3　实战演练——装修宝贝描述页 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　129
课后练习　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　132
第7章　视觉营销推广图的制作 ．．．133
7．1　制作高点击率的主图 ．．．．．．．．．　134
7．1．1　宝贝主图规范．．．．．．．．．．．．．．．　134
7．1．2　制作优质商品主图的技巧．．．．．．．．．．．．．．．．．．．．．．．．　134
7．1．3　数据线主图设计．．．．．．．．．．．．．135
7．2　智钻图设计 ．．．．．．．．．．．．．．．．．．．．．．．　137
7．2．1　智钻图的设计要点．．．．．．．．．137
7．2．2　智钻图的构图方式．．．．．．．．　138
7．2．3　制作淘宝首焦智钻图．．．．．．．139
7．3　直通车推广图设计 ．．．．．．．．．．．．　141
7．3．1　直通车展现方式．．．．．．．．．．．．141
7．3．2　直通车图的设计要点．．．．．　142
7．3．3　直通车图引流的关键．．．．．．　143
7．3．4　设计剃须刀直通车图．．．．．　144
7．4　实战演练 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　147
7．4．1　设计唇彩直通车图．．．．．．．．　147
7．4．2　设计紫色护肤品智钻图．．．149
课后练习　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　151
第　4 篇 无线终端应用
第　8 章 无线终端首页的视觉设计与装修 ．．．．．．．．．．．．．．．152
8．1　无线终端首页设计基础 ．．．．．　153
8．1．1　无线终端与计算机端的不同．．．．．．．．．．．．．．．．．．．．．．．．．．．．．153
8．1．2　无线终端首页模块的组成．．．．．．．．．．．．．．．．．．．．．．．．．．．．．153
8．1．3　无线终端首页装修注意事项．．．．．．．．．．．．．．．．．．．．．．．．．．．．．155
8．2　无线终端首页关键模块的视觉设计 ．．．．．．．．．．．．．．．．．．．．．．．．．．　155
8．2．1　店招设计．．．．．．．．．．．．．．．．．．．．．．．155
8．2．2　海报设计．．．．．．．．．．．．．．．．．．．．．．．156
8．2．3　优惠券设计．．．．．．．．．．．．．．．．．．．158
8．2．4　分类设计．．．．．．．．．．．．．．．．．．．．．．．159
8．2．5　宝贝展示图设计．．．．．．．．．．．．．160
8．3　无线终端店铺装修 ．．．．．．．．．．．．　163
8．3．1　模块装修．．．．．．．．．．．．．．．．．．．．．．．163
8．3．2　模板装修．．．．．．．．．．．．．．．．．．．．．．　164
8．4　实战演练 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　165
8．4．1　制作沙发无线终端首焦海报与优惠券．．．．．．．．．．．．．．．．165
8．4．2　制作沙发无线终端商品展示图．．．．．．．．．．．．．．．．．．．．．．．．．．167
课后练习　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　170
第　9 章 无线终端详情页的视觉设计与装修 ．．．．．．．．．．．．．．．171
9．1　无线终端详情页设计基础．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　172
9．1．1　无线终端详情页的特征．．．．．．．．．．．．．．．．．．．．．．．．．．172
9．1．2　无线终端详情页设计的要点．．．．．．．．．．．．．．．．．．．．．．．．．．172
9．2　无线终端详情页的设计与装修 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　173
9．2．1　无线终端详情页设计．．．．．．173
9．2．2　无线终端详情页装修．．．．．．．176
9．2．3　无线终端模板装修．．．．．．．．．．177
9．3　无线终端自定义页面装修 ．．．　179
9．3．1　自定义页面装修要点．．．．．．．179
9．3．2　自定义菜单．．．．．．．．．．．．．．．．．．．．179
9．3．3　自定义页面装修．．．．．．．．．．．．　181
9．4　实战演练 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　182
9．4．1　制作无线终端零食详情页．．．．．．．．．．．．．．．．．．．．．．．．．．182
9．4．2　制作返场活动页．．．．．．．．．．．．．186
课后练习　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　190
第　10章 无线终端H5设计 ．．．．．192
10．1　H5的基础知识 ．．．．．．．．．．．．．．．．　193
10．1．1　H5概述．．．．．．．．．．．．．．．．．．．．．．．．193
10．1．2　H5的类型．．．．．．．．．．．．．．．．．．．．194
10．1．3　H5的制作工具．．．．．．．．．．．．．．196
10．1．4　H5的制作流程．．．．．．．．．．．．．197
10．2　H5的制作 ．．．．．．．．．．．．．．．．．．．．．．．．　197
10．2．1　使用MAKA工具制作H5．．．．．．．．．．．．．．．．．．．．．．．．197
10．2．2　使用iH5工具制作H5．．．．．．201
实战演练——制作新品促销H5
课后练习　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　212