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

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