《網(wǎng)店美工與視覺設(shè)計》電子教案PAGEPAGE11第1章認(rèn)識網(wǎng)店美工教學(xué)內(nèi)容一、了解網(wǎng)店美工二、網(wǎng)店美工工作準(zhǔn)備三、網(wǎng)店美工工作流程教學(xué)要求【知識目標(biāo)】1.了解網(wǎng)店美工的工作范疇；2.了解網(wǎng)店美工必備技能要求。【技能目標(biāo)】1.掌握網(wǎng)店美工所需要軟件的安裝方法；2.掌握網(wǎng)店美工需要做的準(zhǔn)備工作。教學(xué)重點掌握網(wǎng)店美工的工作流程教學(xué)難點能夠熟練地搜集素材、尋找設(shè)計參考。教學(xué)方法講授法、練習(xí)法課時數(shù)4課時教學(xué)內(nèi)容1.1了解網(wǎng)店美工1.1.1網(wǎng)店美工的工作范疇網(wǎng)店美工是隨著電子商務(wù)的發(fā)展而產(chǎn)生的一種新職業(yè)，是淘寶、天貓、京東等一系列網(wǎng)店頁面設(shè)計美化人員的統(tǒng)稱，也是網(wǎng)店運營過程中一個非常重要的崗位。網(wǎng)店美工主要工作內(nèi)容是對網(wǎng)店頁面進行設(shè)計和美化，制作商品主圖和詳情頁、設(shè)計各類活動海報、裝修與美化店鋪首頁等。1.1.2網(wǎng)店美工的技能要求首先需要具備一定的平面構(gòu)成知識，同時能夠熟練使用Photoshop、Dreamweaver、Illustrator等設(shè)計應(yīng)用軟件。其次，網(wǎng)店美工需要掌握一定的營銷知識，了解消費者心理，能夠通過圖片、文字等視覺語言，表現(xiàn)出產(chǎn)品的獨特賣點，讓消費者感知到產(chǎn)品的優(yōu)勢。從運營的角度分析和思考問題，以提升設(shè)計作品的點擊率和店鋪轉(zhuǎn)化率。1.1.3資源下載平臺1.花瓣網(wǎng)2.站酷網(wǎng)3.千圖網(wǎng)1.2網(wǎng)店美工工作準(zhǔn)備1.2.1常用工作軟件1.AdobePhotoshop2.AdobeDreamweaver3.AdobeIllustrator1.2.2常用字體安裝在選擇字體的時候一定要注意字體的版權(quán)問題，避免不必要的糾紛，本文推薦兩類免費商用字體，分別是思源字體和阿里巴巴普惠體。除了上文中推薦的兩類免費商用字體，如果需要下載更多的免費商用字體，可以通過進行下載。字體的一般安裝方法：打開電腦的C盤，選擇windows文件夾，選擇Fonts文件夾，把下載好的字體直接粘貼進來即可。1.2.3素材庫建設(shè)素材庫一般分為兩個部分：靈感文件和素材文件。靈感文件，即對優(yōu)秀設(shè)計案例、作品的收集，網(wǎng)店美工在開始自己的設(shè)計前，往往需要參考、研究這些案例，提高設(shè)計效率。素材文件，就是在設(shè)計過程中需要引用的已經(jīng)處理好的圖片、源文件、字體、特效等等。1.3網(wǎng)店美工工作流程1.3.1做好前期工作網(wǎng)店美工接到設(shè)計任務(wù)時，應(yīng)該先和店鋪的相關(guān)人員進行溝通，了解店鋪定位，熟悉店鋪與商品，為設(shè)計工作做好準(zhǔn)備。美工的前期溝通工作主要是和客戶或者運營進行溝通。1.3.2規(guī)劃素材設(shè)計中用到的素材可以通過素材網(wǎng)站來查找和收集，如前面提到的千圖網(wǎng)、昵圖網(wǎng)、花瓣網(wǎng)等。1.3.3設(shè)計并制作美工作品規(guī)劃好素材后，可以使用相關(guān)處理軟件來進行圖片的美化處理，完成網(wǎng)店中各個頁面的視覺設(shè)計。圖片的制作和美化處理主要通過Photoshop軟件來完成，視頻素材則需要利用視頻剪輯軟件Premiere進行編輯。對圖片添加熱點可以使用網(wǎng)頁編輯軟件Dreamweaver，也可以使用在線熱點編輯工具。圖片制作完成后需要上傳到圖片空間，網(wǎng)店圖片空間是在店鋪中上傳和發(fā)布照片的必要“中轉(zhuǎn)站”。歸納與提高本章主要介紹了網(wǎng)店美工入門的基礎(chǔ)知識、工作準(zhǔn)備、工作流程等，通過本章內(nèi)容的學(xué)習(xí)，讀者應(yīng)該對網(wǎng)店美工的工作職能及工作技能有基本認(rèn)識，掌握開展設(shè)計工作之前需要做的準(zhǔn)備工作，明確美工的工作流程。第2章商品圖片的處理與美化教學(xué)內(nèi)容一、商品圖片尺寸的調(diào)整二、修復(fù)圖片顏色三、商品圖片的美化與修飾四、摳圖技巧五、拍攝原圖后期綜合處理教學(xué)要求【知識目標(biāo)】1．了解商品圖片的要求；2．了解圖片修飾的必要性；3．掌握提高圖片亮度與鮮艷度的方法；4．掌握網(wǎng)店中常用的商品圖片尺寸，以及調(diào)整、裁剪、校正圖片的方法；5．掌握處理圖片污點、修復(fù)瑕疵以及虛化背景的方法；6．掌握扣取不同類型的圖片以及合成素材的方法。【技能目標(biāo)】1．能夠處理圖片污點、修復(fù)瑕疵；2．能夠?qū)ι唐穲D像進行摳圖處理；3．能夠?qū)ζ怠⑵梁推膱D片進行調(diào)色；4．能夠調(diào)整商品圖片尺寸。教學(xué)重點1．掌握調(diào)整色差的方法；2．掌握不同類型圖片的摳圖方法；3．掌握圖片的修飾與美化的方法。教學(xué)難點調(diào)整色差的方法教學(xué)方法講授法、練習(xí)法課時數(shù)6課時教學(xué)內(nèi)容2.1Photoshop軟件的基本操作2.1.1認(rèn)識Photoshop的工作界面Photoshop的基礎(chǔ)工作界面，包括了菜單欄、選項欄、工具箱、圖像編輯區(qū)域、控制面板等模塊。2.1.2調(diào)整PS的界面視圖1.切換商品圖像顯示模式在處理圖像的過程中，為了方便操作，可以通過切換圖像的顯示模式來查看圖像。選擇“視圖>屏幕模式”命令，在彈出的菜單中包括標(biāo)準(zhǔn)全屏模式、帶有菜單欄的全屏模式、全屏模式三種顯示模式。2.調(diào)整商品圖像顯示比例ctrl加“+”圖像放大顯示，ctrl加“-”，圖像縮小顯示。按住ctrl鍵同時，配合鍵盤上的數(shù)字0鍵，還原圖像原大小。要調(diào)整圖像的顯示狀態(tài)，也可在狀態(tài)欄中直接輸入顯示比例，如輸入200%，則圖像以200%的比例顯示。3.移動商品圖像顯示畫面在使用工具處理圖像的過程中，若圖像顯示比例過大，沒有顯示全部的圖像畫面時，可以使用抓手工具對圖像畫面進行移動，查看圖像的不同區(qū)域。抓手工具的快捷鍵是空格鍵，按住空格鍵時，可臨時切換為抓手工具，此時配合鼠標(biāo)移動至需要停留的圖像部分。2.1.3應(yīng)用PS的輔助工具1.顯示商品圖像標(biāo)尺使用標(biāo)尺可以在處理圖像時精確定位鼠標(biāo)指針的位置，選擇“視圖>標(biāo)尺”命令或按ctrl+R組合鍵，可以顯示或隱藏標(biāo)尺。Photoshop軟件提供多種標(biāo)尺單位，可在“編輯>首選項>單位與標(biāo)尺”命令中進行更改。2.編輯商品圖像參考線選擇“視圖>鎖定參考線、清除參考線、添加參考線”命令，可以對參考線進行相應(yīng)操作。3.設(shè)置網(wǎng)格線設(shè)置網(wǎng)格線可以幫助美工在繪制形狀等操作時準(zhǔn)確定位，選擇“視圖>顯示>網(wǎng)格”命令，可以顯示或隱藏網(wǎng)格，選擇“編輯>首選項>參考線、網(wǎng)格和切片”命令，打開“首選項”對話框，在此對話框中可對參考線和網(wǎng)格的相關(guān)參數(shù)進行設(shè)置。2.1.4圖像文件的基本操作1.新建空白圖像文件啟動軟件后，選擇“文件>新建”命令，或者使用快捷鍵ctrl+N，可以創(chuàng)建一個圖像文件，在“新建文檔”對話框可以設(shè)置圖像名稱、圖像尺寸、分辨率、顏色等，設(shè)置完后單擊“創(chuàng)建”即可創(chuàng)建圖像。2.打開商品圖像文件在編輯圖像前，需要先打開圖像文件，選擇“文件>打開”命令，或使用快捷鍵ctrl+O，在“打開”對話框選擇需要打開的文件，單擊打開按鈕即可打開指定的圖像文件。3.保存商品圖像文件編輯完圖像后，需要對其進行保存，以便于下次打開繼續(xù)操作，選擇“文件>存儲”命令，或使用快捷鍵ctrl+s，可以存儲文件。4.關(guān)閉圖像文件將圖像文件儲存后，可以將其關(guān)閉。點擊圖像窗口標(biāo)題欄上的“關(guān)閉”按鈕，或選擇“文件>關(guān)閉”命令，都可以關(guān)閉當(dāng)前的圖像文件。2.2修復(fù)圖片顏色實際拍攝中，拍攝效果會很大程度上受到光線的影響，比如陰天和晴天拍攝出的效果不同，順光和逆光拍攝出的效果也不同。一般來講，如果拍攝中光線設(shè)置不合理，會出現(xiàn)曝光過度、曝光不足和色差現(xiàn)象，這就需要對圖片的顏色進行后期的校正處理，使得圖片中的商品效果能接近真實效果。2.2.1調(diào)整存在曝光問題的圖片對于存在曝光問題的圖片，除了使用Photoshop軟件的“曝光度”命令進行調(diào)節(jié)之外，還可以通過調(diào)節(jié)“色階”、“曲線”、“亮度/對比度”等命令來處理。1.使用“色階”調(diào)整圖像2.使用“曲線”調(diào)整圖像3.使用“亮度/對比度”調(diào)整圖像2.2.調(diào)整有色差的圖片網(wǎng)絡(luò)商品圖片雖然要給予顧客美的視覺享受，但更重要的是真實反映商品詳情，避免因為色差產(chǎn)生的退貨和糾紛，下面介紹調(diào)整色差的方法。1.使用“自動顏色”調(diào)整色差2.使用“可選顏色”調(diào)整色差2.3商品圖片的摳取2.3.1規(guī)則圖形摳圖對于一些形狀比較規(guī)則的圖片，因其往往具有簡單的線條輪廓，如矩形、三角形等，非常適合使用多邊形套索工具。2.3.2扣取背景簡單的商品圖片純色背景圖像的摳圖操作最簡單，因此很多商家在拍攝完商品場景圖后，都會特意拍一些純色背景圖，以方便后期摳圖。對純色背景圖像摳圖時，一般使用“魔棒工具”，調(diào)整合適的容差值后，只需用“魔棒工具”單擊背景，即可一鍵選中背景，刪除背景或者反選，均可實現(xiàn)摳圖效果。2.3.3摳取圖形復(fù)雜的商品圖片對于商品主體形狀比較復(fù)雜、背景比較凌亂的圖像，如果主體邊緣清晰，則可使用磁性套索工具實現(xiàn)快速摳圖。若邊緣不清晰，則需要使用鋼筆工具來摳取。本例將打開“保溫杯.jpg”素材，綜合應(yīng)用磁性套索工具和鋼筆工具實現(xiàn)快速摳圖。2.4商品圖片的美化與修飾商品圖片拍攝前需要布光和布景，還需要對商品本身進行精細(xì)處理，以此保證拍攝作品的美觀性。盡管如此，圖片中依然會出現(xiàn)一些細(xì)小的瑕疵，比如污點、褶皺、污漬等情況，偶爾還會出現(xiàn)模糊的情況，這些情況可以通過Photoshop的修復(fù)類工具進行修復(fù)和美化。2.4.1修復(fù)圖像中的污點修復(fù)圖像中的污點最適合使用Photoshop中的污點修復(fù)畫筆工具，操作簡單方便，只需要用污點修復(fù)畫筆工具點擊污點處即可，軟件會自動用筆頭周圍的顏色填充污點處的顏色。2.4.2使用仿制圖章工具修復(fù)圖片仿制圖章工具可以從圖像中復(fù)制信息，將其應(yīng)用到其他區(qū)域或者其他圖像中，是圖像修復(fù)中最常用的工具之一。2.4.3使用修補工具修復(fù)圖片修補工具是使用圖片中某些特定的區(qū)域來替換需要修補的區(qū)域，它會將源區(qū)域和目標(biāo)區(qū)域的紋理、明暗等相匹配，修補工具是使用最頻繁的修復(fù)工具之一。2.4.4調(diào)整模糊的圖片商品拍攝時，如果出現(xiàn)手抖，拍攝出來的圖片會模糊。圖片被反復(fù)縮小或者放大以后，其畫質(zhì)會受到影響，若圖片細(xì)節(jié)變得模糊，可通過銳化工具進行調(diào)整，將圖像變清晰。2.5商品圖片尺寸的調(diào)整2.5.1商品拍攝原圖的裁剪商品圖片拍攝完成后，原圖尺寸并不符合店鋪裝修需求，此時需要對圖片尺寸進行調(diào)整。一般而言，拍攝的原圖四周有較多的留白，為了突出商品主體，常使用裁剪的方法修改圖像。2.5.2調(diào)整商品圖片的尺寸修改圖片尺寸時，要注意修改“畫布大小”和“圖像大小”的區(qū)別。畫布大小是指整張畫布的長和寬，是尺子能夠量到的物理尺寸，而圖像大小是指在這張畫布里有多少像素。簡單來說，畫布大小就是畫紙大小，圖像大小就是畫紙上圖的大小。改變畫布大小就是改變畫紙的大小，而改變圖像大小是改變畫紙上圖像的比例。歸納與提高本章介紹了網(wǎng)店美工修復(fù)和美化圖片的常用操作方法和技巧，主要包括圖片尺寸的調(diào)整、顏色的修復(fù)、圖片美化與修飾、不同類型商品圖片的摳圖方法。第3章電商視覺設(shè)計的基本要素教學(xué)內(nèi)容一、視覺設(shè)計中色彩的應(yīng)用二、視覺設(shè)計中文字的應(yīng)用三、視覺設(shè)計中的排版構(gòu)圖四、常用的視覺設(shè)計技巧五、視覺設(shè)計元素綜合應(yīng)用教學(xué)要求【知識目標(biāo)】1.了解必備視覺設(shè)計知識；2.掌握色彩的基本原理及應(yīng)用技巧；3.了解設(shè)計作品中的文字應(yīng)用；4.了解視覺構(gòu)圖的常用方法。【技能目標(biāo)】1.能夠根據(jù)網(wǎng)店定位和產(chǎn)品風(fēng)格，對網(wǎng)店頁面進行合理的色彩搭配；2.能夠根據(jù)設(shè)計風(fēng)格熟練的選擇合適字體；3.能夠?qū)撁孢M行布局，增強頁面的可讀性和美感。教學(xué)重點1.理解必備視覺設(shè)計知識；2.掌握不同色相的情感屬性及配色方法；3.掌握設(shè)計作品中字體的選擇與文字的排版；4.掌握常用的視覺構(gòu)圖方法。教學(xué)難點主色的選擇。對比的應(yīng)用。教學(xué)方法講授法、案例法、練習(xí)法課時數(shù)6課時教學(xué)內(nèi)容3.1設(shè)計中的色彩3.1.1色彩的基本原理1．色相色相，即色彩的相貌稱謂，能夠比較準(zhǔn)確地表示某種色彩的名稱，如紅、橙、黃、綠等。2．明度明度又稱為色彩的亮度，指色彩的明暗程度。不同色彩的明度有所不同，其中，黃色明度最高，紫色明度最低。3．飽和度飽和度也稱為純度，指色彩的鮮艷程度，光波成分約單純，飽和度越高。3.1.2認(rèn)識色調(diào)色調(diào)是指一幅作品色彩外觀的基本傾向。在明度、純度、色相這三個要素中，某種因素起主導(dǎo)作用，就稱之為某種色調(diào)。色彩分為無彩色和有彩色，色調(diào)也由無彩色和有彩色構(gòu)成。所謂無彩色，顧名思義就是沒有色相的色彩，包括黑白以及介于二者之間的灰。有彩色就是指有色相的色彩，除黑白灰以外的色彩都是有彩色。3.1.3色彩感覺設(shè)計應(yīng)用不同的色彩有著不同的寓意與作用，當(dāng)人們看到色彩時，除了會感受到其物理方面的影響，也會給人帶來不一樣的心理感受與聯(lián)想，每種色相都有其獨特的情感。紅色橙色黃色綠色藍(lán)色紫色3.1.4色彩的搭配方法1.同類色配色2.鄰近色配色3.對比色配色4.互補色配色3.1.5色彩比例控制美工作品的色彩應(yīng)用應(yīng)遵循“總體協(xié)調(diào)，局部對比”的原則，日本設(shè)計師提出了配色的黃金比例：70%主色，25%輔助色，5%點綴色。3.2設(shè)計中的文字3.2.1字體的性格特征1.黑體2.宋體3.圓體4.書法體3.2.2字體的高級使用技巧1.男性化的字體2.女性化字體3.促銷字體4.中國風(fēng)字體5.可愛字體6.文藝字體7.奢華風(fēng)字體3.2.3文字編排的基本原則1.左對齊2.右對齊3.居中對齊3.2.4文字排版設(shè)計技巧善用對比巧用形狀3.3視覺設(shè)計中的排版構(gòu)圖排版構(gòu)圖是設(shè)計師從混亂的視覺元素中找到條理性，幫助顧客在各個視覺元素之間建立聯(lián)系，從而幫助顧客在閱讀中獲取重要信息。1.有助于重要信息的傳遞2.加強視覺效果的張力3.3.1視覺構(gòu)圖的作用視覺構(gòu)圖首先有助于重要信息的傳遞，好的構(gòu)圖和色彩一樣，使表達(dá)的內(nèi)容更加突出，讓顧客快速抓住中心點。其次，合理的構(gòu)圖能加強視覺效果的張力。通過改變視覺元素的位置、大小、顏色，加強視覺的張力，增加設(shè)計的趣味性。3.3.2常見構(gòu)圖形式1.左右構(gòu)圖2.中心構(gòu)圖3.并置型構(gòu)圖4.對角線構(gòu)圖5.黃金分割構(gòu)圖歸納與提高本章節(jié)從色彩的應(yīng)用、字體的選擇、排版的技巧、空間感營造和點線面應(yīng)用等方面介紹了網(wǎng)店美工必需掌握的視覺設(shè)計元素。在色彩的應(yīng)用方面，介紹了色彩的三要素，即明度、飽和度、色相。此外，還包括色彩心理和各種常用的配色方案，以及配色的比例；在文字的應(yīng)用方面，介紹了常用字體的性格特征和字體編排的原則；在版式設(shè)計方面，介紹了頁面構(gòu)圖的作用和常用的構(gòu)圖形式。第4章店鋪Logo與主圖的視覺設(shè)計教學(xué)內(nèi)容Logo的視覺設(shè)計主圖的視覺設(shè)計專題頁面的視覺設(shè)計教學(xué)要求【知識目標(biāo)】1.了解Logo的定義、類型；2.理解Logo的設(shè)計規(guī)范；3.掌握Logo的設(shè)計思路與推銷方法；4.理解主圖的重要性；5.掌握主圖的設(shè)計規(guī)范、設(shè)計思路與方法。【技能目標(biāo)】1.能夠設(shè)計并制作出高識別度的Logo；2.能夠設(shè)計并制作各種類型產(chǎn)品主圖。教學(xué)重點1.掌握Logo的設(shè)計思路與推銷方法；2.掌握主圖的設(shè)計規(guī)范、設(shè)計思路與方法；教學(xué)難點掌握Logo的設(shè)計思路與推銷方法；教學(xué)方法講授法、案例法、練習(xí)法課時數(shù)6課時教學(xué)內(nèi)容4.1Logo的視覺設(shè)計4.1.1Logo的定義Logo是一種標(biāo)志，通過意義明確的視覺符號，將經(jīng)營理念、企業(yè)文化、經(jīng)營內(nèi)容、企業(yè)規(guī)模和產(chǎn)品特性等要素傳速給消費者。4.1.2Logo的類型1.中文型Logo2.英文型Logo3.中英文結(jié)核型Logo4.圖形型Logo5.圖文結(jié)合型Logo4.1.3Logo的設(shè)計規(guī)范1.優(yōu)秀的Logo首先需要具備創(chuàng)新性。2.優(yōu)秀的Logo應(yīng)具備思想性。3.優(yōu)秀的Logo應(yīng)具備易傳播的特性。4.優(yōu)秀的Logo應(yīng)具備美感。5.優(yōu)秀的Logo應(yīng)具備易用性4.1.4Logo的設(shè)計思路1.明確網(wǎng)店策略2.明確品類策略定位3.明確風(fēng)格定位4.明確元素5.明確字體6.明確色調(diào)設(shè)計師可以用以下幾個問題給自己的作品打打分：（1）Logo能喚起用戶什么樣的情感？（2）隱藏在Logo背后的東西是什么？（3）Logo經(jīng)得起時間的考驗嗎？（4）它獨一無二，一眼就能看出來嗎？（5）在黑白色上看起來是如何？（6）在小尺寸下也能獨特清晰嗎？4.1.5推銷Logo的技巧與方法設(shè)計完成的Logo，不能只是簡單的導(dǎo)一張圖出來，而是需要一個提案，即：推導(dǎo)+延展+呈現(xiàn)，示例如下：1.呈現(xiàn)，即Logo作品2.Logo的推導(dǎo)過程3.Logo的延展4.1.6Logo的制作Logo是店鋪裝修中必不可少的一部分，本例將為一科技類網(wǎng)店制作圖形類Logo。4.2主圖的視覺設(shè)計4.2.1主圖的類型與尺寸很多企業(yè)在多個電