Photoshop網(wǎng)店美工設計（含盤）

CONTENTS
網(wǎng)
店
美
工
設
計
目錄
電子商務之網(wǎng)店美工
知識講解——行業(yè)知識鏈接................... 2
Point 01
年輕的你需要了解的 ......................... 2
1．什么是美工 ..................................................... 2
2．**美工的工作內容 ...................................... 3
3．**美工的就業(yè)前景 ...................................... 3
4．**設計大師對美工的理解 ........................... 5
Chapter
01
Point 02
做好美工的五大重點 ......................... 5
1．學會美工的常用工具 ...................................... 5
2．運用設計理念 ................................................. 6
3．學會視覺營銷 ................................................. 6
4．熟悉**平臺 ................................................. 7
5．掌握團隊溝通與配合 ...................................... 7
學習小結......................................... 8
美工的理性設計法則
知識講解——行業(yè)知識鏈接..................10
Point 01
設計思維整理 ................................ 10
1．親密 ............................................................. 10
2．對齊 ............................................................. 12
3．重復 ............................................................. 13
4．對比 ............................................................. 16
Chapter
02
2015-8-11 11:33:15
目錄.indd 1

實戰(zhàn)應用——Photoshop 網(wǎng)店美工設計
Point 02
版式設計原理 ................................ 17
1．版面構圖的要點 ........................................... 17
2．圖片構成的理論 ........................................... 19
3．圖解圖說的理論 ........................................... 24
4．文字組合的理論 ........................................... 26
Point 03
配色設計原理 ................................ 28
1．色彩的基本屬性 ........................................... 28
2．決定整體配色的理論 .................................... 29
3．選擇基本配色的理論 .................................... 32
4．出現(xiàn)多種色彩的配色理論 ............................. 34
Point 04
字體設計原理 ................................ 38
1．字體之間的關系 ........................................... 38
2．字體對比 ...................................................... 39
學習小結....................................... 40
Chapter
美工的感性視覺營銷
知識講解——行業(yè)知識鏈接..................42
Point 01
視覺營銷的定義 ............................. 42
1．電子商務中的視覺營銷 ................................. 42
2．視覺營銷的根本目的 .................................... 43
03
Point 02
視覺色彩系統(tǒng) ................................ 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 圖神器
知識講解——行業(yè)知識鏈接................. 60
Point 01
Photoshop在網(wǎng)店美工中的應用 ...... 60
1．畫面基本處理 ............................................... 60
2．顏色搭配與調整 ........................................... 61
3．版面設計 ...................................................... 61
4．圖片優(yōu)化 ...................................................... 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

實戰(zhàn)應用——Photoshop 網(wǎng)店美工設計
3．非破壞性編輯 ............................................... 65
4．**的鼠標滾輪 ........................................... 66
5．小鍵大作用 ................................................... 66
6．隱藏輔助工具 ............................................... 66
7．智能參考線 ................................................... 66
8．縮放字體大小 ............................................... 66
9．批量顯示或隱藏圖層 .................................... 67
10．快速展開或收起圖層 .................................. 67
實戰(zhàn)應用——上機實戰(zhàn)訓練................. 68
Example 01
Example 02
裁剪出**角度的圖片 .............. 68
鋼筆工具**摳圖 .................... 70
Example 03 蒙版合成精美畫面 .................... 73
Example 04
對產(chǎn)品素材進行精修 ................. 75
Example 05 對模特進行人像處理 ................. 78
Example 06
Example 07
Example 08
Example 09
為店鋪內圖片添加水印 .............. 80
批處理提高工作效率 ................. 82
對頁面進行規(guī)則的切片 .............. 85
對頁面進行不規(guī)則切片 .............. 89
學習小結........................................91
Chapter 這才是大氣的首頁
05
目錄.indd 4
知識講解——行業(yè)知識鏈接................. 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．首焦的展現(xiàn)方式 ..........................................116
5．首焦的視覺沖擊 ..........................................117
Point 05
產(chǎn)品分類 ..................................... 117
1．分類的表現(xiàn)方式 ..........................................117
2．分類的交互效果 ..........................................118
Point 06
產(chǎn)品陳列 ..................................... 118
1．干凈簡潔 .....................................................118
2．突出爆款 .....................................................119
3．整體統(tǒng)一 .................................................... 120
4．搭配展示 .................................................... 120
5．產(chǎn)品排序 .................................................... 121
Point 07
頁尾 ........................................... 122
實戰(zhàn)應用——上機實戰(zhàn)訓練................ 122
Example 01
Example 02
設計帶收藏的全屏店招 ............ 122
設計圖片式導航欄 .................. 127
目錄.indd 5
2015-8-11 11:33:17

實戰(zhàn)應用——Photoshop 網(wǎng)店美工設計
Example 03 上傳整個全屏頁頭 .................. 129
Example 04
設計首頁整體布局 .................. 141
Example 05 設計全屏海報 ......................... 151
Example 06
上傳全屏海報至首頁 ............... 157
Example 07 在首頁添加搜索欄 .................. 165
Example 08
Example 09
Example 10
Example 11
設計圖文結合的產(chǎn)品分類 ......... 168
設計按顏色分類的產(chǎn)品展示 ...... 173
設計簡約大牌的產(chǎn)品陳列 ......... 180
設計功能全面的頁尾 ............... 185
學習小結......................................190
Chapter 金牌導購詳情頁
06
知識講解——行業(yè)知識鏈接................ 192
Point 01
讓顧客一見鐘情的描述 .................. 192
1．整體設計 .................................................... 192
2．說服邏輯 .................................................... 192
3．視覺呈現(xiàn) .................................................... 192
Point 02
詳情頁的分類 .............................. 192
1．產(chǎn)品展示類 ................................................. 193
2．實力展示類 ................................................. 193
3．吸引購買類 ................................................. 193
4．交易說明類 ................................................. 194
5．促銷說明類 ................................................. 194
Point 03
詳情頁包括哪些基本內容 .............. 195
目錄.indd 6
2015-8-11 11:33:17

