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

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

實(shí)戰(zhàn)應(yīng)用——Photoshop 網(wǎng)店美工設(shè)計(jì)
Point 02
版式設(shè)計(jì)原理 ................................ 17
1．版面構(gòu)圖的要點(diǎn) ........................................... 17
2．圖片構(gòu)成的理論 ........................................... 19
3．圖解圖說(shuō)的理論 ........................................... 24
4．文字組合的理論 ........................................... 26
Point 03
配色設(shè)計(jì)原理 ................................ 28
1．色彩的基本屬性 ........................................... 28
2．決定整體配色的理論 .................................... 29
3．選擇基本配色的理論 .................................... 32
4．出現(xiàn)多種色彩的配色理論 ............................. 34
Point 04
字體設(shè)計(jì)原理 ................................ 38
1．字體之間的關(guān)系 ........................................... 38
2．字體對(duì)比 ...................................................... 39
學(xué)習(xí)小結(jié)....................................... 40
Chapter
美工的感性視覺(jué)營(yíng)銷
知識(shí)講解——行業(yè)知識(shí)鏈接..................42
Point 01
視覺(jué)營(yíng)銷的定義 ............................. 42
1．電子商務(wù)中的視覺(jué)營(yíng)銷 ................................. 42
2．視覺(jué)營(yíng)銷的根本目的 .................................... 43
03
Point 02
視覺(jué)色彩系統(tǒng) ................................ 43
1．色彩的情感 ................................................... 43
2．色彩的心理 ................................................... 47
Point 03
視覺(jué)文字的應(yīng)用 ............................. 49
1．字體的選擇與設(shè)計(jì) ........................................ 49
2．字體的搭配與布局 ........................................ 51
Point 04
文案視覺(jué)營(yíng)銷 ................................ 52
目錄.indd 2
2015-8-11 11:33:16

目　錄
1．吸引顧客的文案 ........................................... 53
2．讓顧客消費(fèi)的文案 ........................................ 54
3．FABE 銷售法 ................................................ 54
Point 05
用戶體驗(yàn)抓住你的客戶 .................... 55
1．為什么要注重用戶體驗(yàn) ................................. 55
2．如何做好用戶體驗(yàn) ........................................ 55
學(xué)習(xí)小結(jié)....................................... 58
美工的 P 圖神器
知識(shí)講解——行業(yè)知識(shí)鏈接................. 60
Point 01
Photoshop在網(wǎng)店美工中的應(yīng)用 ...... 60
1．畫面基本處理 ............................................... 60
2．顏色搭配與調(diào)整 ........................................... 61
3．版面設(shè)計(jì) ...................................................... 61
4．圖片優(yōu)化 ...................................................... 61
Chapter
04
Point 02
Point 03
Photoshop的操作界面 ................... 61
平面設(shè)計(jì)轉(zhuǎn)美工的必知要點(diǎn) ............. 62
1．顏色模式 ...................................................... 62
2．分辨率 .......................................................... 62
3．圖片格式 ...................................................... 63
4．圖像單位 ...................................................... 63
5．素材品質(zhì) ...................................................... 63
6．操作技能 ...................................................... 63
7．字體字號(hào) ...................................................... 64
8．展示平臺(tái) ...................................................... 64
Point 04
*牛的Photoshop技能 ................... 64
1．快速找到需要的圖層 .................................... 64
2．快速對(duì)齊 ...................................................... 64
目錄.indd 3
2015-8-11 11:33:16

實(shí)戰(zhàn)應(yīng)用——Photoshop 網(wǎng)店美工設(shè)計(jì)
3．非破壞性編輯 ............................................... 65
4．**的鼠標(biāo)滾輪 ........................................... 66
5．小鍵大作用 ................................................... 66
6．隱藏輔助工具 ............................................... 66
7．智能參考線 ................................................... 66
8．縮放字體大小 ............................................... 66
9．批量顯示或隱藏圖層 .................................... 67
10．快速展開(kāi)或收起圖層 .................................. 67
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................. 68
Example 01
Example 02
裁剪出**角度的圖片 .............. 68
鋼筆工具**摳圖 .................... 70
Example 03 蒙版合成精美畫面 .................... 73
Example 04
對(duì)產(chǎn)品素材進(jìn)行精修 ................. 75
Example 05 對(duì)模特進(jìn)行人像處理 ................. 78
Example 06
Example 07
Example 08
Example 09
為店鋪內(nèi)圖片添加水印 .............. 80
批處理提高工作效率 ................. 82
對(duì)頁(yè)面進(jìn)行規(guī)則的切片 .............. 85
對(duì)頁(yè)面進(jìn)行不規(guī)則切片 .............. 89
學(xué)習(xí)小結(jié)........................................91
Chapter 這才是大氣的首頁(yè)
05
目錄.indd 4
知識(shí)講解——行業(yè)知識(shí)鏈接................. 93
Point 01
整體布局和定位 ............................. 93
1．店鋪整體結(jié)構(gòu) ............................................... 93
2．店鋪整體布局 ............................................... 94
2015-8-11 11:33:17

