內容簡介

本書是一本講解如何使用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