目　錄
1．寶貝整體圖片 ............................................. 195
2．寶貝細節(jié)圖片 ............................................. 196
3．模特圖 ........................................................ 196
4．宣傳廣告圖 ................................................. 197
5．SKU 屬性 ................................................... 198
6．產(chǎn)品介紹 .................................................... 198
7．使用說明 .................................................... 198
8．產(chǎn)品賣點 .................................................... 199
9．產(chǎn)品類比 .................................................... 200
10．使用場景圖 ............................................... 200
11．口碑 .......................................................... 200
12．產(chǎn)品包裝 .................................................. 201
13．售后說明 .................................................. 201
14．品牌文化 .................................................. 202
15．關聯(lián)營銷廣告位 ....................................... 202
16．活動圖片 .................................................. 202
17．情感營銷圖 ............................................... 203
Point 04
寶貝描述模塊排序 ........................ 204
1．了解用戶需求 ............................................. 204
2．進行合理排序 ............................................. 204
Point 05
寶貝描述的設計要點 ..................... 205
1．控制頁面長度 ............................................. 205
2．選擇合適的內容 ......................................... 206
3．根據(jù)顧客需求設計頁面 ............................... 206
實戰(zhàn)應用——上機實戰(zhàn)訓練................206
Example 01
Example 02
Example 03
Example 04
設計詳情頁整體布局 ............... 207
設計促銷活動模塊 .................. 214
設計產(chǎn)品實拍模塊 .................. 218
設計尺碼說明模塊 .................. 222
目錄.indd 7
2015-8-11 11:33:18

實戰(zhàn)應用——Photoshop 網(wǎng)店美工設計
Example 05 設計產(chǎn)品屬性模塊 .................. 227
Example 06
設計產(chǎn)品細節(jié)模塊 .................. 232
Example 07 設計產(chǎn)品賣點提取模塊 ............ 234
Example 08
Example 09
Example 10
設計關聯(lián)營銷廣告位模塊 ......... 237
設計售后保障模塊 .................. 239
將詳情頁頁面切片優(yōu)化上傳發(fā)布 248
學習小結......................................259
Chapter 大師教你做主圖
07
知識講解——行業(yè)知識鏈接................ 261
Point 01
Point 02
主圖的重要性 .............................. 261
主圖的主要規(guī)范 ........................... 262
1．天貓主圖發(fā)布規(guī)范 ...................................... 262
2．C 店主圖發(fā)布規(guī)范 ...................................... 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
主圖的場景表現(xiàn) ........................... 270
實戰(zhàn)應用——上機實戰(zhàn)訓練................ 271
Example 01
Example 02
Example 03
Example 04
Example 05
設計品牌感主圖 ...................... 271
設計簡約型主圖 ...................... 273
設計場景化主圖 ...................... 275
設計營銷型主圖 ...................... 278
設計帶質感主圖 ...................... 282
學習小結......................................287
傳情達意的推廣圖
知識講解——行業(yè)知識鏈接................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．**站外的廣告位，如優(yōu)酷的資源位 ......... 293
目錄.indd 9
2015-8-11 11:33:18

實戰(zhàn)應用——Photoshop 網(wǎng)店美工設計
Point 03
推廣圖的設計準則 ........................ 293
1．推廣主題清晰 ............................................. 294
2．目標人群準確 ............................................. 295
3．表現(xiàn)形式美觀 ............................................. 296
Point 04
單品推廣設計 .............................. 297
1．價格差異化 ................................................. 298
2．折扣差異化 ................................................. 298
3．銷量差異化 ................................................. 299
4．品質差異化 ................................................. 299
5．創(chuàng)意差異化 ................................................. 299
Point 05
Point 06
店鋪推廣設計 .............................. 300
明星店鋪圖設計 ........................... 301
Point 07 活動推廣設計 .............................. 301
Point 08
鉆展圖設計.................................. 301
1．明確的主題 ................................................. 302
2．鉆展文字信息 ............................................. 302
3．鉆展圖片要求 ............................................. 303
實戰(zhàn)應用——上機實戰(zhàn)訓練................303
Example 01
Example 02
體現(xiàn)價格單品推廣 .................. 304
體現(xiàn)折扣單品推廣 .................. 306
Example 03 體現(xiàn)銷量單品推廣 .................. 309
Example 04
Example 05
Example 06
全店活動店鋪推廣 .................. 312
明星店鋪推廣設計 .................. 314
鉆展圖設計 ............................ 316
學習小結...................................... 318
目錄.indd 10
2015-8-11 11:33:18

目　錄
對不起！代碼我來晚了
知識講解——行業(yè)知識鏈接................320
Point 01
什么是代碼 .................................. 320
Chapter
Point 02 代碼在網(wǎng)店中的應用 ..................... 320
Point 03
Point 04
編輯代碼的軟件 ........................... 320
學習代碼的網(wǎng)站 ........................... 321
09
實戰(zhàn)應用——上機實戰(zhàn)訓練................ 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