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

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