内容简介

本书是一本讲解如何使用Photoshop软件进行淘宝天猫网店设计的实例操作型自学教程，可以帮助淘宝天猫网店店主或设计爱好者，特别是网店页面设计人员提高网店页面的制作能力，拓展淘宝天猫网店店面的视觉设计的创造思路。

本书共18章，内容包括：淘宝天猫网店装修入门知识、丰富网店页面的色彩与布局、Photoshop软件的基本操作、美化淘宝商品图像、店铺商品色调美化、网店文字的编排处理、商品图像合成设计、淘宝天猫广告图片特效设计、网店装修三大区域设计、解密旺铺完美店招设计、帮助网店顾客自主购物、打造深入人心的首页设计、不同类别的展示图设计、不拘一格的宝贝描述设计、掌握家居网店装修设计、掌握食品网店装修设计、掌握电子网店装修设计、掌握化妆品网店装修设计。全书使用自带素材，通过Photoshop的制作与对素材的不同处理，制作出精美的界面效果。制作界面过程已被录为视频并被刻录成光盘，可以在手机与网络中进行播放与分享。读者学后可以融会贯通、举一反三，完成自己的作品。

本书结构清晰、语言简洁、实例丰富、版式精美，适合想要在网上、手机上开店创业的读者，以及网店美工、图像处理人员、平面广告设计人员、网络广告设计人员等学习使用，同时也可以作为各类计算机培训中心、中等职业学校、中等专业学校、职业高中和技工学校的辅导教材。

前言

 

写作驱动

本书是初学者全面自学Photoshop 淘宝天猫网店设计的经典畅销教程。全书从实用角度出发，全面、系统地讲解了Photoshop 淘宝天猫网店设计从入门到精通的方法，基本上涵盖了Photoshop 全部工具、面板和菜单命令。本书在介绍软件功能的同时，还精心安排了118 个具有针对性的实例，帮助读者轻松掌握软件的使用技巧和具体应用，以达到学用结合的目的。并且，全部实例都配有教学录像，详细演示案例制作过程。此外，还提供了用于查询软件功能和实例的索引。

 

本书特色

 

60 个专家提醒放送：作者在编写本书时，将平时工作中总结的各方面软件的实战技巧、设计经验等毫无保留地奉献给读者，不仅大大丰富和提高了本书的含金量，更方便读者提升软件的实战技巧与经验，从而快速提高读者学习与工作的效率，使读者学有所成。

118 个技能实例奉献：本书通过大量技能实例来辅讲软件，共达118 个，帮助读者在实战演练中逐步掌握软件的核心技能与操作技巧。与同类书相比，读者可以省去学无用理论的时间，更能掌握超出同类书的大量实用技能和案例，让学习更高效。

410 多分钟音视频演示：本书中的软件操作技能实例，全部录制了带语音讲解的视频，时间长度达410 多分钟，重现书中所有实例操作。读者可以结合书本，也可以独立地观看视频演示，像看电影一样进行学习，让学习变得更加轻松。

340 多款素材效果奉献：随书光盘包含了190 个素材文件和150 个效果文件。其中素材涉及商业素材、商品素材、淘宝海报素材、风景素材、美食素材、淘宝促销素材等，供读者使用。

1070 多张图片全程图解：本书采用了1070 多张图片对软件技术、实例讲解、效果展示，进行了全程式的图解，通过这些大量清晰的图片，让实例的内容变得更通俗易懂。读者可以一目了然，快速领会，举一反三，制作出更多精美的网店装修设计效果。

本书由蒋珍珍编著，参与编写的人员有王碧清、刘胜璋、刘向东、刘松异、刘伟、卢博、周旭阳、袁淑敏、谭中阳、杨端阳、李四华、王力建、柏承能、刘桂花、柏松、谭贤、谭俊杰、徐茜、刘嫔、苏高、柏慧等，在此表示感谢。由于作者知识水平有限，书中难免有错误和疏漏之处，恳请广大读者批评、指正，联系微信号：157075539。

                                                                                                           编　者

 

目 录

第１章　新手导航：淘宝天猫网店装修入门知识 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