Photoshop淘宝天猫网店设计装修从入门到精通

第１章　新手导航：淘宝天猫网店装修入门知识 1
1.1　入门基础：淘宝天猫网店设计入门解析… ……… 2
1.2　吸引客户：淘宝天猫网店装修的意义 4
1.2.1　展示店铺信息… ………………4
1.2.2　展示商品详情… ………………6
1.2.3　视觉营销推广… ………………8
1.2.4　突出产品特色… ………………9
1.2.5　加强产品识别… …………… 10
1.3　规避误区：解析网店装修中的注意事项………… 11
1.3.1　网店装修注意事项… ……… 11
1.3.2　网店装修六大误区… ……… 15
第２章　视觉出彩：丰富网店页面的色彩与布局……… 17
2.1　色彩常识：色彩设计知识解析……… 18
2.1.1　无色系与彩色系… ………… 18
2.1.2　颜色的三种属性… ………… 20
2.1.3　色调奠定主旋律… ………… 26
2.2　店铺配色：网店常用的冷暖色系…… 30
2.2.1　暖色系配色效果… ………… 30
2.2.2　冷色系配色效果… ………… 31
2.3　配色方案：解密网店配色技巧……… 32
2.3.1　对比配色在装修中的应用… 32
2.3.2　调和配色在装修中的应用… 34
2.4　文字应用：网店文字应用技巧……… 38
2.4.1　字体风格的设计与运用… … 38
2.4.2　文字编排对页面的影响… … 40
2.4.3　设计文字的合理分割… …… 42
2.5　布局版式：网店版式布局技巧……… 44
2.5.1　网店布局元素分类… ……… 44
2.5.2　网店页面主图处理… ……… 49
2.5.3　网店布局版式引导… ……… 51
第３章　软件入门：Photoshop 软件的基本操作……… 53
3.1　安装启动：掌握Photoshop 基础操作………… 54
3.1.1　安装Photoshop CC 软件… 54
3.1.2　卸载Photoshop CC 软件… 56
3.1.3　启动Photoshop CC 软件… 57
3.1.4　退出Photoshop CC 软件… 57
3.2　简单编辑：商品图像的基本处理…… 58
3.2.1　新建图像文件… …………… 58
3.2.2　打开与置入操作… ………… 60
3.2.3　保存商品文件… …………… 62
3.2.4　关闭商品文件… …………… 63
3.2.5　显示与隐藏面板… ………… 64
3.2.6　复制与删除图层… ………… 65
3.3　常用操作：排列与显示商品图像…… 66
3.3.1　最大化与最小化显示商品图像… ……… 67
3.3.2　改变商品图像窗口排列方式… ………… 67
3.3.3　商品图像编辑窗口的切换操作… ……… 70
3.3.4　商品图像的放大与缩小操作… ………… 70
3.3.5　使用抓手工具移动商品图像… ………… 72
3.3.6　适合屏幕显示商品图像… … 73
3.3.7　按区域显示商品图像… …… 74
3.3.8　调整商品图像的尺寸… …… 76
3.3.9　调整商品画布的尺寸… …… 76
3.3.10　调整商品图像的分辨率…… 78
3.4　辅助操作：使用标尺与参考线……… 79
3.4.1　显示标尺… ………………… 79
3.4.2　测量尺寸… ………………… 81
3.4.3　编辑参考线… ……………… 82
第４章　抠图技能：美化淘宝商品图像……… 85
4.1　素材处理：简单抠图在店铺装修中的应用……… 86
4.1.1　使用“反向”命令处理商品素材… …… 86
4.1.2　使用“色彩范围”命令处理商品素材… 87
4.1.3　使用矩形选框工具处理商品素材… …… 89
4.1.4　使用椭圆选框工具处理商品素材… …… 90
4.1.5　使用多边形套索工具处理商品素材… … 92
4.1.6　使用魔棒工具处理商品图像… ………… 93
4.2　素材强化：精致图像点亮店铺页面… 94
4.2.1　使用钢笔工具路径处理商品图像… …… 94
4.2.2　使用“颜色加深”模式处理商品图像… 96
4.2.3　使用“滤色”模式处理商品图像… …… 98
4.2.4　使用快速蒙版处理商品图像… ………… 99
4.2.5　使用通道对比处理商品图像… …………101
4.2.6　使用通道对比处理透明商品图像… ……103
第５章　颜色调整：店铺商品色调美化…… 105
5.1　颜色填充：丰富网店商品图像…… 106
5.1.1　使用“颜色”面板填充商品背景… ……106
5.1.2　使用油漆桶工具填充商品颜色… ………107
5.1.3　使用快捷菜单填充商品颜色… …………109
5.1.4　使用渐变工具填充双色商品背景… ……110
5.2　颜色调整：美化网店商品颜色…… 113
5.2.1　使用“自动色调”命令调整商品图像色调… …………………………114
5.2.2　使用“自动对比度”命令调整商品图像对比度… ……………………115
5.2.3　使用“自动颜色”命令校正商品图像色偏… …………………………115
5.2.4　使用“亮度/ 对比度”命令调整商品图像明暗… ……………………116
5.2.5　使用“色阶”命令调整商品图像亮度范围… …………………………117
5.2.6　使用“曲线”命令调整商品图像色调… 119
5.2.7　使用“曝光度”命令调整商品图像曝光度… …………………………120
5.2.8　使用“自然饱和度”命令调整商品图像饱和度… ……………………122
5.2.9　使用“色相/ 饱和度”命令调整商品图像色调… ……………………123
5.2.10　使用“色彩平衡”命令调整商品图像偏色……………………………124
5.2.11　使用“匹配颜色”命令匹配商品图像色调……………………………125
5.2.12　使用“替换颜色”命令替换商品图像颜色……………………………126
5.2.13　使用“阴影/ 高光”命令调整商品图像明暗…………………………128
5.2.14　使用“照片滤镜”命令过滤商品图像色调……………………………130
5.2.15　使用“通道混合器”命令调整图像色调131
5.2.16　使用“可选颜色”命令改变商品图像颜色……………………………132
5.2.17　使用“黑白”命令去除商品图像颜色…134
5.2.18　使用“去色”命令制作灰度商品图像效果……………………………135
第６章　文字版式：网店文字的编排处理……137
6.1　文字排版：输入与编辑商品文字… 138
6.1.1　制作网店商品横排文字效果… …………138
6.1.2　制作网店商品直排文字效果… …………140
6.1.3　修改商品文字段落属性效果… …………142
6.1.4　制作商品文字段落属性效果… …………144
6.1.5　设置商品文字段落属性效果… …………146
6.1.6　制作横排商品文字蒙版效果… …………148
6.1.7　制作直排商品文字蒙版效果… …………150
6.1.8　制作商品文字水平垂直互换效果… ……152
6.1.9　制作商品文字沿路径排列效果… ………153
6.1.10　调整商品文字路径的形状…155
6.1.11　调整商品文字位置的排列…156
6.2　文字特效：制作各类商品文字特效 157
6.2.1　制作商品文字凸起效果… …157
6.2.2　制作商品文字下弧效果… …160
6.2.3　制作商品文字转换为路径效果… ………161
6.2.4　制作商品文字栅格化处理效果… ………162
6.2.5　制作商品文字描边效果… …164
6.2.6　制作商品文字颜色效果… …165
6.2.7　制作商品文字双色渐变效果… …………166
第７章　商品合成：商品图像合成设计…… 169
7.1　彩妆合成：彩妆店铺合成效果设计 170
7.1.1　彩妆背景优化效果制作… …170
7.1.2　彩妆主体添加效果制作… …172
7.1.3　彩妆商品文体效果制作… …174
7.2　腕表合成：腕表店铺合成效果设计 175
7.2.1　腕表店铺素材抠取处理… …175
7.2.2　腕表店铺素材变换处理… …176
7.2.3　腕表店铺素材合成处理… …177
7.3　女装合成：女装店铺合成效果设计 179
7.3.1　女装背景内容优化效果… …179
7.3.2　女装搭配主体处理效果… …180
7.3.3　女装元素搭配制作效果… …181
7.4　手机合成：手机促销合成效果设计 182
7.4.1　手机界面背景处理效果… …183
7.4.2　手机促销元素处理效果… …184
7.4.3　手机促销文字制作效果… …185
第８章　特效处理：淘宝天猫广告图片特效设计………………………… 187
8.1　特效入门：制作广告商品图片简单特效设计… 188
8.1.1　广告商品图片复古特效… …188
8.1.2　广告商品图片冷蓝特效… …190
8.1.3　广告商品图片冷绿特效… …193
8.1.4　广告商品图片暖黄特效… …195
8.1.5　广告商品图片怀旧特效… …197
8.2　 特效升级：打造广告商品图片复杂特效设计… 198
8.2.1　广告商品图片拍立得特效… 199
8.2.2　广告商品幻灯片展示特效… 202
8.2.3　广告商品单张立体空间展示特效… ……203
第９章　重要元素：网店装修三大区域设计 207
9.1　广告海报区：店铺亮点吸引顾客眼球………… 208
9.1.1　网络广告海报设计要素分析… …………208
9.1.2　女鞋网店广告海报设计方案… …………209
9.2　公告栏区：淘宝天猫网店信息展示平台……… 216
9.2.1　网店公告栏的设计样式分析… …………216
9.2.2　店铺公告栏设计方案详解… 217
9.3　店铺收藏区：帮网店抓住回头客… 220
9.3.1　网店收藏区的区域设计分析… …………220
9.3.2　网店收藏区设计方案详解… 222
第10 章　网店招牌：解密旺铺完美店招设计 227
10.1　招牌设计：网店店招设计详解… 228
10.1.1　店招的意义… ……………228
10.1.2　店招设计的要求… ………228
10.2　招牌设计：店招设计实战… …… 229
10.2.1　珠宝网店店招设计… ……229
10.2.2　家具网店店招设计… ……230
10.2.3　眼镜网店店招设计… ……232
第11 章　网店导航：帮助网店顾客自主购物 235
11.1　导航设计：网店导航设计详解… 236
11.1.1　导航条的设计意义… ……236
11.1.2　导航条的设计分析… ……236
11.1.3　导航条的尺寸规格… ……236
11.1.4　导航条的色彩和字体风格分析… ……237
11.2　导航设计：网店导航设计实战… 238
11.2.1　手机类店铺导航设计… …238
11.2.2　护肤类店铺导航设计… …240
第12 章　网店首页：打造深入人心的首页设计…………………………… 243
12.1　首页设计：网店首页设计详解… 244
12.1.1　网店首页界面的设计要点… …………244
12.1.2　网店首页设计的前期筹备工作… ……244
12.1.3　网店首页设计的注意事项… …………245
12.1.4　网店首页界面的设计技巧… …………246
12.2　首页设计：网店首页设计实战… 246
12.2.1　农产品网店首页设计… …246
12.2.2　女包网店首页设计… ……250
第13 章　网店主图：不同类别的展示图设计 253
13.1　主图设计：网店主图设计详解… 254
13.1.1　素材收集途径… …………254
13.1.2　主图展示方式… …………255
13.2　主图设计：网店主图设计实战… 256
13.2.1　电脑网店主图设计… ……256
13.2.2　玩具网店主图设计… ……261
第14 章　网店详页：不拘一格的宝贝描述设计…………………………… 265
14.1　详页设计：网店详页设计详解… 266
14.1.1　商品详页的设计要点… …267
14.1.2　商品图片的展示方式… …267
14.1.3　商品细节的展示… ………268
14.2　详页设计：网店详页设计实战… 268
14.2.1　抱枕网店详页设计… ……268
14.2.2　坚果零食网店详页设计… 272
第15 章　家居行业：掌握家居网店装修设计 277
15.1　家居网店：家居网店设计布局与配色分析… 278
15.2　家居网店：家居网店装修实战步骤详解… … 278
15.2.1　制作家居店铺导航和店招的效果… …279
15.2.2　制作家居店铺首页欢迎模块的效果… 282
15.2.3　制作家居店铺单品简介区的效果… …284
15.2.4　制作家居店铺广告海报区域的效果… 286
15.2.5　制作家居店铺服务信息区的效果… …288
第16 章　食品行业：掌握食品网店装修设计 289
16.1　美食网店：店铺设计布局与配色分析… …… 290
16.2　美食网店：店铺网页装修实战步骤详解… … 290
16.2.1　制作美食店铺导航和店招的效果… …291
16.2.2　制作美食店铺首页欢迎模块的效果… 293
16.2.3　制作美食店铺商品推荐区的效果… …296
16.2.4　制作美食店铺商品展示区的效果… …300
16.2.5　制作美食店铺底部功能区的效果… …303
第17 章　电子行业：掌握电子网店装修设计 305
17.1　手机网店：店铺设计布局与配色分析… …… 306
17.2　手机网店：店铺网页装修实战步骤详解… … 306
17.2.1　制作手机店铺背景和店招的效果… …307
17.2.2　制作手机店铺首页欢迎模块的效果… 309
17.2.3　制作手机店铺商品展示区的效果… …311
17.2.4　制作手机店铺单品简介区的效果… …314
17.2.5　制作手机店铺商品推荐专区的效果… 317
第18 章　化妆品行业：掌握化妆品网店装修设计……………………………321
18.1　美妆网店：店铺设计布局与配色分析… …… 322
18.2　美妆网店：店铺网页装修实战步骤详解… … 322
18.2.1　制作美妆店铺店招和导航的效果… …323
18.2.2　制作美妆店铺首页欢迎模块的效果… 325
18.2.3　制作美妆店铺促销方案的效果… ……330
18.2.4　制作美妆店铺商品展示区的效果… …331
18.2.5　制作美妆店铺商品热销区的效果… …335
附录　Photoshop 软件快捷键操作………… 338