零基礎(chǔ)電商設(shè)計全套技能修煉

第1章 電商設(shè)計的基礎(chǔ)知識021
1．1　電商設(shè)計概述022
1．1．1　什么是電商設(shè)計022
1．1．2　電商設(shè)計的基本內(nèi)容022
1．1．3　電商設(shè)計師的就業(yè)前景022
1．2　電商設(shè)計師需要具備的基本能力023
1．2．1　熟練使用設(shè)計軟件023
1．2．2　合理運(yùn)用設(shè)計理念023
1．2．3　學(xué)會視覺營銷023
1．2．4　掌握與團(tuán)隊溝通協(xié)作的能力023
1．3　電商設(shè)計的四大法則024
1．3．1　合理的店鋪定位024
1．3．2　耐看的版式026
1．3．3　和諧的顏色搭配029
1．3．4　舒服的字體搭配033
1．4　關(guān)于店鋪裝修的一些基礎(chǔ)知識033
1．4．1　電商網(wǎng)頁的結(jié)構(gòu)與布局033
1．4．2　電商網(wǎng)頁的尺寸034
1．4．3　淘寶旺鋪034
1．4．4　圖片空間的使用036
1．4．5　店鋪裝修的基礎(chǔ)流程037
1．4．6　圖片的切割、優(yōu)化與存儲040
第2章　如何處理淘寶圖片043
2．1　圖片的基本處理方法044
2．1．1　調(diào)整圖像的大小044
2．1．2　裁剪圖片044
2．1．3　更改圖片格式045
2．2　摳圖045
2．2．1　使用“魔棒工具”摳圖045
2．2．2　使用“鋼筆工具”摳圖046
2．2．3　使用“調(diào)整邊緣”摳圖046
2．2．4　使用“通道”摳圖047
2．3　調(diào)色047
2．3．1　使用“色相/飽和度”調(diào)色047
2．3．2　使用“色彩平衡”調(diào)色048
2．3．3　使用“可選顏色”調(diào)色048
2．4　其他常見問題的解決方法048
2．4．1　對比度不夠怎么辦049
2．4．2　如何虛化背景，突出主體049
2．4．3　如何使用“仿制圖章工具”修除瑕疵049
2．4．4　如何使用“修補(bǔ)工具”去除人物眼袋050
2．4．5　巧用“濾鏡”，讓人物皮膚變得光滑050
2．4．6　巧用“蒙版”與“曲線”，讓人物皮膚變白051
2．4．7　巧用“液化”，對人物進(jìn)行瘦身051
2．4．8　如何進(jìn)行圖片的合成處理052
2．4．9　如何添加和去除水印053
2．5　電商產(chǎn)品圖精修綜合實戰(zhàn)054
實戰(zhàn)：不銹鋼水壺圖片精修案例詳解054
實戰(zhàn)：洗面奶圖片精修案例詳解058
實戰(zhàn)：人像精修案例詳解059
第3章　常用電商字體的制作方法061
3．1　字體的下載與安裝062
3．2　字體設(shè)計的三大炫酷技法063
3．2．1　矩形造字063
3．2．2　鋼筆造字064
3．2．3　字庫改字065
3．3　常用電商字體的制作與解析066
3．3．1　折紙字體066
3．3．2　粉筆字體067
3．3．3　毛筆字體068
3．4　3D立體字的制作方法069
3．4．1　3D選項欄069
3．4．2　3D工具069
3．4．3　3D面板069
3．4．4　屬性面板069
實戰(zhàn)：“雙十一大促”3D立體字制作案例解析070
第4章　電商LOGO的制作方法071
4．1　常見類型的電商LOGO分析　072
4．1．1　字母型072
4．1．2　文字型072
4．1．3　吉祥物型072
4．1．4　組合型072
4．2　電商LOGO的制作要點說明　073
4．2．1　具備代表性073
4．2．2　具備企業(yè)特征073
4．2．3　具備易傳播性073
4．2．4　具備整體性073
4．3　電商LOGO的制作　073
實戰(zhàn)：制作億擺品牌的LOGO073
實戰(zhàn)：制作厚德品牌的LOGO075
第5章　電商GIF動圖的制作方法077
5．1　電商GIF動圖的使用類型078
5．1．1　導(dǎo)航欄動態(tài)圖078
5．1．2　頁面動態(tài)圖078
5．2　電商GIF動圖的制作078
實戰(zhàn)：制作360°寶貝展示動圖078
實戰(zhàn)：制作下雪動態(tài)圖080
實戰(zhàn)：制作圓球動態(tài)圖082
第6章　電商醒目標(biāo)識的制作方法083
6．1　電商醒目標(biāo)識的類型084
6．2　電商醒目標(biāo)識的制作084
實戰(zhàn)：制作對話框標(biāo)識084
實戰(zhàn)：制作邊角標(biāo)識085
實戰(zhàn)：制作箭頭標(biāo)識086
實戰(zhàn)：制作爆炸多邊形標(biāo)識087
第7章　投影效果的制作方法089
7．1　投影效果制作的要點090
7．2　常見的投影效果的制作與解析090
7．2．1　按效果分類090
實戰(zhàn)：制作模糊投影090
實戰(zhàn)：制作漸變投影091
實戰(zhàn)：制作扁平化長投影　091
7．2．2　按形態(tài)分類092
實戰(zhàn)：制作正方體投影092
實戰(zhàn)：制作圓柱體投影093
實戰(zhàn)：制作長方體投影094
第8章　時間軸的認(rèn)識與應(yīng)用095
8．1　時間軸的概念096
8．2　時間軸的設(shè)置與應(yīng)用096
8．2．1　主圖視頻096
8．2．2　詳情頁動態(tài)圖096
實戰(zhàn)：時間軸的設(shè)置與應(yīng)用案例解析096
實戰(zhàn)：時間軸在動態(tài)店招制作中的運(yùn)用098
第9章　Cinema 4D在電商設(shè)計中的應(yīng)用
技巧101
9．1　Cinema 4D軟件在電商設(shè)計中的應(yīng)用范疇102
9．1．1　制作金屬文字102
9．1．2　制作可愛氣球字102
9．1．3　制作霓虹燈文字102
9．1．4　擬人化建模103
9．1．5　制作低多邊形場景103
9．1．6　制作城市建筑場景103
9．1．7　商業(yè)產(chǎn)品建?！?04
9．2　Cinema 4D在電商設(shè)計中的應(yīng)用實操詳解104
實戰(zhàn)：約惠春天——簡單場景的搭建104
實戰(zhàn)：年終狂歡盛典——霓虹燈文字海報設(shè)計113
第10章　店招的設(shè)計與安放119
10．1　店招設(shè)計的規(guī)范與注意事項120
10．2　店招的風(fēng)格類型有哪些120
10．2．1　品牌型120
10．2．2　活動促銷型121
10．2．3　產(chǎn)品推廣型121
實戰(zhàn)：全屏店招的制作與安放121
拓展練習(xí)：制作一個服裝店鋪的店招128
第11章　導(dǎo)航欄設(shè)計129
11．1　導(dǎo)航欄常見類型　130
11．1．1　按顯示方式劃分130
11．1．2　按位置劃分130
11．2　導(dǎo)航欄的寶貝分類與管理設(shè)置　130
實戰(zhàn)：制作護(hù)膚品店鋪的頁頭導(dǎo)航欄131
實戰(zhàn)：制作裝飾燈店鋪的頁尾導(dǎo)航欄132
實戰(zhàn)：通過CSS代碼修改導(dǎo)航欄133
拓展練習(xí)：制作一個服裝店鋪頁頭導(dǎo)航欄134
第12章　海報設(shè)計135
12．1　電商海報的意義　136
12．1．1　傳達(dá)產(chǎn)品信息136
12．1．2　增強(qiáng)畫面藝術(shù)表現(xiàn)力136
12．1．3　增加畫面趣味136
12．2　電商海報的常用版式　136
12．2．1　左文右圖/左圖右文136
12．2．2　左右產(chǎn)品，中間文案136
12．2．3　居中構(gòu)圖137
12．2．4　三角構(gòu)圖137
12．2．5　S/Z形構(gòu)圖137
12．3　電商海報的設(shè)計要點　137
12．3．1　主題突出137
12．3．2　風(fēng)格明確137
12．3．3　構(gòu)圖合理137
12．3．4　細(xì)節(jié)完善138
實戰(zhàn)：簡約海報的制作與安放　138
拓展練習(xí)：制作一張服裝店鋪的海報142
第13章　寶貝陳列區(qū)設(shè)計143
13．1　寶貝陳列區(qū)設(shè)計的要點　144
13．1．1　直截了當(dāng)144
13．1．2　重點突出144
13．1．3　整體統(tǒng)一144
13．2　“寶貝推薦”模塊的設(shè)置方法144
實戰(zhàn)：制作茶葉自定義陳列區(qū)頁面146
拓展練習(xí)：制作一個零食自定義陳列區(qū)頁面148
第14章　詳情頁設(shè)計149
14．1　詳情頁的設(shè)計要點與規(guī)范150
14．1．1　設(shè)計要點150
14．1．2　布局的基本規(guī)范150
14．1．3　尺寸規(guī)范151
14．2　設(shè)計詳情頁時常見的問題　151
14．2．1　無休止的文字151
14．2．2　過多的優(yōu)惠信息151
14．2．3　牛皮癬圖的濫用152
14．3　詳情頁的制作流程分析　152
14．3．1　設(shè)定頁面風(fēng)格152
14．3．2　收集素材152
14．3．3　確立布局框架152
14．3．4　確定配色方案153
14．3．5　選擇字體153
14．3．6　對文字和圖片進(jìn)行排版154
14．3．7　確認(rèn)定稿154
14．3．8　切片存儲154
14．3．9　完成上傳155
實戰(zhàn)：制作女裝的詳情頁155
拓展練習(xí)：制作一個男裝詳情頁166
第15章　頁尾設(shè)計167
15．1　頁尾的分類168
15．1．1　返回頂部型168
15．1．2　文字說明型168
15．1．3　分類導(dǎo)航型168
15．2　頁尾設(shè)計的注意事項169
15．2．1　設(shè)計要簡約169
15．2．2　使用圖案元素169
15．2．3　設(shè)計風(fēng)格要統(tǒng)一169
15．2．4　字號要小170
15．2．5　包含的信息要全170
15．3　頁尾的設(shè)計與制作　170
實戰(zhàn)：制作返回頂部型頁尾170
實戰(zhàn)：制作旺旺客服頁尾　171
實戰(zhàn)：制作分類導(dǎo)航型促銷頁尾173
拓展練習(xí)：制作一個文字說明型頁尾174
第16章　店鋪收藏欄設(shè)計175
16．1　店鋪收藏欄的設(shè)計要點176
16．1．1　好看的圖標(biāo)176
16．1．2　必要的提示文字176
16．2　店鋪收藏欄的設(shè)計與制作176
實戰(zhàn)：制作服裝店鋪收藏欄176
實戰(zhàn)：制作促銷型收藏欄　177
實戰(zhàn)：制作動態(tài)型收藏欄　178
拓展練習(xí)：制作一個化妝品店鋪收藏欄180
第17章　首頁背景設(shè)計181
17．1　首頁背景的分類182
17．1．1　固定型182
17．1．2　固定懸浮型182
17．1．3　交替型182
17．1．4　滾動型182
17．2　首頁背景的制作方法　182
實戰(zhàn)：制作固定型首頁背景182
實戰(zhàn)：制作固定懸浮型首頁背景183
實戰(zhàn)：制作交替型首頁背景184
實戰(zhàn)：制作滾動型首頁背景185
拓展練習(xí)：制作一個固定懸浮型首頁背景186
第18章　直通車圖的設(shè)計187
18．1　直通車的分類　188
18．1．1　店鋪直通車188
18．1．2　產(chǎn)品直通車188
18．2　直通車圖設(shè)計的基本流程　189
18．2．1　根據(jù)產(chǎn)品標(biāo)題和賣點提煉文案189
18．2．2　選產(chǎn)品圖和確定主色調(diào)189
18．2．3　使文案與產(chǎn)品圖相互配合190
18．3　常見的直通車圖的構(gòu)圖方式　190
18．3．1　左右構(gòu)圖190
18．3．2　上下構(gòu)圖191
18．3．3　對角線構(gòu)圖191
實戰(zhàn)：制作剃須刀直通車圖192
實戰(zhàn)：制作凈水機(jī)直通車圖194
實戰(zhàn)：制作空氣炸鍋直通車圖196
拓展練習(xí)：制作一個剃須刀直通車圖198
第19章　鉆展圖設(shè)計199
19．1　鉆展圖的分類200
19．1．1　單品推廣200
19．1．2　活動店鋪推廣200
19．1．3　品牌推廣200
19．2　鉆展圖的制作200
實戰(zhàn)：制作家用榨汁機(jī)鉆展圖200
實戰(zhàn)：制作食品店鋪的鉆展圖202
拓展練習(xí)：制作一個食品店鋪鉆展圖204
第20章　電商設(shè)計綜合實戰(zhàn)案例詳解205
20．1　案例概述206
20．1．1　確定店鋪風(fēng)格206
20．1．2　確定模塊數(shù)量，搭建框架206
20．1．3　確定尺寸206
20．2　店招/導(dǎo)航欄設(shè)計206
20．2．1　設(shè)計前的構(gòu)思207
20．2．2　操作步驟207
20．3　全屏海報設(shè)計209
20．3．1　設(shè)計前的構(gòu)思209
20．3．2　操作步驟210
20．4　寶貝列表設(shè)計213
20．4．1　設(shè)計前的構(gòu)思214
20．4．2　操作步驟214
20．5　詳情頁設(shè)計217
20．5．1　首焦海報設(shè)計217
20．5．2　產(chǎn)品基本信息欄設(shè)計219
20．5．3　產(chǎn)品細(xì)節(jié)展示欄設(shè)計222
20．5．4　售后說明欄設(shè)計223
20．6　頁尾設(shè)計225
20．6．1　設(shè)計前的構(gòu)思225
20．6．2　操作步驟225
20．7　優(yōu)惠券設(shè)計225
20．7．1　設(shè)計前的構(gòu)思226
20．7．2　操作步驟226
20．8　客服中心欄設(shè)計226
20．8．1　設(shè)計前的構(gòu)思226
20．8．2　操作步驟227
20．9　直通車圖設(shè)計228
20．9．1　設(shè)計前的構(gòu)思228
20．9．2　操作步驟228
20．10　鉆展圖設(shè)計229
20．10．1　設(shè)計前的構(gòu)思230
20．10．2　操作步驟230
拓展練習(xí)：堅果零食店鋪的首頁設(shè)計230
第21章　移動端店鋪的裝修技巧與方法231
21．1　移動端店鋪裝修的常用模塊詳解232
21．1．1　店招模塊232
21．1．2　智能寶貝模塊232
21．1．3　美顏切圖模塊232
21．1．4　圖片模塊233
21．1．5　焦點圖模塊233
21．1．6　自定義模塊233
21．2　移動端店鋪的裝修流程234
21．2．1　登錄淘寶網(wǎng)234
21．2．2　進(jìn)入裝修頁面234
21．2．3　裝修首焦海報頁面　234
21．2．4　裝修優(yōu)惠券頁面235
21．2．5　裝修寶貝展示頁面235
實戰(zhàn)：移動端化妝品店鋪裝修案例詳解236
拓展練習(xí)：裝修移動端堅果零食店鋪的首頁238
第22章　代碼的知識與制作方法239
22．1　認(rèn)識Dreamweaver240
22．1．1　菜單欄240
22．1．2　插入欄240
22．1．3　文檔工具欄240
22．1．4　文檔窗口241
22．1．5　屬性欄241
22．2　Dreamweaver常用功能解析241
22．2．1　HTML標(biāo)簽的使用241
22．2．2　Div的布局243
實戰(zhàn)：制作彈出層代碼244
實戰(zhàn)：制作手風(fēng)琴代碼246
實戰(zhàn)：制作倒計時代碼248
實戰(zhàn)：制作旋轉(zhuǎn)木馬代碼251
拓展練習(xí)：制作一個倒計時效果的海報252