目　錄
3．店鋪視覺(jué)定位 ............................................... 97
4．客戶群體定位 ............................................. 103
Point 02
店招 ........................................... 109
1．店招所傳遞的信息 ...................................... 109
2．店招如何引導(dǎo)點(diǎn)擊 .......................................110
Point 03
導(dǎo)航 ........................................... 110
1．隱形導(dǎo)航 .....................................................110
2．半隱形導(dǎo)航 ..................................................111
3．顯性導(dǎo)航 .....................................................111
Point 04
首焦 ........................................... 112
1．首焦的高度 ..................................................112
2．首焦的信息傳遞 ..........................................113
3．首焦的版面布局 ..........................................114
4．首焦的展現(xiàn)方式 ..........................................116
5．首焦的視覺(jué)沖擊 ..........................................117
Point 05
產(chǎn)品分類 ..................................... 117
1．分類的表現(xiàn)方式 ..........................................117
2．分類的交互效果 ..........................................118
Point 06
產(chǎn)品陳列 ..................................... 118
1．干凈簡(jiǎn)潔 .....................................................118
2．突出爆款 .....................................................119
3．整體統(tǒng)一 .................................................... 120
4．搭配展示 .................................................... 120
5．產(chǎn)品排序 .................................................... 121
Point 07
頁(yè)尾 ........................................... 122
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................ 122
Example 01
Example 02
設(shè)計(jì)帶收藏的全屏店招 ............ 122
設(shè)計(jì)圖片式導(dǎo)航欄 .................. 127
目錄.indd 5
2015-8-11 11:33:17

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

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

實(shí)戰(zhàn)應(yīng)用——Photoshop 網(wǎng)店美工設(shè)計(jì)
Example 05 設(shè)計(jì)產(chǎn)品屬性模塊 .................. 227
Example 06
設(shè)計(jì)產(chǎn)品細(xì)節(jié)模塊 .................. 232
Example 07 設(shè)計(jì)產(chǎn)品賣點(diǎn)提取模塊 ............ 234
Example 08
Example 09
Example 10
設(shè)計(jì)關(guān)聯(lián)營(yíng)銷廣告位模塊 ......... 237
設(shè)計(jì)售后保障模塊 .................. 239
將詳情頁(yè)頁(yè)面切片優(yōu)化上傳發(fā)布 248
學(xué)習(xí)小結(jié)......................................259
Chapter 大師教你做主圖
07
知識(shí)講解——行業(yè)知識(shí)鏈接................ 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
主圖的構(gòu)圖方式 ........................... 266
1．黃金分割構(gòu)圖 ............................................. 266
2．直線式構(gòu)圖 ................................................. 267
3．漸次式構(gòu)圖 ................................................. 267
4．三角形構(gòu)圖 ................................................. 268
5．輻射性構(gòu)圖 ................................................. 268
6．對(duì)角線構(gòu)圖 ................................................. 268
目錄.indd 8
2015-8-17 15:37:48

目　錄
7．其他構(gòu)圖 .................................................... 269
Point 05
Point 06
Point 07
主圖的信息分層 ........................... 269
主圖的品牌宣傳 ........................... 270
主圖的場(chǎng)景表現(xiàn) ........................... 270
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................ 271
Example 01
Example 02
Example 03
Example 04
Example 05
設(shè)計(jì)品牌感主圖 ...................... 271
設(shè)計(jì)簡(jiǎn)約型主圖 ...................... 273
設(shè)計(jì)場(chǎng)景化主圖 ...................... 275
設(shè)計(jì)營(yíng)銷型主圖 ...................... 278
設(shè)計(jì)帶質(zhì)感主圖 ...................... 282
學(xué)習(xí)小結(jié)......................................287
傳情達(dá)意的推廣圖
知識(shí)講解——行業(yè)知識(shí)鏈接................289
Point 01
直通車廣告位 .............................. 289
1．搜索推廣 .................................................... 289
2．定向推廣 ................................................... 290
3．增值服務(wù) .................................................... 291
Chapter
08
Point 02 鉆展廣告位 .................................. 291
1．**首頁(yè)焦點(diǎn)圖 ......................................... 291
2．一屏右側(cè) banner 圖.................................... 292
3．**底部通欄 - 小圖等 ............................... 292
4．**垂直頻道，如**女裝、家居商品等 .. 292
5．收藏夾底部的小圖和通欄 ........................... 292
6．**站外的廣告位，如優(yōu)酷的資源位 ......... 293
目錄.indd 9
2015-8-11 11:33:18

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

目　錄
對(duì)不起！代碼我來(lái)晚了
知識(shí)講解——行業(yè)知識(shí)鏈接................320
Point 01
什么是代碼 .................................. 320
Chapter
Point 02 代碼在網(wǎng)店中的應(yīng)用 ..................... 320
Point 03
Point 04
編輯代碼的軟件 ........................... 320
學(xué)習(xí)代碼的網(wǎng)站 ........................... 321
09
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................ 321
Example 01
Example 02
Example 03
Example 04
通過(guò)CSS代碼修改導(dǎo)航 ........... 322
生成全屏海報(bào) ......................... 325
生成固定背景 ......................... 330
生成旺旺在線模板 .................. 333
學(xué)習(xí)小結(jié)......................................340
目錄.indd 11
2015-8-11 11:33:19

目錄.indd 12
2015-8-11 11:33:19