淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)教程（微課版）

第1篇　網(wǎng)店美工基礎(chǔ)
初識(shí)網(wǎng)店美工
■　任務(wù)1∣熟悉淘寶、天貓網(wǎng)店美工崗位
一、　任務(wù)描述　002
二、　相關(guān)知識(shí)　002
（一）　淘寶、天貓網(wǎng)店美工的工作范疇與設(shè)計(jì)要求　002
（二）　網(wǎng)店美工的技能要求　002
三、　任務(wù)實(shí)施　003
四、　新手試練　004
■　任務(wù)2∣熟悉Photoshop圖像處理軟件
一、　任務(wù)描述　004
二、　相關(guān)知識(shí)　005
（一）　認(rèn)識(shí)Photoshop CS6的工作界面　005
（二）　認(rèn)識(shí)Photoshop CS6的的常用工具　006
（三）　認(rèn)識(shí)Photoshop CS6的“圖層”面板　007
（四）　圖層常用的操作　008
（五）　認(rèn)識(shí)與應(yīng)用圖層樣式　008
（六）　Photoshop中的常用快捷鍵　009
三、　任務(wù)實(shí)施　010
四、　新手試練　012
■　任務(wù)3∣其他常用的圖像制作與處理軟件
一、　任務(wù)描述　013
二、　相關(guān)知識(shí)　014
（一）　認(rèn)識(shí)Adobe Illustrator CS6　014
（二）　認(rèn)識(shí)美圖秀秀　015
三、　任務(wù)實(shí)施　016
（一）　使用Illustrator制作吊牌　016
（二）　使用美圖秀秀制作海報(bào)拼圖　018
四、　新手試練　020
■　擴(kuò)展閱讀∣高級淘寶、天貓網(wǎng)店美工的成長路徑　020
■　課后練習(xí)　021
網(wǎng)店美工設(shè)計(jì)的基本理念
■　任務(wù)1∣了解設(shè)計(jì)元素
一、　任務(wù)描述　023
二、　相關(guān)知識(shí)　023
（一）　點(diǎn)　023
（二）　線　024
（三）　面　024
三、　任務(wù)實(shí)施　025
四、　新手試練　025
■　任務(wù)2∣色彩的搭配
一、　任務(wù)描述　026
二、　相關(guān)知識(shí)　027
（一）　色彩的屬性與對比　027
（二）　主色、輔助色與點(diǎn)綴色　028
三、　任務(wù)實(shí)施　029
四、　新手試練　029
■　任務(wù)3∣文案排版設(shè)計(jì)
一、　任務(wù)描述　030
二、　相關(guān)知識(shí)　030
（一）　字體的性格特征　030
（二）　字體風(fēng)格的搭配　032
（三）　字體的布局技巧　033
三、　任務(wù)實(shí)施　033
四、　新手試練　034
■　任務(wù)4∣視覺構(gòu)圖與頁面的布局
一、　任務(wù)描述　035
二、　相關(guān)知識(shí)　035
（一）　視覺構(gòu)圖　035
（二）　店鋪頁面布局的基本元素　037
（三）　店鋪頁面布局的原則　037
三、　任務(wù)實(shí)施　039
四、　新手試練　040
■　擴(kuò)展閱讀∣淘寶、天貓文本裝飾技巧　040
■　課后練習(xí)　041
第2篇　店鋪圖片的處理與管理商品圖片的處理
■　任務(wù)1 ∣調(diào)整商品圖片的尺寸
一、　任務(wù)描述　044
二、　相關(guān)知識(shí)　045
（一）　淘寶、天貓中圖像文件的格式　045
（二）　調(diào)整商品圖像大小與角度的技巧　045
（三）　商品圖片的要求　046
三、　任務(wù)實(shí)施　046
（一）　矯正、裁剪并設(shè)置商品主圖的尺寸　046
（二）　裁剪商品細(xì)節(jié)圖　048
四、　新手試練　049
■　任務(wù)2∣修飾商品圖片
一、　任務(wù)描述　050
二、　相關(guān)知識(shí)　051
（一）　圖片修飾的必要性　051
（二）　修圖的常用方法　051
三、　任務(wù)實(shí)施　053
（一）　美化淘寶、天貓模特圖片　053
（二）　處理金屬質(zhì)感的首飾　054
（三）　制作商品描述圖　056
四、　新手試練　057
■　任務(wù)3∣調(diào)整商品圖像的色彩與質(zhì)感
一、　任務(wù)描述　058
二、　相關(guān)知識(shí)　059
（一）　調(diào)色的必要性　059
（二）　商品調(diào)色的原則　059
（三）　圖片色彩校正的方法　060
（四）　調(diào)色的常用命令　060
三、　任務(wù)實(shí)施　061
（一）　提高圖片的亮度與鮮艷度　061
（二）　調(diào)整圖像偏色　063
（三）　增加圖片的質(zhì)感　064
四、　新手試練　065
■　擴(kuò)展閱讀∣修圖內(nèi)容分析　065
■　課后練習(xí)　066
項(xiàng)目4　商品圖片的特殊處理
■　任務(wù)1∣處理商品圖片的背景
一、　任務(wù)描述　068
二、　相關(guān)知識(shí)　069
（一）　從背景中摳取商品的技巧　069
（二）　鋼筆工具的使用　071
（三）　虛化效果的設(shè)置　071
（四）　使用蒙版控制圖像的顯示　072
三、　任務(wù)實(shí)施　072
（一）　虛化商品背景　072
（二）　白底商品背景的處理　073
（三）　替換玻璃杯的背景　074
四、　新手試練　076
■　任務(wù)2∣商品圖片的組合
一、　任務(wù)描述　077
二、　相關(guān)知識(shí)　078
（一）　圖片組合的類型　078
（二）　圖文搭配技巧　078
（三）　商品的陳列方式　079
（四）　商品陳列的原則　080
（五）　商品圖片的排列、分布與對齊　081
三、　任務(wù)實(shí)施　082
四、　新手試練　083
■　擴(kuò)展閱讀∣淘寶、天貓開店的圖片處理技巧　084
■　課后練習(xí)　085
項(xiàng)目5　商品圖片的切片與管理
任務(wù)1∣商品圖片的切片
一、　任務(wù)描述　087
二、　相關(guān)知識(shí)　087
（一）　切片的作用　087
（二）　切片技巧　087
（三）　認(rèn)識(shí)標(biāo)尺、輔助線　088
三、　任務(wù)實(shí)施　089
四、　新手試練　091
■　任務(wù)2∣商品圖片的管理
一、　任務(wù)描述　092
二、　相關(guān)知識(shí)　093
（一）　圖片空間的優(yōu)勢　093
（二）　管理空間圖片　093
（三）　查看圖片引用與排列方式　093
三、　任務(wù)實(shí)施　094
（一）　上傳優(yōu)化后的商品圖片到圖片空間　094
（二）　刪除與還原空間圖片　096
（三）　替換空間圖片　096
四、　新手試練　097
■　擴(kuò)展閱讀∣ 將切片后的圖片應(yīng)用到店鋪中　098
■　課后練習(xí)　098
第3篇　常規(guī)店鋪裝修設(shè)計(jì)
項(xiàng)目6　店鋪裝修元素設(shè)計(jì)
■　任務(wù)1∣店鋪Logo設(shè)計(jì)
一、　任務(wù)描述　101
二、　相關(guān)知識(shí)　101
（一）　Logo的類型　101
（二）　店鋪Logo設(shè)計(jì)要領(lǐng)　102
三、　任務(wù)實(shí)施　102
四、　新手試練　104
■　任務(wù)2∣店標(biāo)設(shè)計(jì)
一、　任務(wù)描述　104
二、　相關(guān)知識(shí)　106
（一）　店標(biāo)制作方法　106
（二）　店標(biāo)的設(shè)計(jì)要點(diǎn)　106
三、　任務(wù)實(shí)施　107
（一）　制作靜態(tài)店標(biāo)　107
（二）　制作動(dòng)態(tài)店標(biāo)　109
（三）　上傳店標(biāo)到店鋪　110
四、　新手試練　111
■　任務(wù)3∣店招設(shè)計(jì)
一、　任務(wù)描述　112
二、　相關(guān)知識(shí)　112
（一）　店招的設(shè)計(jì)原則　112
（二）　店招風(fēng)格分析　113
（三）　店招的設(shè)計(jì)要求　113
三、　任務(wù)實(shí)施　114
（一）　設(shè)計(jì)常規(guī)店招　114
（二）　設(shè)計(jì)通欄店招　116
四、　新手試練　117
■　任務(wù)4∣快速導(dǎo)航條設(shè)計(jì)
一、　任務(wù)描述　118
二、　相關(guān)知識(shí)　118
三、　任務(wù)實(shí)施　119
四、　新手試練　121
■　擴(kuò)展閱讀∣店招的類型　121
■　課后練習(xí)　122
項(xiàng)目7　淘寶推廣圖設(shè)計(jì)
■　任務(wù)1∣制作高點(diǎn)擊率的主圖
一、　任務(wù)描述　124
二、　相關(guān)知識(shí)　125
（一）　商品圖片的規(guī)范　125
（二）　商品圖片的背景搭配　125
（三）　制作優(yōu)質(zhì)商品主圖的技巧　126
三、　任務(wù)實(shí)施　128
四、　新手試練　130
■　任務(wù)2∣直通車推廣圖設(shè)計(jì)
一、　任務(wù)描述　131
二、　相關(guān)知識(shí)　132
（一）　認(rèn)識(shí)直通車　132
（二）　不同時(shí)期直通車投放的策略　133
（三）　直通車的設(shè)計(jì)原則　133
（四）　直通車引流的關(guān)鍵　134
三、　任務(wù)實(shí)施　135
四、　新手試練　139
■　任務(wù)3∣智鉆圖設(shè)計(jì)
一、　任務(wù)描述　140
二、　相關(guān)知識(shí)　141
（一）　智鉆位置　141
（二）　智鉆圖設(shè)計(jì)標(biāo)準(zhǔn)　142
（三）　智鉆圖的排版方式　143
三、　任務(wù)實(shí)施　144
四、　新手試練　146
■　擴(kuò)展閱讀∣促銷廣告實(shí)施步驟　146
■　課后練習(xí)　147
項(xiàng)目8　店鋪首頁視覺設(shè)計(jì)
■　任務(wù)1∣了解店鋪首頁
一、　任務(wù)描述　149
二、　相關(guān)知識(shí)　150
（一）　了解淘寶店鋪首頁的基礎(chǔ)模塊　150
（二）　店鋪首頁模塊布局的要點(diǎn)　151
三、　任務(wù)實(shí)施　151
（一）　應(yīng)用系統(tǒng)模板　151
（二）　搭建首頁框架　152
四、　新手試練　154
■　任務(wù)2∣設(shè)計(jì)首頁焦點(diǎn)輪播圖
一、　任務(wù)描述　154
二、　相關(guān)知識(shí)　155
（一）　不同輪播圖的尺寸要求　155
（二）　首頁焦點(diǎn)圖的設(shè)計(jì)要點(diǎn)　156
三、　任務(wù)實(shí)施　156
（一）　制作首張全屏海報(bào)圖　156
（二）　制作第二張全屏海報(bào)圖　158
四、　新手試練　161
■　任務(wù)3∣設(shè)計(jì)優(yōu)惠券模塊
一、　任務(wù)描述　162
二、　相關(guān)知識(shí)　162
三、　任務(wù)實(shí)施　163
四、　新手試練　164
■　任務(wù)4∣設(shè)計(jì)分類模塊
一、　任務(wù)描述　165
二、　相關(guān)知識(shí)　165
三、　任務(wù)實(shí)施　165
（一）　橫向分類模塊設(shè)計(jì)　165
（二）　縱向分類模塊設(shè)計(jì)　167
四、　新手試練　168
■　任務(wù)5∣設(shè)計(jì)寶貝促銷模塊
一、　任務(wù)描述　169
二、　相關(guān)知識(shí)　169
三、　任務(wù)實(shí)施　169
（一）　寶貝上新預(yù)告模塊設(shè)計(jì)　169
（二）　寶貝推薦模塊設(shè)計(jì)　171
四、　新手試練　173
■　任務(wù)6∣設(shè)計(jì)收藏區(qū)與客服模塊
一、　任務(wù)描述　174
二、　相關(guān)知識(shí)　174
（一）　店鋪收藏概述　174
（二）　店鋪客服區(qū)概述　174
三、　任務(wù)實(shí)施　175
（一）　設(shè)計(jì)收藏圖片　175
（二）　設(shè)計(jì)客服區(qū)　176
四、　新手試練　177
■　任務(wù)7∣ 設(shè)計(jì)頁尾模塊
一、　任務(wù)描述　177
二、　相關(guān)知識(shí)　177
三、　任務(wù)實(shí)施　178
四、　新手試練　179
■　擴(kuò)展閱讀∣首頁背景的應(yīng)用　179
■　課后練習(xí)　180
項(xiàng)目9　商品詳情頁視覺設(shè)計(jì)
■　任務(wù)1∣了解商品詳情頁
一、　任務(wù)描述　182
二、　相關(guān)知識(shí)　183
（一）　了解商品詳情頁的模塊　183
（二）　商品詳情頁的內(nèi)容分析與策劃要點(diǎn)　184
三、　任務(wù)實(shí)施　185
（一）　設(shè)計(jì)商品詳情頁的布局　185
（二）　設(shè)計(jì)商品詳情分類條　186
四、　新手試練　186
■　任務(wù)2∣詳情頁首頁焦點(diǎn)圖設(shè)計(jì)
一、　任務(wù)描述　187
二、　相關(guān)知識(shí)　187
三、　任務(wù)實(shí)施　188
四、　新手試練　189
■　任務(wù)3∣搭配建議模塊設(shè)計(jì)
一、　任務(wù)描述　189
二、　相關(guān)知識(shí)　190
三、　任務(wù)實(shí)施　190
四、　新手試練　191
■　任務(wù)4∣商品亮點(diǎn)設(shè)計(jì)
一、　任務(wù)描述　191
二、　相關(guān)知識(shí)　191
（一）　商品賣點(diǎn)的特征　191
（二）　商品賣點(diǎn)提煉的原則與方法　192
三、　任務(wù)實(shí)施　192
四、　新手試練　193
■　任務(wù)5∣商品信息展示設(shè)計(jì)
一、　任務(wù)描述　194
二、　相關(guān)知識(shí)　195
（一）　商品參數(shù)的常用表達(dá)方式　195
（二）　對比圖的制作　195
（三）　商品信息的展示方式　195
三、　任務(wù)實(shí)施　196
（一）　商品參數(shù)模塊設(shè)計(jì)　196
（二）　實(shí)物對比參照拍攝模塊設(shè)計(jì)　197
（三）　顏色展示圖設(shè)計(jì)　197
（四）　商品全方位展示圖設(shè)計(jì)　198
四、　新手試練　199
■　任務(wù)6∣商品細(xì)節(jié)設(shè)計(jì)
一、　任務(wù)描述　200
二、　相關(guān)知識(shí)　200
三、　任務(wù)實(shí)施　201
四、　新手試練　202
■　擴(kuò)展閱讀∣如何抓住詳情頁設(shè)計(jì)的重點(diǎn)　202
■　課后練習(xí)　203
第4篇　無線店鋪裝修設(shè)計(jì)
項(xiàng)目10　無線店鋪裝修設(shè)計(jì)
■　任務(wù)1∣了解無線店鋪裝修要點(diǎn)
一、　任務(wù)描述　206
二、　相關(guān)知識(shí)　206
（一）　無線店鋪裝修的潮流趨勢　206
（二）　無線店鋪的裝修要點(diǎn)　207
三、　任務(wù)實(shí)施　207
四、　新手試練　208
■　任務(wù)2∣無線店鋪首頁裝修
一、　任務(wù)描述　209
二、　相關(guān)知識(shí)　209
（一）　無線店鋪裝修入口及后臺(tái)操作　209
（二）　認(rèn)識(shí)手機(jī)端首頁的模塊組成　210
（三）　認(rèn)識(shí)手機(jī)端首頁模塊的特點(diǎn)與裝修要點(diǎn)　210
（四）　無線店鋪首頁的裝修注意事項(xiàng)　211
三、　任務(wù)實(shí)施　211
（一）　手機(jī)端店招設(shè)計(jì)　211
（二）　手機(jī)端焦點(diǎn)圖設(shè)計(jì)　212
（三）　優(yōu)惠券的設(shè)計(jì)　213
（四）　分類導(dǎo)航的設(shè)計(jì)與裝修　215
（五）　寶貝列表圖的設(shè)計(jì)　216
四、　新手試練　217
■　任務(wù)3∣使用“淘寶神筆”模板制作詳情頁
一、　任務(wù)描述　218
二、　相關(guān)知識(shí)　218
（一）　無線店鋪詳情頁的特征　218
（二）　無線店鋪詳情頁設(shè)計(jì)的要點(diǎn)　219
三、　任務(wù)實(shí)施　219
四、　新手試練　221
■　任務(wù)4∣自定義頁面裝修
一、　任務(wù)描述　222
二、　相關(guān)知識(shí)　222
三、　任務(wù)實(shí)施　222
（一）　自定義菜單　222
（二）　自定義頁面　224
四、　新手試練　225
■　擴(kuò)展閱讀∣無線店鋪活動(dòng)頁的主要類型　225
■　課后練習(xí)　225