網(wǎng)店美工實(shí)戰(zhàn)教程第1章-網(wǎng)店美工的基礎(chǔ)知識(shí)課件

第1章網(wǎng)店美工的基礎(chǔ)知識(shí)網(wǎng)店美工實(shí)戰(zhàn)教程（全彩微課版）1.1什么是網(wǎng)店美工內(nèi)容導(dǎo)航1.2網(wǎng)店美工色彩搭配技巧1.3頁(yè)面中的文字設(shè)計(jì)1.4網(wǎng)店美工文案策劃1.5網(wǎng)店頁(yè)面的布局1.6綜合實(shí)例——淘寶網(wǎng)店的色彩與布局欣賞1.1什么是網(wǎng)店美工網(wǎng)店美工是指對(duì)平面、色彩、基調(diào)、創(chuàng)意等進(jìn)行堆砌的技術(shù)人才，是一個(gè)產(chǎn)品級(jí)的平面設(shè)計(jì)師，通過(guò)針對(duì)性的對(duì)某一個(gè)產(chǎn)品或主題進(jìn)行處理，使客戶有購(gòu)買的欲望，達(dá)到提高產(chǎn)品和店鋪銷量的效果。網(wǎng)店美工是淘寶、京東、拍拍等一系列網(wǎng)店頁(yè)面編輯美化工作者的統(tǒng)稱，需熟練掌握各種制圖軟件，如Photoshop、Coreldraw、Illustrator等，熟悉頁(yè)面布局，了解產(chǎn)品的特點(diǎn)，并準(zhǔn)確判斷目標(biāo)用戶群的需要，以設(shè)計(jì)出吸引眼球的圖片。網(wǎng)店美工不僅需要處理圖片，還需要良好的理解能力，能夠洞悉策劃方案的意圖，并在其中加入自己的創(chuàng)意。1.1.1網(wǎng)店美工的定義1.1.2網(wǎng)點(diǎn)美工的工作范疇

網(wǎng)店美工主要負(fù)責(zé)網(wǎng)店的店面裝修，以及產(chǎn)品圖片的創(chuàng)意處理。掌握店鋪特色商品的美化店鋪的裝修與設(shè)計(jì)活動(dòng)頁(yè)面的設(shè)計(jì)推廣的了解與應(yīng)用扎實(shí)的美術(shù)功底、良好的創(chuàng)造力，對(duì)美好事物有一定的鑒賞能力，圖像處理與設(shè)計(jì)能力，熟練使用Photoshop、Dreamweaver、Flash等設(shè)計(jì)軟件。通過(guò)圖片、文字、色彩搭配準(zhǔn)確地向客戶表達(dá)出產(chǎn)品的獨(dú)特性并挖掘客戶潛在需求，從運(yùn)營(yíng)、推廣、數(shù)據(jù)分析的角度思考如何提升圖片的點(diǎn)擊率和轉(zhuǎn)化率，引起賣家的購(gòu)買欲望。1.1.3網(wǎng)店美工的技術(shù)要求

網(wǎng)店裝修不只是將商品擺放到網(wǎng)頁(yè)中，而是將產(chǎn)品的賣點(diǎn)、特征，以及產(chǎn)品的使用或穿戴效果都體現(xiàn)出來(lái)。裝修的關(guān)鍵在于如何通過(guò)圖片讓賣家感受到實(shí)體店的體驗(yàn)效果。1.1.4店鋪裝修應(yīng)遵循的基本原則1234突出行業(yè)屬性產(chǎn)品分類明確色彩搭配協(xié)調(diào)簡(jiǎn)潔時(shí)尚大方

圖像的分辨率決定了位圖圖像細(xì)節(jié)的精確程度，往往是圖像的分辨率越高，成像后的尺寸就越大，對(duì)應(yīng)的圖像也就越清晰。1.圖像分辨率1.1.5網(wǎng)店美工需掌握的圖像知識(shí)PSD包含多種顏色模式，能夠自定義顏色數(shù)并加以存儲(chǔ)，還可以保存圖像的圖層、通道和路徑等信息，是目前唯一能夠支持全部圖像色彩模式的格式。一種基于LZW算法的連續(xù)色調(diào)的無(wú)損壓縮格式，其壓縮率一般在50%左右；適合以色塊或單色為主的畫(huà)面，不適合用作高顯示質(zhì)量的圖片。GIFJPEG在提供良好壓縮性能的同時(shí)，具有較好的重建質(zhì)量，被廣泛應(yīng)用于圖像、視頻處理領(lǐng)域，效果較GIF和PNG格式有明顯的優(yōu)勢(shì)。PNG替代GIF和TIFF格式。存儲(chǔ)灰度圖像時(shí)，灰度圖像的深度可多達(dá)16位；存儲(chǔ)彩色圖像時(shí)，彩色圖像的深度可多達(dá)48位，并且還可存儲(chǔ)多達(dá)16位的α通道數(shù)據(jù)。1.1.5網(wǎng)店美工需掌握的圖像知識(shí)2.文件格式1.1.6網(wǎng)店美工需注意的問(wèn)題產(chǎn)品的信息、注意事項(xiàng)、賣點(diǎn)、劣端和怎么讓劣端變成優(yōu)勢(shì)等，都是網(wǎng)店美工需要注意的問(wèn)題。風(fēng)格與形式相統(tǒng)一做好文字與圖片的前期準(zhǔn)備突出主次裝修時(shí)機(jī)的掌握思路清晰1.1什么是網(wǎng)店美工內(nèi)容導(dǎo)航1.3頁(yè)面中的文字設(shè)計(jì)1.4網(wǎng)店美工文案策劃1.5網(wǎng)店頁(yè)面的布局1.2網(wǎng)店美工色彩搭配技巧1.6綜合實(shí)例——淘寶網(wǎng)店的色彩與布局欣賞1.2網(wǎng)店美工色彩搭配技巧色彩是賣家對(duì)網(wǎng)店好壞最直接的了解，也是網(wǎng)店統(tǒng)一設(shè)計(jì)風(fēng)格的重要組成部分。一個(gè)網(wǎng)店的成功與否，在很大程度上取決于頁(yè)面色彩的運(yùn)用效果。色彩的搭配技巧包括色彩原理、色彩的分類、色彩的屬性、色彩的對(duì)比以及色彩的搭配等方面的內(nèi)容。1.2.1色彩的原理自然界中絕大部分的可見(jiàn)光譜可以用紅、綠、藍(lán)三種光按照不同比例和強(qiáng)度的混合來(lái)表示，將它們混合在一起可以搭配出各種各樣的色彩，如青、黃、洋紅。光源（G）光源（B）光源（R）白、亮灰、淺灰、亮中灰、中灰、灰、暗灰、黑灰、黑等顏色，常用于辦公用品店鋪。紅、橙、黃、綠、藍(lán)、紫等顏色，常用于服裝、鞋包、珠寶、美妝等類別的商品店鋪。（1）無(wú)彩色（2）有彩色1.2.2色彩的分類1.2.3色彩的屬性01OPTION02OPTION03OPTION不同的顏色具有不同的明度，在一個(gè)畫(huà)面中可以通過(guò)協(xié)調(diào)不同明度的顏色來(lái)表達(dá)畫(huà)面的感情，黃色明度最高，紫色明度最低，綠、紅、藍(lán)、橙的明度相近，為中間明度。明度色彩的不同是由光的波長(zhǎng)的長(zhǎng)短差別所決定的，而色相就是指這些不同波長(zhǎng)的色彩情況，各種色彩中，紅色是波長(zhǎng)最長(zhǎng)的顏色，紫色是波長(zhǎng)最短的顏色色相純度指的是色彩飽和程度，光波波長(zhǎng)越單純，色相純度越高，相反，色相的純度越低。不同的色相不但明度不等，純度也不相等。純度1.2.4色調(diào)對(duì)比色調(diào)對(duì)比主要指色彩的冷暖對(duì)比。除了色調(diào)的對(duì)比，還有明度對(duì)比、色相對(duì)比和純度對(duì)比。123123明度對(duì)比色相對(duì)比純度對(duì)比1.2.5色彩的搭配白色系，結(jié)婚、衛(wèi)生用品黑色系，相機(jī)類數(shù)碼產(chǎn)品1.2.5色彩的搭配綠色系，護(hù)理類藍(lán)色系，家具類1.2.5色彩的搭配紅色系1.1什么是網(wǎng)店美工內(nèi)容導(dǎo)航1.4網(wǎng)店美工文案策劃1.5網(wǎng)店頁(yè)面的布局1.2網(wǎng)店美工色彩搭配技巧1.3頁(yè)面中的文字設(shè)計(jì)1.6綜合實(shí)例——淘寶網(wǎng)店的色彩與布局欣賞1.3頁(yè)面中的文字設(shè)計(jì)文字是設(shè)計(jì)中不可缺少的部分，與色彩相輔相成。文字的一切變化和形式都要同店鋪?lái)?yè)面的風(fēng)格相結(jié)合，不要因一味的追求新潮，而讓買家讀不懂或是不能理解賣的是什么，那樣會(huì)減少店鋪?lái)?yè)面的宣傳力度，導(dǎo)致流量的流失。字體是為店鋪服務(wù)的，讓買家看的舒服、易懂其重要原則。1.3.1文字的分類宋體黑體書(shū)法體美術(shù)體根據(jù)風(fēng)格選擇文字字體增強(qiáng)文字的可讀性增強(qiáng)排版的美觀度1.3.2文字在網(wǎng)店中的運(yùn)用1.1什么是網(wǎng)店美工內(nèi)容導(dǎo)航1.5網(wǎng)店頁(yè)面的布局1.2網(wǎng)店美工色彩搭配技巧1.3頁(yè)面中的文字設(shè)計(jì)1.4網(wǎng)店美工文案策劃1.6綜合實(shí)例——淘寶網(wǎng)店的色彩與布局欣賞1.4網(wǎng)店美工文案策劃網(wǎng)店與實(shí)體店一樣會(huì)不定期舉行促銷活動(dòng)，如聚劃算、淘搶購(gòu)、新品上線、滿減等，這些活動(dòng)不僅需要大量的圖片來(lái)進(jìn)行展示，還需要添加必要的說(shuō)明文字和宣傳文字，以便更好地突出產(chǎn)品的特點(diǎn)，達(dá)到一目了然的目的。在一些規(guī)模較大的網(wǎng)店中，文案策劃是一個(gè)單獨(dú)的職位，而往往很多中小賣家的店鋪，網(wǎng)店美工也需要兼職文案的工作。123突出賣點(diǎn)1.4.1文案在美工中的重要性抓住買家的購(gòu)買心理增強(qiáng)品牌力度1.4.2文案的策劃受眾群體目的主體視覺(jué)表現(xiàn)1.4.3文案的前期準(zhǔn)備123從基本信息中找到賣點(diǎn)了解同行信息資料的準(zhǔn)備1.4.4文案的寫(xiě)作要點(diǎn)寫(xiě)作要點(diǎn)彰顯定位，增強(qiáng)消費(fèi)信心低價(jià)產(chǎn)品，強(qiáng)調(diào)品質(zhì)高價(jià)產(chǎn)品，強(qiáng)調(diào)價(jià)值巧妙對(duì)比，突顯專業(yè)有的放矢，減少賣家困惑154321.1什么是網(wǎng)店美工內(nèi)容導(dǎo)航1.2網(wǎng)店美工色彩搭配技巧1.3頁(yè)面中的文字設(shè)計(jì)1.4網(wǎng)店美工文案策劃1.5網(wǎng)店頁(yè)面的布局1.6綜合實(shí)例——淘寶網(wǎng)店的色彩與布局欣賞1.5網(wǎng)店頁(yè)面的布局網(wǎng)店頁(yè)面主要包括首頁(yè)和詳情頁(yè)，其中首頁(yè)是店鋪裝修中必不可少的一部分，它幾乎涵蓋了店鋪的所有信息，是店鋪商品的展示頁(yè)面，也是買家查看商品的主要途徑，其好壞直接影響店鋪的瀏覽量。詳情頁(yè)主要用于對(duì)產(chǎn)品信息進(jìn)行詳細(xì)介紹，對(duì)商品的轉(zhuǎn)化率起著至關(guān)重要的作用。1.5.1首頁(yè)布局頁(yè)頭頁(yè)中：輪播海報(bào)與分類導(dǎo)航1.5.1首頁(yè)布局頁(yè)尾：二維碼、標(biāo)語(yǔ)、返回首頁(yè)等。1.5.2詳情頁(yè)布局1.購(gòu)物區(qū)效果2.商品基本信息1.5.2詳情頁(yè)布局3.模塊區(qū)4.商品描述區(qū)1.5.2詳情頁(yè)布局1.1什么是網(wǎng)店美工內(nèi)容導(dǎo)航1.2網(wǎng)店美工色彩搭配技巧1.3頁(yè)面中的文字設(shè)計(jì)1.4網(wǎng)店美工文案策劃1.5網(wǎng)店頁(yè)面的布局1.6綜合實(shí)例——淘寶網(wǎng)店的色彩與布局欣賞通過(guò)對(duì)“三只松鼠”進(jìn)行鑒賞，學(xué)習(xí)其色彩搭配方法，然后根據(jù)布局了解店鋪的合理性，并通過(guò)對(duì)詳情頁(yè)的瀏覽掌握其吸引買家購(gòu)買的方法。1.6綜合實(shí)例——淘寶網(wǎng)店的色彩與布局鑒賞1.6綜合實(shí)例——淘寶網(wǎng)店的色彩與布局鑒賞（1）查看首頁(yè)中的頁(yè)頭、頁(yè)中和頁(yè)尾，包括查看其對(duì)應(yīng)的店招、導(dǎo)航等內(nèi)容，并對(duì)其中的文字字體進(jìn)行分析，掌握不同的字體應(yīng)用的范圍；完成后對(duì)圖片中的促銷術(shù)語(yǔ)進(jìn)行了解，從術(shù)語(yǔ)中分析“三只松鼠”的賣點(diǎn)，并通過(guò)單個(gè)物體的擺放和處理效果，掌握美化圖片的方法。（2）通過(guò)詳情頁(yè)，查看詳情頁(yè)中留住買家的方法以及產(chǎn)品的賣點(diǎn)，該賣點(diǎn)可通過(guò)詳情頁(yè)中的描述區(qū)進(jìn)行掌握，“三只松鼠”的描述區(qū)主要是通過(guò)可愛(ài)的松鼠，加上天然的產(chǎn)品和精良的制作工藝，體現(xiàn)產(chǎn)品的自然和衛(wèi)生，從而促進(jìn)購(gòu)買。1.設(shè)計(jì)思路2.知識(shí)要點(diǎn)1.6綜合實(shí)例——淘寶網(wǎng)店的色彩與布局鑒賞掌握三字松鼠搭配文字與色彩的方法，并從中得到啟示，為后期的制作做好準(zhǔn)備。掌握“三只松鼠”吸引買家購(gòu)買產(chǎn)品的方法，從本質(zhì)中找到賣點(diǎn)，從而促進(jìn)銷售。（2）首頁(yè)布局1.6綜合實(shí)例——淘寶網(wǎng)店的色彩與布局鑒賞3