網店美工基礎全套可編輯PPT幻燈片課件（共10章）網店美工視覺設計實戰教程（全彩微課版第2版）第1章目錄Contents網店美工概述網店美工必備的視覺營銷知識PhotoshopCS6基本操作1.21.11.3PhotoshopCS6摳圖實戰演練1.41.51.1.1網店美工的應用范疇3圖片的美化店鋪的裝修頁面的設計運營推廣應用范疇1.1.2網店美工的技能要求4作為一名合格的網店美工，除了能夠熟練使用Photoshop、Flash、fireworks、Dreamweaver等常用設計與制作軟件外，還需要具備扎實的美術功底和創新思維，精通網頁設計語言并有一定的文字功底。

一個好的網店美工不僅僅是懂專業知識，更是懂產品、懂營銷、懂廣告的美工，了解如何將良好的營銷思維應用到產品中，了解所制作的圖片將傳達什么信息，懂得如何去打動買家，引起買家的購買欲。目錄Contents網店美工概述網店美工必備的視覺營銷知識PhotoshopCS6基本操作1.21.11.3PhotoshopCS6摳圖實戰演練1.41.51.2.1色彩搭配61色彩的屬性與對比色彩由色相、明度以及純度3種屬性構成。色相，即各類色彩的視覺感受，如紅、黃、綠、藍等各種顏色；明度是眼睛對光源和物體表面的明暗程度的感覺，取決于光線的強弱；純度也稱飽和度，是指色彩鮮艷度與渾濁度的感受。在搭配色彩時，經常需要用到一些色彩的對比。明度對比01用色彩的明暗程度進行對比純度對比02用純度的強弱形成對比色相對比03用色相之間的差別形成對比冷暖色對比04從顏色給人帶來的感官刺激形成對比色彩面積對比05色彩占面積的不同，呈現的對比效果不同1.2.1色彩搭配72主色、輔助色與點綴色網店美工在搭配店鋪的頁面色彩時，并不是隨心所欲的，而是需要遵循一定的比例與程序。網店裝修配色的黃金比例為“70:25:5”，其中，主色色域應該占總版面的70%，輔助顏色所占比例為25%，而其他點綴性的顏色所占比例為5%。02主色：主色調是頁面中占用面積最大，也是最受矚目的色彩，它決定了整個店鋪的風格，主色調不宜過多，一般控制在1~3種顏色，過多容易造成視覺疲勞。主色調不是隨意選擇的，而是系統性分析自己品牌受眾人群的心理特征，找到群體中易于接受的色彩。輔助色：輔助色是指占用面積略小于主色，用于烘托主色的顏色。合理應用輔助色能豐富頁面的色彩，使頁面顯示更加完整、美觀。點綴色：點綴色是指頁面中面積小、色彩比較醒目的一種或多種顏色。合理應用點綴色，可以起到畫龍點睛的作用，使頁面主次更加分明、富有變化。01031.2.2圖形元素的應用8點是可見的最小的形式單元，具有凝聚視覺的作用，可以使畫面布局顯得合理舒適、靈動且富有沖擊力。點線在視覺形態中可以表現長度、寬度、位置、方向性和性格，具有剛柔共濟、優美和簡潔的特點，經常用于渲染畫面，引導、串聯或分割畫面元素。線點的放大即為面，線的分割產生各種比例的空間也稱為面。在版面中面具有組合信息、分割畫面、平衡和豐富空間層次，烘托與深化主題的作用。面1.2.3文字的應用91字體的性格特征黑體黑體筆畫粗細一致，粗壯有力、突出醒目，具有強調的視覺感，宣傳性強，常用于促銷廣告、導航條，或車、剃須刀、重金屬、搖滾、競技游戲、足球等男性消費者占主導地位的產品圖的設計。美術體具有明顯的藝術特征。或是將文本的筆畫涂抹變形，或用花瓣、樹枝等拼湊成各種圖形化的字體，其裝飾作用強力，主要用于海報的設計。宋體宋體是店鋪應用最廣泛的字體，其筆畫的起點與結束點有額外的裝飾、橫細豎粗，其外形端莊秀美、具有濃厚的文藝氣息，適合用于標題設計。而方正大標宋不僅具有宋體的秀美，還具備黑體的醒目性，因此經常被用于女性產品的設計。書法體書法體包括楷體、葉根友毛筆行書、篆書體、隸書體、行書體和燕書體等，書法體具有古樸秀美、歷史悠久的特征，常用于古玉、茶葉、筆墨、書籍等古典氣息濃厚的店鋪中。1.2.3文字的應用102字體的布局技巧020103排版網店廣告文案時，選擇2~3種匹配度高的字體是最佳的視覺效果。字體的選用與變化文字的字體、粗細、大小與顏色在搭配組合上讓買家有一種關聯的感覺。文字的統一按重要程度設置文本的顯示級別。在進行編排時，可利用字體、粗細、大小與顏色的對比來設計文本的顯示級別。文字的層次布局目錄Contents網店美工概述網店美工必備的視覺營銷知識PhotoshopCS6基本操作1.21.11.3PhotoshopCS6摳圖實戰演練1.41.51.3.1設置前景色與背景色12前景色是插入、繪制圖形的顏色，背景色是需要處理的圖片底色，默認為白色。用戶可以根據需要設置前景色與背景色，下面對前景色與背景色常見的操作進行介紹。設置前景色與背景色的顏色：當需要設置前景色與背景色時，單擊工具箱底部前景色與背景色對應的色塊可打開顏色設置對話框，在其中可選擇需要的顏色。恢復默認前景色與背景色：單擊按鈕可恢復默認的前景色與背景色。切換前景色與背景色：單擊按鈕，可在前景色與背景色之間切換。選區填充：創建選區后，按【Ctrl+Delete】組合鍵可以用背景色填充當前圖形，按【Alt+Delete】組合鍵可以用前景色填充當前圖形。1.3.2圖層的基本操作13選擇【窗口】/【圖層】命令即可打開“圖層”面板。拖動圖層到其他位置可移動圖層的堆疊順序；使用移動工具拖動圖層中的圖像可移動圖像在畫布中的位置。1.3.2圖層的基本操作14此外，常用的圖層操作還包括以下幾種。復制圖層：按【Ctrl+J】組合鍵可在該圖層上方得到復制的新圖層，拖動圖層至“創建新圖層”按鈕上，釋放鼠標后也可復制該圖層。 合并圖層：選擇兩個或兩個以上要合并的圖層，選擇【圖層】/【合并圖層】命令或按【Ctrl+E】組合鍵可將多個圖層合并為一個圖層。選擇【圖層】/【合并可見圖層】命令，或按【Shift+Ctrl+E】組合鍵將合并可見的圖層，其中隱藏的圖層不合并。蓋印圖層：若要將多個圖層的內容合并到一個新的圖層中，同時保留原來的圖層不變，可執行蓋印圖層操作。選擇多個圖層，按【Ctrl+Alt+E】組合鍵，可將選擇的圖層蓋印到一個新的圖層中。利用圖層組管理圖層：當圖層較多時，網店美工可使用圖層組對圖層進行分類管理，方便后期查找與修改。選擇需要移動到一個圖層組的圖層，按【Ctrl+G】組合鍵即可將選中的圖層移動到圖層組中，雙擊圖層組名稱或圖層名稱可重命名圖層組或圖層；也可單擊“創建新組”按鈕新建圖層組，然后將圖層拖動到該圖層組中。1.3.3裁剪并更改圖片尺寸15網店的不同模塊對圖片尺寸的要求不同，并且商家拍攝的商品圖片可能會因為一些其他原因導致圖片尺寸太大而不符合實際需要，因此當圖片尺寸過大時，就需要對圖片進行裁剪。下面我們以裁剪淘寶主圖背景（800像素×800像素）為例，講解裁剪并更改圖片尺寸的方法，其具體操作步驟如下。打開圖像文件12裁剪圖片1.3.3裁剪并更改圖片尺寸16

網店的不同模塊對圖片尺寸的要求不同，并且商家拍攝的商品圖片可能會因為一些其他原因導致圖片尺寸太大而不符合實際需要，因此當圖片尺寸過大時，就需要對圖片進行裁剪。下面我們以裁剪淘寶主圖背景（800像素×800像素）為例，講解裁剪并更改圖片尺寸的方法，其具體操作步驟如下。調整圖像尺寸查看圖像效果431.3.4批處理圖片17在Photoshop中，批處理圖片是指為圖片的處理創建動作，然后利用批處理命令自動完成其他圖片的相同處理，常用于修改圖片大小、調色、添加邊框或標簽等。在日常網店裝修或網頁圖文編輯時，常常會遇到圖片素材大小不一的情況，為了節約相同大小圖片的調整時間，可用批處理命令對圖片的大小進行統一的修改設置，其具體操作如下。打開圖像文件12新建動作1.3.4批處理圖片18更改圖像高度3設置批處理45查看創建的動作目錄Contents網店美工概述網店美工必備的視覺營銷知識PhotoshopCS6基本操作1.21.11.3PhotoshopCS6摳圖實戰演練1.41.51.4.1規則圖形摳圖20使用多邊形套索工具繪制選區12新建白色背景圖片網店美工在摳取一些規則的矩形和圓形商品時，可通過對應的選擇工具快速創建選區進行摳圖，如矩形選框工具、橢圓選框工具；對于邊緣為直線的規則商品，可選擇多邊形套索工具進行快速摳圖。下面利用多邊形套索工具和橢圓選框工具摳取圖中的面膜，并為其更換背景，其具體操作步驟如下。1.4.1規則圖形摳圖21使用移動工具移動選區內的圖像3調整圖像大小和移動圖像位置4完成摳圖制作1.4.1規則圖形摳圖22創建橢圓選區制作撕口561.4.2簡單背景摳圖23設置快速選擇工具參數12快速創建選區網店美工在摳取簡單的商品或背景時，可使用魔棒工具、快速選擇工具單擊需要選擇的部分區域快速選擇需要的選區。下面利用魔棒工具和快速選擇工具，并配合套索工具對箱包進行摳圖，為其更換背景，其具體操作如下。使用多邊形套索工具減選選區31.4.2簡單背景摳圖24使用套索工具、魔棒工具加減選選區45羽化選區1.4.2簡單背景摳圖25添加背景并縮小圖片67使用“曲線”命令調整圖片1.4.2簡單背景摳圖26繪制陰影89查看摳圖效果1.4.3復雜圖像摳圖2712繪制路徑當遇到商品的輪廓比較復雜，背景也比較雜亂，或背景與商品的分界不明顯的商品圖像時，使用上述的摳圖方法都很難得到精準的摳圖效果，此時網店美工可使用路徑摳圖工具。而鋼筆工具則是網店美工常用的一種路徑摳圖工具，在摳圖時先使用鋼筆工具描邊商品的輪廓，再將路徑轉化為選區，可以使摳取的商品更加精準。下面使用鋼筆工具摳取圖像中的商品，具體操作步驟如下。編輯路徑1.4.3復雜圖像摳圖28將路徑轉化為選區并羽化選區34添加背景1.4.3復雜圖像摳圖29最終效果56添加投影1.4.4毛發摳圖3012創建選區

對于頭發或毛絨類物品來說，采用一般的摳圖方法很難達到理想的效果，且非常浪費時間，此時大家可利用Photoshop中的調整邊緣功能進行摳取。下面將摳取一只寵物狗圖片，其具體操作步驟如下。完成封閉路徑的繪制1.4.4毛發摳圖31設置調整邊緣的參數3手動調整邊緣431.4.4毛發摳圖32移動圖像后的效果查看調整邊緣的摳圖效果651.4.5半透明物體摳圖33創建選區網店美工在圖片中摳取一些特殊的商品時，如水杯、酒杯、婚紗、冰塊、礦泉水等，使用一般的摳圖工具得不到想要的透明效果，此時可結合使用鋼筆工具、圖層蒙版和通道等進行摳圖。下面以摳取婚紗為例，講解半透明物體的摳圖方法，讀者可借鑒該方法進行其他半透明物體的摳圖，其具體操作步驟如下。新建通道存儲路徑1321.4.5半透明物體摳圖34復制“綠”通道填充背景選區451.4.5半透明物體摳圖35再次計算通道計算通道并查看計算結果671.4.5半透明物體摳圖36最終效果10更換背景89目錄Contents網店美工概述網店美工必備的視覺營銷知識PhotoshopCS6基本操作1.21.11.3PhotoshopCS6摳圖實戰演練1.41.51.5.1為沙發更換背景381.設計思路123首先為沙發創建選區，摳取沙發圖像。然后將摳取的沙發圖像移動到背景中，調整沙發的大小與位置。根據沙發的光影關系，在背景圖上制作投影，使沙發與背景融合得更加真實。1.5.1為沙發更換背景39按【Shift+F6】組合鍵羽化選區使用“快速選擇工具”創建選區，按【Shift】鍵加選選區設置前景色，使用“畫筆工具”添加投影2.知識要點▲▲▲▲▲▲1.5.1為沙發更換背景40

3.操作步驟下面進行沙發的更換背景處理，其具體操作如下。創建選區12設置“羽化選區”參數復制選區31.5.1為沙發更換背景41拖動圖片到背景中4最終效果51.5.2為榨汁機更換背景42Designideas12將榨汁機從白色背景中摳取出來。為其更換水果背景，添加投影，使其與背景更好地融合在一起。1.設計思路1.5.2為原汁機更換背景43商家在拍攝商品圖片時，往往會選擇非常簡單的背景，但這樣拍出的圖片難免單調，因此網店美工需要更換商品背景，以突出商品賣點。本例中為了表現出榨汁機的特色，為其添加帶有水果、綠葉和文本說明的清新背景，增加了整個畫面的活力。1.設計思路榨汁機是一種與水果密切相關的電器，需要選擇清新的、帶有新鮮水果的背景，因此本例將為榨汁機添加帶有綠葉的水果背景，其設計思路具體如下。（1）將榨汁機從白色背景中摳取出來。（2）為其更換水果背景，添加投影，使其與背景更好地融合在一起。2.知識要點完成本例換背景的制作，需要掌握以下知識。（1）選擇“魔棒工具”，在屬性欄中設置容差值，為背景創建選區，通過反選為圖像創建選區。（2）選擇【窗口】/【路徑】命令，利用“路徑”面板將選區生成路徑。（3）選擇“鋼筆工具”，按【Ctrl】鍵不放單擊選擇路徑，對路徑進行錨點的添加、移動、刪除等操作。（4）雙擊圖層，打開“圖層樣式”對話框，在其中根據需要設置投影參數，并復制圖層樣式。（2）按住【Ctrl+J】組合鍵，復制榨汁機選區。（4）雙擊圖層，打開“圖層樣式”對話框，在其中根據需要設置投影參數，并復制圖層樣式。（3）選擇“鋼筆工具”，按住【Ctrl】鍵不放單擊選擇路徑，對選擇路徑進行錨點的添加、移動、刪除。（1）選擇“魔棒工具”，在屬性欄中設置容差值，為背景創建選區，通過反選為圖像創建選區。2.知識要點1.5.2為原汁機更換背景44

3.操作步驟下面為榨汁機更換背景，其具體操作如下。創建選區1創建路徑編輯路徑321.5.2為原汁機更換背景45刪除多余背景4添加背景51.5.2為原汁機更換背景46最終效果添加投影67謝謝觀看網店美工視覺設計實戰教程（全彩微課版第2版）第1章網店美工視覺設計實戰教程（全彩微課版第2版）第1章圖片調色人民郵電出版社網店美工視覺設計實戰教程（全彩微課版第2版）第2章目錄Contents了解圖片調色處理曝光不足或曝光過度的圖片2.22.1圖片調色2.3實戰演練2.42.1.1圖片調色的原則500102030405遵循感情色彩調色整體色調自然圖像偏色的調整抓住調色的重點色色彩的分割為了使圖片滿足店鋪頁面的設計需要，網店美工在進行圖片調色時需要掌握一定的調色原則。下面我們將對圖片調色的原則進行介紹。2.1.2使用調整圖層調色51調整圖層具有較強的靈活性，可以隨時刪除、修改、隱藏或顯示每一步調整效果，并且并不會對原圖像造成破壞。以下為使用調整圖層的常見操作方法。新建調整圖層：在“圖層”面板底部單擊“創建新的填充或調整圖層”按鈕，在彈出的列表中選擇調整命令，或執行【圖層】/【新建調整圖層】命令，在彈出的子菜單中選擇相應的命令，都可以新建調整圖層。將調整應用于多個圖層：調整圖層將應用于它下面的所有圖層，因此我們并不需要對每一個圖層進行調整，移動調整圖層的位置就可改變調整圖層的影響圖層。2.1.2使用調整圖層調色52控制調整范圍與調整強度：創建選區和蒙版可以控制調整使用不同灰度的畫筆在調整圖層上涂抹，可控制調整圖層的調整強度。其中越靠近白色，調整強度越大；越靠近黑色，調整強度越弱；白色為應用調整，黑色為不應用調整。可設置調整圖層的不透明度與混合模式：選擇調整圖層，在“圖層”面板中設置調整圖層的不透明度與混合模式，可獲得特殊的調整效果。編輯調整圖層：雙擊“圖層”面板中調整圖層的第一張縮略圖，可打開“調整”屬性面板，網店美工可在此修改調整效果。刪除調整圖層：選擇調整圖層，單擊“圖層”面板底部的“刪除圖層”按鈕，即可刪除調整圖層，同時刪除該調整圖層上的效果。隱藏或顯示調整圖層：單擊調整圖層前的指示圖層可見性圖標，可隱藏和顯示調整圖層效果。目錄Contents了解圖片調色處理曝光不足或曝光過度的圖片2.22.1圖片調色2.3實戰演練2.42.2.1提高亮度與對比度54提高亮度/對比度12完成調整后的效果提高亮度是指提高圖片整體的亮度，這種方式可以使圖片的暗部細節更好地展現出來。提高對比度是指提高一張圖片明暗區域中最亮的白色和最暗的黑色之間的差異程度，明暗區域的差異程度越大，圖片對比度越高；反之，明暗區域的差異程度越小，圖片的對比度就越低。下面將調整一幅圖片的亮度與對比度，以提高圖片品質，其具體操作步驟如下。2.2.2調整高光、陰影與中間調551調整色階調整色階色階調整效果“色階”命令可以精確地調整圖片的中間色與對比度，利用“色階”命令調整對比度的方法是將左邊的黑色滑塊向右移動確定直方圖開始的位置，將右邊的白色滑塊向左移動確定直方圖結束的位置。利用“色階”命令調整圖片的曝光度的具體操作步驟如下。122.2.2調整高光、陰影與中間調56增加曝光度曝光度調整效果322.2.2調整高光、陰影與中間調572使用曲線調整反S型曲線S型曲線

通過“曲線”命令可對圖片色彩、亮度和對比度進行調整。網店美工可選擇【圖層】/【新建調整圖層】/【曲線】命令，在打開的“屬性”面板中通過拖動RGB通道的曲線快速完成調整。調整過程中可單擊曲線添加控制點，拖動控制點可控制曲線的弧度。（1）不同曲線調整對于對比度/亮度的效果2.2.2調整高光、陰影與中間調58曲線向上曲線向下調整暗部2.2.2調整高光、陰影與中間調59

（2）使用高光、陰影與中間調吸管調整1在調整色階或調整曲線時，調整對話框中都會出現高光、陰影與中間調吸管，單擊吸管后，可直接在圖像中吸取高光、中間調和陰影像素，然后根據吸取的像素自動調整圖像的亮度與對比度。下面用“曲線”命令中的高光、陰影與中間調吸管調整圖片，其具體操作如下。2調整圖像中間調2.2.2調整高光、陰影與中間調6034調整圖像高光調整后效果2.2.2調整高光、陰影與中間調613使用“陰影/高光”命令調整復制圖層3通過圖像中的陰影或高光的像素色調增亮或變暗來修復圖像中過亮或過暗的區域，從而使圖像盡量顯示更多的細節。下面使用“陰影/高光”命令調整圖片，其具體操作如下。12調整“陰影/高光”圖像調整效果目錄Contents了解圖片調色處理曝光不足或曝光過度的圖片2.22.1圖片調色2.3實戰演練2.42.3.1圖片偏色矯正631使用“色相/飽和度”命令矯正單個顏色調整可選顏色“紅色”和“綠色”1使用“色相/飽和度”命令可以調整圖像全圖或單個顏色的色相、飽和度和明度，常用于處理圖像中不協調的單個顏色。下面通過“色相/飽和度”命令調整圖片，使草莓顏色恢復正常，其具體操作步驟如下。2單色調整效果2.3.1圖片偏色矯正642使用“色彩平衡”命令矯正圖像顏色“色彩平衡”命令色彩平衡命令可以更改圖像的總體顏色的混合程度，常用于普通的色彩矯正。下面通過“色彩平衡”命令調整圖像的顏色，其具體操作如下。調整中間調調整陰影212.3.1圖片偏色矯正65調整高光查看調整效果3412.3.1圖片偏色矯正663使用“匹配顏色”命令校正偏色匹配顏色2查看調整效果網店美工在處理偏色嚴重的圖片時可以使用“匹配顏色”命令，快速校正圖片的偏色，下面通過“匹配顏色”命令校正偏黃的圖片，其具體操作如下。2.3.2圖片特殊顏色調整671使用“可選顏色”命令更改單個顏色調整效果12設置背景濃度“可選顏色”命令可以對圖像中的顏色進行針對性的修改，而不影響圖像中的其他顏色。它主要是針對印刷油墨的含量來進行控制的，包括青色、洋紅、黃色和黑色。下面將圖像中的黃色背景加深，其具體操作如下。2.3.2圖片特殊顏色調整682使用“替換顏色”命令替換顏色

完成顏色替換使用“替換顏色”命令可以將圖像中選擇的顏色用其他顏色替換。并且可以對選中顏色的色相、飽和度和亮度進行調整。下面將通過“替換顏色”命令將圖片中的紅色替換為橘黃色，其具體操作如下。創建并擴展選區設置替換顏色1232.3.2圖片特殊顏色調整693使用曲線快速調色

使用“曲線”命令可以快速為圖像添加特殊的色調。下面將通過“曲線”命令的“藍色”通道為圖像添加夢幻藍光效果，其具體操作如下。完成調色調整亮度與對比度213添加藍色調目錄Contents了解圖片調色處理曝光不足或曝光過度的圖片2.22.1圖片調色2.3實戰演練2.42.4.1童裝調色71

1.設計思路針對本例處理的服裝圖片，可以從以下幾個方面闡述其處理方法。首先將圖片中的童裝摳取出來，以方便調整童裝色彩。摳取的童裝整體顏色明顯偏暗，因此需要通過“色階”命令提高童裝的亮度。調整亮度后，圖片中的色彩飽和度依然不夠，色彩暗沉，選“色相/飽和度”命令提高童裝的色彩鮮艷度。通過“曲線”命令，提高童裝整體的亮度，并運用蒙版工具保留褶皺與縫紉線的暗部部分。添加童裝背景，美化童裝圖片，使其更加富有童趣。2.4.1童裝調色72

使用“魔棒工具”創建選區，并刪除背景部分。01在“圖層”面板底部單擊“創建新的填充或調整圖層”按鈕，再在彈出的列表中選擇調整命令，或選擇【圖層】/【新建調整圖層】命令，新建調整圖層。02使用蒙版和“畫筆工具”，控制色彩調整的范圍。03選擇“替換顏色”

“色階”“可選顏色”“曲線”命令，調整圖片顏色。042.知識要點2.4.1童裝調色73新建白色背景圖像

3.操作步驟下面為對童裝圖片進行處理的方法，其具體操作步驟如下。創建選區122.4.1童裝調色74調整色階移動圖像到白色背景中342.4.1童裝調色75提高亮度并降低圖片的對比度調整色相/飽和度562.4.1童裝調色76完成后效果提高對比度892.4.2打造街拍圖片風格77

1.設計思路使用“色彩平衡”命令選擇中間調調整，可以快速將圖片調整為暖色系的圖片。使用“可選顏色”命令來調整局部顏色，增加補光。使用“色彩平衡”命令選擇高光調整，添加紅色與藍色，對圖片中人物的皮膚與衣服的顏色進行渲染。2.4.2打造街拍圖片風格782.知識要點選擇【圖層】/【新建調整圖層】/【色彩平衡】命令，設置“色

彩平衡”參數。選擇【圖層】/【新建調整圖層】/【可選顏色】命令，設置“可選顏色”參數。2.4.2打造街拍圖片風格79為黃色添加洋紅色補光

3.操作步驟下面為暖色系圖片的制作方法，其具體操作步驟如下。增加黃色122.4.2打造街拍圖片風格80完成效果為綠色添加洋紅色的補光53謝謝觀看人民郵電出版社網店美工視覺設計實戰教程（全彩微課版）第2章網店美工視覺設計實戰教程（全彩微課版第2版）第2章海量圖書方便查詢免費申請樣書下載配套資源優惠購書成為作者更多樣書申請和資源下載需求，請登錄人郵教育社區（)囊括各大品類，您想要的應有盡有教師免費申請樣書，我們將安排快遞迅速送達教學視頻、PPT課件、教學案例、習題答案、模擬試卷等豐富資源免費下載教師可以申請最低折扣學生直接優惠購買圖書歡迎寫文章／投稿，我們強大的編輯團隊將為您提供專業和高效的編輯出版服務圖片修飾人民郵電出版社網店美工視覺設計實戰教程（全彩微課版第2版）第3章目錄Contents修飾圖片豐富圖片內容3.23.1添加圖片特效3.3實戰演練3.43.1.1清除圖片上的污跡

除了由于天氣、燈光、技術等原因造成圖片的視覺效果不好之外，商品本身的污漬或者拍攝環境也會導致圖片不夠美觀，此時網店美工可利用內容識別填充功能和內容感知移動工具來快速對圖片進行處理，其具體操作步驟如下。85內容識別填充創建選區123.1.1清除商品上的污跡86最終效果污跡被清除后的效果343.1.2去除背景中多余的物品87

網店美工在處理背景較復雜的圖片時，若需要去除背景中多余的物品，采用前面的方法可能并不能達到理想的效果，此時可結合仿制圖章工具進行修復。下面將講解去除便攜榨汁機圖片背景中的手指的操作，其具體操作步驟如下。去除便攜榨汁機下方的手去除便攜榨汁機外面的手123.1.2去除背景中多余的物品88去除按鈕上的手指恢復便攜榨汁機的高光部分343.1.3美化模特89現在網店中很多商品的展示都是運用人物的直接展現，尤其是服裝類商品，這樣可以讓消費者更直觀地看到服裝的試穿效果。而網店模特的身材或多或少地存在一定的瑕疵，所以網店美工應掌握美化模特的方法來解決這類問題。下面通過液化工具為模特打造纖細身姿，突出商品美感，其具體操作步驟如下。瘦手臂收腰123.1.4光滑材質表面90

網店美工在處理一些表面粗糙且有很多雜質的圖片時，可以利用PhotoshopCS6的涂抹工具，使商品的表面顯得更加光滑。下面介紹利用涂抹工具為蜜蠟圖片打造光滑表面，以及利用污點修復畫筆工具處理圖片表面雜質的方法，其具體操作步驟如下。最終效果涂抹蜜蠟12去除污點33.1.5加強亮部與暗部的對比91PhotoshopCS6中的加深和減淡工具也是網店美工在修飾圖片時使用非常頻繁的工具，尤其是對圖片的顏色進行一些明暗的局部對比度調整時，就經常會用到加深和減淡工具。下面通過加深和減淡工具對吉他圖片中的部分區域進行加深與減淡處理，使畫面對比更加鮮明，其具體操作步驟如下。局部減淡圖片后的效果局部加深圖像12調整曲線33.1.6增加金屬質感92

商家在拍攝具有金屬質感的商品過程中，由于反光很強烈，體現不出商品的質感。此時，就需要網店美工利用Photoshop來為圖片打造出金屬質感效果，如利用漸變填充或圖層樣式可以為圖片打造出金屬質感效果；而利用“雜色”命令，則可以為圖片添加磨砂質感效果。下面通過漸變填充與“雜色”命令，制作有金屬磨砂質感的瓶蓋，其具體操作步驟如下。設置漸變填充色添加白色背景12為瓶子創建選區33.1.6增加金屬質感93徑向漸變填充45線性漸變填充3.1.6增加金屬質感94添加雜色67創建新圖層3.1.6增加金屬質感95最終效果89設置圖層混合模式3.1.7提高圖片清晰度9612商家在拍攝照片時，有時會出現一些鏡頭的問題，使拍攝出來的照片模糊，展現不出商品的質感。如以下毛巾圖片，體現不出柔軟的商品特征，接下來我們將利用USM銳化和高反差保留濾鏡對圖片進行清晰度處理，其具體操作步驟如下。設置“USM銳化”參數創建選區3.1.7提高圖片清晰度9734設置圖層混合模式設置“高反差保留”參數3.1.7提高圖片清晰度98清晰化處理后的圖片效果調整色階56目錄Contents修飾商品圖片豐富圖片內容3.23.1添加圖片特效3.3實戰演練3.4調整文本大小輸入文本3.2.1添加與美化圖片文本10012

網店美工可以使用Photoshop中的文字工具為圖片添加文本。添加文本后，網店美工還可以根據需要設置文本的字體、字號、顏色、加粗與傾斜等效果。此外，還可通過編輯文字路徑對文本進行造型設計，也可根據需要將圖案裁剪到文本中。下面制作開業廣告中的介紹文本，其具體操作步驟如下。3.2.1添加與美化圖片文本101設置文本顏色搭配文本字體34設置描邊后的效果添加描邊3.2.1添加與美化圖片文本10256使用鋼筆工具編輯文本形狀3.2.1添加與美化圖片文本1037繪制圓角矩形3.2.1添加與美化圖片文本1048最終效果3.2.1添加與美化圖片文本10593.2.2添加形狀與圖案106網店美工在修飾圖片過程中，除了修飾圖片本身的瑕疵外，也會經常使用一些形狀工具繪制各種形狀和圖案來豐富圖片內容，這些素材可以在素材網上下載，也可自行繪制。下面我們將介紹幾種不同的繪制形狀和圖案的方法。01OPTION通過形狀組繪制形狀與圖案：選擇形狀工具組中的工具可以繪制一些特定的形狀，如橢圓形、圓角矩形、多邊形等，選擇自定形狀工具，可繪制動物形狀、水滴、剪刀等形狀。3.2.2添加形狀與圖案107通過鋼筆工具繪制形狀與圖案：選擇“鋼筆工具”，并在工具屬性欄中設置工具模式為“形狀”，設置填充色與輪廓色，然后單擊鼠標不放并拖動鼠標就可以繪制出輪廓清晰的形狀與圖案了。02OPTION3.2.2添加形狀與圖案108使用畫筆工具繪制圖案：Photoshop中的畫筆工具自帶多種樣式的筆刷，大家可在選擇筆刷后繪制想要的圖案，也可以根據需要載入水珠、雪花、火焰、墨點等筆刷。其方法是：在工具屬性欄中打開“畫筆預設”選取器，單擊右上角的“設置”按鈕，在彈出的列表中可添加其他畫筆筆刷，選擇“載入畫筆”選項可載入計算機中的筆刷，下圖為載入“煙霧”筆刷并使用其繪制的圖案。03OPTION3.2.2添加形狀與圖案109應用下載的圖案：除了Photoshop中默認的畫筆筆刷外，大家還可以在素材網上下載psd格式或png格式的素材，然后打開素材并將其拖動到圖片中，調整其大小與位置即可。下圖為將下載的化妝品元素與水花元素合成在一起的效果。04OPTION目錄Contents修飾商品圖片豐富圖片內容3.23.1添加圖片特效3.3實戰演練3.4虛化背景效果為背景創建選區3.3.1虛化背景11112對于一些主體物和背景無法區分，層次不明的圖片就需要將圖片的主體物表現出來，虛化背景是網店美工常用的修飾方法，這種方法可以使焦點聚集在主體物上，營造主體物與背景間的一種前實后虛的效果，以避免背景喧賓奪主，影響主體物。下面介紹背景的虛化處理方法，其具體操作步驟如下。3設置羽化半徑設置鏡頭模糊3.3.1虛化背景1123虛化背景的效果4添加鼠標添加內發光3.3.2添加發光效果11321不同的商品有不同的特性，網店美工需要根據商品特性來修飾商品圖片，如網店美工在修飾鼠標、汽車、電腦等科技類圖片時，就需要添加發光的效果來突出商品主體。我們可以通過Photoshop中的“圖層樣式”對話框中的“內發光”和“外發光”命令來添加發光效果。下面為商品圖片添加發光效果，其具體操作步驟如下。添加外發光外發光效果3.3.2添加發光效果11434繪制高光區域拆分摳圖3.3.3添加高光與投影效果115商家在拍攝金屬、玻璃類商品時，可能會由于光線的原因，造成圖片灰暗、沒有高光效果，立體感不強。此時，網店美工就可以使用Photoshop中的各種工具來制作圖片的高光效果，讓商品的展現效果更加吸引消費者的注意力。下面我們將以為紅酒瓶添加高光為例進行講解，其具體操作步驟如下。21設置漸變色制作瓶身高光3.3.3添加高光與陰影效果116343.3.3添加高光與陰影效果117柔化高光最終效果87為瓶蓋添加高光調整自然飽和度56目錄Contents修飾商品圖片豐富圖片內容3.23.1添加圖片特效3.3實戰演練3.43.4.1修飾可愛空氣加濕器119

1.設計思路12345最后添加背景，突顯家用榨汁機圖片，使其符合店鋪圖片的要求。通過調整亮度/對比度，提高家用榨汁機圖片的亮度和對比度，然后再通過調整色相/飽和度讓家用榨汁機圖片的顏色更加鮮亮。為了突出家用榨汁機圖片的金屬部分，首先為家用榨汁機圖片的外殼添加深紫色的漸變，并通過加深、減淡等方式，讓效果更加明顯；繼續運用漸變工具制作家用榨汁機圖片的頂部部分，以及運用鋼筆工具制作部分高光。分析家用榨汁機圖片需要處理的部分：家用榨汁機圖片顏色非常暗沉、不鮮亮，整體效果顯得很臟。首先摳取家用榨汁機，再創建白色圖層，以去除陰影部分，方便后期處理。3.4.1修飾可愛空氣加濕器120123選擇“漸變工具”，設置漸變顏色并創建漸變。選擇“加深工具”和“減淡工具”，設置涂抹的范圍與曝光度，加深與減淡圖片。使用“高斯模糊”濾鏡，使形狀模糊。

2.知識要點創建機身漸變填充3.4.1修飾可愛空氣加濕器121摳取家用榨汁機并新建白色圖層12

3.操作步驟下面對家用榨汁機圖片進行修飾，其具體操作步驟如下。調整曲線3.4.1修飾可愛空氣加濕器122繪制高光的效果加深與提亮圖片3543.4.1修飾可愛空氣加濕器123最終效果63.4.2修飾羽絨服124

1.設計思路首先使用修補工具處理褶皺。整體提高羽絨服的亮度與對比度，然后使用涂抹工具光滑材質。結合“高反差保留”命令與圖層混合模式增加羽絨服的清晰度。3.4.2修飾羽絨服125

2.知識要點選擇【濾鏡】/【其他】/【高反差保留】命令，設置濾鏡強度應用濾鏡，設置圖層混合模式，通過圖層疊加提高圖像的清晰度。使用“修補工具”

和“涂抹工具”來修飾圖像。調整色階3.4.2修飾羽絨服126光滑材質2

3.操作步驟下面對羽絨服圖片進行修飾處理，其具體操作如下。去除褶皺231最終效果3.4.2修飾羽絨服127設置混合模式設置“高反差保留”參數465謝謝觀看人民郵電出版社網店美工視覺設計實戰教程（全彩微課版）第3章網店美工視覺設計實戰教程（全彩微課版第2版）第3章海量圖書方便查詢免費申請樣書下載配套資源優惠購書成為作者更多樣書申請和資源下載需求，請登錄人郵教育社區（)囊括各大品類，您想要的應有盡有教師免費申請樣書，我們將安排快遞迅速送達教學視頻、PPT課件、教學案例、習題答案、模擬試卷等豐富資源免費下載教師可以申請最低折扣學生直接優惠購買圖書歡迎寫文章／投稿，我們強大的編輯團隊將為您提供專業和高效的編輯出版服務店鋪首頁核心模塊設計人民郵電出版社網店美工視覺設計實戰教程（全彩微課版第2版）第4章目錄Contents店招設計海報設計優惠券設計4.24.14.3活動區設計實戰演練4.44.54.1.1店招制作規范132頁頭背景圖片大小建議小于200k，店招大小建議小于80kb，店招的格式也應設置成JPG、GIF、PNG或SWF等格式。為了便于網店商品的推廣，除了需要在設計上具有新穎別致、易于傳播的特點，還應遵循兩個基本的原則。植入品牌形象抓住商品定位AB在設計時可以通過店鋪名稱、標志來植入品牌形象。產品定位是指展示你的店鋪賣的什么產品，精準的產品定位可以快速吸引目標消費群體進入店鋪。4.1.2制作常規店招133下面我們將介紹制作美妝專賣店“護膚壹家”常規店招的方法。由于該店鋪名稱與“護膚品”有關，因此店招的整體色調要符合女性消費人群的特點，并且要有活動的氛圍感。添加背景12新建文件繪制圓34.1.2制作常規店招134復制并縮小圓輸入文本454.1.2制作常規店招135創建扇形變形效果繪制直線的效果674.1.2制作常規店招136添加文本8添加美妝商品94.1.2制作常規店招137添加投影復制投影效果10114.1.2制作常規店招138輸入文本復制圖層與修改文本12134.1.3制作通欄店招139網店美工制作通欄店招時，一般是在常規店招的基礎上進行修改。首先需要新建通欄店招文件，添加常規店招位置的輔助線，然后將常規店招拖入其中，調整顯示位置，添加導航條形狀與文本，其具體操作步驟如下。顯示標尺31添加背景添加參考線2創建漸變導航條44.1.3制作通欄店招140添加常規店招56通欄店招效果目錄Contents店招設計海報設計優惠券設計4.24.14.3活動區設計實戰演練4.44.54.2.1制作全屏海報142在制作全屏海報時首先要根據店鋪風格來選擇海報的色調，同時選定海報所要表達的主題，如新品上市、活動促銷與預熱等，在制作過程中則要合理運用海報的布局、構圖和配色。此外，由于計算機顯示器的分辨率高低不同，為了保證全屏海報在任何顯示器中都能完整地顯示出圖片中的重要信息，在制作全屏海報時需要對圖片的兩邊進行“留白”處理，即左右兩側寬度為360像素的區域中不放置重要的商品圖片與文案。下面介紹制作美妝商品的全屏海報的方法，其具體操作步驟如下。1打開素材文件4.2.1制作全屏海報14332輸入文本2輸入文本1全屏海報效果繪制漸變矩形4.2.1制作全屏海報14454添加投影打開素材文件4.2.2制作常規海報1452輸入文本3常規海報與全屏海報所放位置不同，其寬度也有所不同，一般包括950像素、750像素、190像素3種類型。雖然海報的尺寸不同，但其制作方法相似。下面我們制作寬度為750像素的常規海報，其具體操作步驟如下。1輸入文本并繪制圓角矩形繪制直線4.2.2制作常規海報146654輸入文本并繪制圓角矩形常規海報效果7目錄Contents店招設計海報設計優惠券設計4.24.14.3活動區設計實戰演練4.44.54.3.1優惠券設計原則148優惠券在首頁模塊中展示的信息是有限，一張完整的優惠券除了優惠數字，還需要留意很多信息，這些信息一般需要在買家點擊領用后才會顯示，其中顯示了使用條件、有效時間、發行店鋪等信息，通常包括以下5種信息。0103050204優惠券的使用范圍優惠券的使用時間限制優惠券的最終解釋權設置使用張數限制優惠券的使用條件4.3.2制作優惠券149繪制圓角矩形12優惠券的發放模式主要有消費滿減（滿就送）、會員折扣和消費者自主領取3種，下面我們制作美妝類商品的滿減優惠券。為了配合前面制作的店招與海報風格，在制作本例的優惠券時，其顏色會沿用前面店招的顏色，其具體操作步驟如下。添加素材4.3.2制作優惠券150輸入文本3繪制直線44.3.2制作優惠券151繪制圓角矩形5復制組64.3.2制作優惠券152優惠券效果7優惠券效果84.3.2制作優惠券153復制組9最終效果10目錄Contents店招設計海報設計優惠券設計4.24.14.3活動區設計實戰演練4.44.54.4.1活動區的設計要點.155在制作活動區時，通常使用配合商品、文案、價格等信息來展示活動內容，為了對商品活動區的功能進行優化，設計過程中需要注意以下3個方面。010302活動區的名稱活動區中的商品展示活動區中的商品數量4.4.2制作活動區.15612

為了吸引消費者的注意力，網店美工在制作活動區時需要將海報、商品、名稱以及價格等主要信息進行合理搭配。本例主要制作女裝店鋪的活動區，在制作時，先制作活動區中的分類模塊，再制作單個商品的展示區，其具體操作步驟如下。繪制圓形輸入文本繪制直線34.4.2制作活動區.157輸入文本復制并修改內容添加投影5644.4.2制作活動區.15878添加投影復制矩形并添加素材添加素材并繪制矩形94.4.2制作活動區159輸入文本添加內陰影繪制直線繪制圓角矩形并輸入文本101312114.4.2制作活動區160輸入文本并繪制直線添加素材繪制圓角矩形1615144.4.2制作活動區161添加素材輸入文本1817目錄Contents店招設計海報設計優惠券設計4.24.14.3活動區設計實戰演練4.44.54.5.1制作女裝店招1631.設計思路（1）新建文件，創建店招空白區域與導航區域的輔助線。（4）利用直線分割矩形，輸入文本，制作優惠券。（2）輸入文本，制作文字類型的店標。（3）添加分類圖片，并結合形狀與文字使用。（5）輸入導航條文本，并添加標簽。4.5.1制作女裝店招164圖形的繪制文本的輸入導航條的設計文字店標的設計

2.知識要點4.5.1制作女裝店招16514

3.操作步驟下面進行女裝店招的制作，其具體操作如下。新建文件并創建輔助線繪制并復制矩形輸入文本繪制收藏圖標234.5.1制作女裝店招1666輸入文本5打開素材文件7繪制矩形與直線8制作優惠券4.5.1制作女裝店招167輸入導航條文本9最終效果104.5.2制作女裝海報168確定主色調，紅色可以營造溫暖的氛圍，烘托外套的保暖性。制作背景，通過素材與矩形工具的運用來制作出背景效果。在頁面左側添加文本，在頁面右側添加女裝模特素材，并為女裝模特添加投影，增加其立體感。

1.設計思路4.5.1制作女裝店招169

2.知識要點海報設計要點文本的輸入圖形的繪制0102034.5.1制作女裝店招1701

3.操作步驟下面開始制作女裝店鋪海報，其具體操作步驟如下。添加背景并繪制矩形添加素材24.5.1制作女裝店招171添加投影輸入文本34海報效果5謝謝觀看人民郵電出版社網店美工視覺設計實戰教程（全彩微課版）第4章網店美工視覺設計實戰教程（全彩微課版第2版）第4章海量圖書方便查詢免費申請樣書下載配套資源優惠購書成為作者更多樣書申請和資源下載需求，請登錄人郵教育社區（)囊括各大品類，您想要的應有盡有教師免費申請樣書，我們將安排快遞迅速送達教學視頻、PPT課件、教學案例、習題答案、模擬試卷等豐富資源免費下載教師可以申請最低折扣學生直接優惠購買圖書歡迎寫文章／投稿，我們強大的編輯團隊將為您提供專業和高效的編輯出版服務詳情頁視覺設計人民郵電出版社網店美工視覺設計實戰教程（全彩微課版第2版）第5章目錄Contents商品詳情頁設計要點寶貝描述核心模塊設計5.25.1實戰演練5.35.1.1商品詳情頁制作規范176美觀的商品詳情頁可以吸引消費者的關注和興趣，提高商品和店鋪的展現量，而為了使制作出的商品詳情頁規范完整，網店美工應注意以下幾個方面內容。商品詳情頁的風格應該與店標風格、店招風格等一致，以免造成頁面整體不協調的問題。商品詳情頁的風格應該與店標風格、店招風格等一致，以免造成頁面整體不協調的問題。在店鋪管理頁面中直接制作商品詳情頁十分不方便，因此大家可先通過Photoshop制作好商品詳情頁，再進行上傳。淘寶網對商品詳情頁的尺寸一般沒有具體要求，但其寬度一般在750像素以內。5.1.2寶貝描述的內容分析與策劃要點177引發興趣、激發潛在需求贏得消費者信任替顧客做決定關聯推薦ABCD商品詳情頁一般包括細節展示、寶貝參數、功能展示、寶貝推薦、寶貝細節等內容，網店美工在制作商品詳情頁的內容時需要根據商品來進行策劃，網店美工在策劃時主要把握以下4點。目錄Contents商品詳情頁設計要點寶貝描述核心模塊設計5.25.1實戰演練5.35.2.1寶貝焦點圖設計179寶貝焦點圖一般位于寶貝基礎信息的下方，是為推廣該款寶貝而設計的海報，由產品、主題與賣點3部分組成，它通過突出商品優勢以及放大商品特點來吸引消費者購買該商品。下面制作蘆薈噴霧的焦點圖，其具體操作如下。2漸變隱藏背景添加并編輯木板15.2.1寶貝焦點圖設計180添加素材并繪制投影添加水珠345.2.1寶貝焦點圖設計181添加文字后效果5.2.2功能描述圖設計182網店美工在設計功能描述圖時,要將商品的各功能總結起來，以圖文搭配的形式來呈現，從實用性、視覺性的角度來吸引消費者的關注和興趣。下面將制作蘆薈噴霧的功能描述圖，加入線條、形狀、水花等元素進行視覺的美化，其具體操作如下。2繪制矩形并柵格化制作圖像輸入文本并添加素材15.2.2功能描述圖設計1835輸入功能描述語功能描述圖效果3制作倒影45.2.3信息展示圖設計184由于網上的商品是虛擬的，消費者并不能通過圖片來準確把握商品的尺寸大小，因此網店美工需要在商品詳情頁中對商品的尺寸、顏色或細節等內容進行充分的展示。下面將制作蘆薈噴霧的信息展示圖，其具體操作如下。3輸入文本、繪制虛線繪制方框2制作圖標15.2.3信息展示圖設計185信息展示圖效果5.2.4賣點說明設計186在制作焦點圖和功能描述圖時，網店美工已經對賣點進行了提煉。此時可通過增加賣點的詳細的說明，如原料優勢、產地優勢、品牌理念等來增強說服力。下面將制作蘆薈噴霧“無添加”與“優質原料”的賣點說明，其具體操作如下。2制作“無添加”模塊標題文本添加素材后的說明效果15.2.4賣點說明設計1874輸入文本并繪制矩形框繪制圓角矩形并添加圖片35.2.4賣點說明設計1887輸入文字“優質原料”說明圖效果5制作編號6目錄Contents商品詳情頁設計要點寶貝描述核心模塊設計5.25.1實戰演練5.35.3.1制作四件套焦點圖190010202首先添加背景素材選擇“橫排文字工具”，設置字體格式，輸入文本使用矩形工具繪制文案背景，并添加細節商品圖片

01選擇“矩形工具”，添加素材并使用“創建剪貼蒙版”命令03輸入說明文本，完成焦點圖的制作設計思路知識要點5.3.1制作四件套焦點圖191

操作步驟下面進行床上四件套的焦點圖的制作，其具體操作如下。2添加素材繪制矩形15.3.1制作四件套焦點圖1924輸入文本3繪制水平直線5.3.1制作四件套焦點圖193在文案下方繪制矩形輸入文本完成效果56第一步5.3.2制作四件套展示圖194添加商品，結合細節圖片、文本闡述賣點。首先添加背景素材，再繪制矩形框。第二步1.設計思路5.3.2制作四件套展示圖195選擇“矩形工具”，繪制矩形形狀，并將圖片素材剪貼至矩形框內。選擇“鋼筆工具”，繪制不規則形狀。選擇“橫排文字工具”，設置字體格式，輸入文本。2.知識要點5.3.2制作四件套展示圖1963.操作步驟下面進行床上四件套賣點說明圖的制作，其具體操作如下。2繪制矩形輸入文本并繪制直線15.3.2制作四件套展示圖1975繪制矩形添加素材43繪制不規則形狀5.3.2制作四件套展示圖198輸入文本繪制直線768輸入文本并繪制直線9添加素材5.3.2制作四件套展示圖199繪制矩形并添加素材10繪制與復制矩形輸入文本11125.3.2制作四件套展示圖200繪制矩形并添加素材13繪制與復制矩形最終效果1415謝謝觀看人民郵電出版社網店美工視覺設計實戰教程（全彩微課版）第5章網店美工視覺設計實戰教程（全彩微課版第2版）第5章海量圖書方便查詢免費申請樣書下載配套資源優惠購書成為作者更多樣書申請和資源下載需求，請登錄人郵教育社區（)囊括各大品類，您想要的應有盡有教師免費申請樣書，我們將安排快遞迅速送達教學視頻、PPT課件、教學案例、習題答案、模擬試卷等豐富資源免費下載教師可以申請最低折扣學生直接優惠購買圖書歡迎寫文章／投稿，我們強大的編輯團隊將為您提供專業和高效的編輯出版服務店鋪裝修人民郵電出版社網店美工視覺設計實戰教程（全彩微課版第2版）第6章目錄Contents使用素材中心使用模塊裝修店鋪6.26.1實戰演練6.36.1.1切片技巧205網店美工在前期制作的圖片往往尺寸過大，無法直接上傳到素材中心，所以需要將圖片切割成符合要求的大小。使用Photoshop的切片工具，可以將一張圖片分割成若干張不同的小圖，并將這些小圖進行單獨展示。網店美工在進行切片時，為了保證切片合理、位置精確，就需要掌握一定的技巧。下面介紹其具體內容。切片技巧切片位置切片儲存的格式依靠參考線切片的對象6.1.2圖片切片與保存206

本例將為“暖心系”的杯子分類圖片創建切片，并將創建的切片以JPEG格式保存到計算機中，以方便后期店鋪裝修時使用。下面介紹圖片切片與保存的方法，其具體操作步驟如下。2添加參考線切片效果16.1.2圖片切片與保存2074組合切片為切片創建鏈接36.1.2圖片切片與保存2086優化切片存儲切片5保存效果76.1.3上傳圖片到素材中心209素材中心是淘寶商家的線上存儲空間，可以存儲普通圖片、視頻、音樂和動圖。先將相關資料上傳到素材中心，裝修店鋪時就可自由取用，其具體操作步驟如下。進入素材空間新建文件夾126.1.3上傳圖片到素材中心2104上傳圖片“上傳圖片”對話框36.1.3上傳圖片到素材中心2116上傳完成的圖片5選擇上傳的圖片6.1.4重命名并移動圖片212為了更好地瀏覽和查找圖片，網店美工往往需要重命名圖片，并調整圖片的順序或者將圖片放入指定的文件夾，這就需要對圖片進行移動。其具體操作步驟如下。21編輯圖片重命名圖片6.1.4重命名并移動圖片213移動圖片43選擇圖片6.1.5刪除與替換圖片214素材中心的容量有限，所以需要清理沒有用的圖片，為以后需要上傳的其他素材騰出空間，還可以對圖片進行替換，替換后的圖片會對店鋪中所有使用過原圖片的位置都進行同步的自動替換，節約了批量更改的時間。刪除與替換圖片的具體操作步驟如下刪除圖片識別被引用的圖片126.1.5刪除與替換圖片2154選擇替換的圖片3確認替換圖片5“打開”對話框目錄Contents使用素材中心使用模塊裝修店鋪6.26.1實戰演練6.36.2.1認識裝修模塊217進入店鋪裝修頁面并查看裝修模塊6.2.2裝修頁頭218編輯導航條模塊編輯“店鋪招牌”模塊

頁頭包括店招、頁頭背景和導航條3個部分。網店美工可以利用制作的圖片，分別裝修店招、頁頭背景和導航條。預覽店招效果412選擇店招圖片36.2.2裝修頁頭219調整分類顯示順序添加導航內容566.2.2裝修頁頭220裝修頁頭后的效果8選擇頁頭背景圖片7裝修導航后的效果96.2.3熱點+源代碼裝修221熱點是指為圖片中的某個區域創建鏈接，單擊即可跳轉到鏈接的頁面，常用于自定義導航條、自定義優惠券等。使用熱點需要結合圖片的源代碼才能完成。下面以裝修通欄店招為例講解熱點+源代碼裝修的裝修方法，其具體操作如下。創建切片16.2.3熱點+源代碼裝修222新建“HTML”文檔32復制圖片鏈接6.2.3熱點+源代碼裝修223選擇圖像源文件查看插入的圖片546.2.3熱點+源代碼裝修224自定義招牌并粘貼代碼復制代碼86添加鏈接熱點76.2.3熱點+源代碼裝修225為商品添加熱點設置頁頭9通欄店招裝修效果11106.2.4其他模塊裝修226多樣化的模塊為店鋪裝修提供了無限可能，使用這些不同模塊的方法卻是相似的，通常需要添加模塊、編輯模塊并添加符合模塊尺寸的設計圖。下面我們以裝修常規海報為例，講解店鋪模塊添加與編輯的方法，其具體操作步驟如下。上傳圖片到素材中心16.2.4其他模塊裝修227添加“自定義內容區”模塊3切換到商品詳情頁裝修頁面26.2.4其他模塊裝修228單擊“插入空間圖片”按鈕4單擊“插入空間圖片”按鈕56.2.4其他模塊裝修229查看插入的圖片6裝修效果7目錄Contents使用素材中心使用模塊裝修店鋪6.26.1實戰演練6.36.3.1裝修寶貝描述頁231（1）將蘆薈噴霧詳情頁的圖片上傳到素材中心。（2）選擇并進入需要裝修的商品詳情頁。（3）通過添加與編輯“自定義內容區”模塊來完成裝修。1.設計思路6.3.1裝修寶貝描述頁2322.知識要點素材中心的使用模塊的編輯保持模塊與圖片的尺寸統一6.3.1裝修寶貝描述頁233

3.操作步驟裝修本例寶貝描述頁主要通過“自定義內容區”模塊來實現，其具體操作步驟如下。上傳圖片到素材中心切換到商品詳情頁裝修頁面126.3.1裝修寶貝描述頁2344單擊“插入空間圖片”按鈕3添加“自定義內容區”模塊6.3.1裝修寶貝描述頁2356選擇圖片查看插入的圖片56.3.1裝修寶貝描述頁2367裝修效果謝謝觀看人民郵電出版社網店美工視覺設計實戰教程（全彩微課版）第6章網店美工視覺設計實戰教程（全彩微課版第2版）第6章海量圖書方便查詢免費申請樣書下載配套資源優惠購書成為作者更多樣書申請和資源下載需求，請登錄人郵教育社區（)囊括各大品類，您想要的應有盡有教師免費申請樣書，我們將安排快遞迅速送達教學視頻、PPT課件、教學案例、習題答案、模擬試卷等豐富資源免費下載教師可以申請最低折扣學生直接優惠購買圖書歡迎寫文章／投稿，我們強大的編輯團隊將為您提供專業和高效的編輯出版服務視覺營銷推廣圖的制作人民郵電出版社網店美工視覺設計實戰教程（全彩微課版第2版）第7章目錄Contents制作高點擊率的主圖智鉆圖設計7.27.1直通車推廣圖設計7.3實戰演練7.47.1.1寶貝主圖規范淘寶商品主圖的標準尺寸是310像素×310像素，而為了方便在其他平臺發布商品時不重新制作主圖，一般統一主圖的大小為800×800像素。商品主圖最多可以有5張，最少要有一張，商品主圖的大小必須控制在500KB以內。241查看商品主圖的細節7.1.2制作優質商品主圖的技巧242好的主圖能夠提高點擊率，從而達到引流的目的。買家在瀏覽主圖時速度一般較快，如何讓主圖在淘寶搜索頁的眾多主圖中成功吸引買家眼球，是制作優質主圖的關鍵，一般可以從以下4個方面著手。01020304

商品的大小適中豐富細節賣點清晰有創意宜簡不宜繁7.1.3數據線主圖設計243下面設計一款數據線的寶貝主圖。觀察數據線，產品較小，外觀上寬度較小，因此采用左圖右文的方式，平衡畫面，由于產品為白色，在顏色的選擇上使用了科技感十足的高明度的藍色搭配潮流的黃色，其具體操作如下。添加漸變背景17.1.3數據線主圖設計244添加并調整數據線素材添加投影327.1.3數據線主圖設計245復制投影效果輸入文本457.1.3數據線主圖設計246繪制圓角矩形6主圖效果7目錄Contents制作高點擊率的主圖智鉆圖設計7.27.1直通車推廣圖設計7.3實戰演練7.47.2.1智鉆圖的設計要點248在制作智鉆圖片時，要根據位置、尺寸等信息調整廣告訴求，并采取合適的表達方式進行展示，智鉆的位置和尺寸雖然豐富多樣，但在設計的標準都是一致的，下面分別進行詳細介紹。形式美觀目標明確主題突出設計要點智鉆的主圖不僅可以是商品圖片，還可以是創意方案，或者是消費者訴求的呈現。只有主圖突出才能夠吸引更多消費者來點擊。智鉆投放的目標很多，如通過智鉆上新、通過智鉆引流到聚劃算，通過智鉆預熱大型活動，以及通過智鉆進行品牌形象宣傳等。因此，在智鉆圖的設計制作中，網店美工首先需要明確自己的營銷目標，然后針對營銷目標進行素材的選擇和設計，這樣才能保證取得較高的點擊率與轉化率。美的東西總是令人無法抗拒，形式美觀的智鉆圖更能獲取消費者好感，進而提高網上店鋪的點擊率。因此，網店美工在選擇好素材，規劃好創意后，適當地對智鉆圖進行美化便顯得十分重要。7.2.2智鉆圖的構圖方式249智鉆圖片是有結構和層次的，不同布局將呈現不同的視覺焦點，若視覺焦點不統一或者布局不理想，很容易形成信息錯亂，讓消費者忽視重點。智鉆圖片的常用布局方式主要有以下8種。兩欄式構圖三欄式構圖上下式構圖正反三角形構圖放射性構圖漸次式構圖斜切式構圖垂直構圖7.2.3制作淘寶首焦智鉆250下面我們通過使用淘寶首焦智鉆位對店鋪的感恩節活動進行推廣，其智鉆圖在構圖方式上采用三欄式構圖，并通過添加投影，增強商品的立體感，其中還使用了較粗大的字體來提高圖片推廣的效果，其具體操作步驟如下。繪制紙張形狀12添加背景7.2.3制作淘寶首焦智鉆251繪制矩形34復制并調整形狀7.2.3制作淘寶首焦智鉆25256復制并調整矩形輸入并編輯文本7.2.3制作淘寶首焦智鉆253繪制圓角矩形并修改文本顏色78打開素材文件7.2.3制作淘寶首焦智鉆254添加投影9感恩節智鉆圖效果10目錄Contents制作高點擊率的主圖智鉆圖設計7.27.1直通車推廣圖設計7.3實戰演練7.47.3.1直通車展現方式256參加直通車推廣的寶貝，主要展示在如下幾個位置。買家必經之路上的眾多高流量、高關注度的展位單擊此處輸入標題關鍵詞搜索結果頁的展位7.3.2直通車圖的設計要點257

直通車圖擔負著為商品引流的重任，所以直通車既要有很好的視覺效果，也要能介紹并宣傳商品，因此在有限的畫幅內對其進行精心的設計就顯得十分重要。一般情況下，網店美工在制作直通車圖時應遵循以下3個原則。主題賣點簡潔精確構圖合理具有吸引力7.3.3直通車圖引流的關鍵258能否快速打動消費者是直通車圖是否成功引流的關鍵，一般可從以下5個方面著手。分析消費者心理需求分析圖片的差異使用增值服務使用誘導的概念使用大眾好評7.3.4設計剃須刀直通車圖259添加剃須刀并設置內發光12添加背影下面我們利用直通車圖對剃須刀商品進行推廣，該直通車圖在商品構圖方式上選用對角線左右方式，利用藍色的背景和剛硬的文字突出剃須刀的時尚科技感。在制作直通車圖時，我們用到了剪貼蒙版、投影、內發光、外發光等方式，其具體操作步驟如下。7.3.4設計剃須刀直通車圖260制作投影34添加外發光7.3.4設計剃須刀直通車圖261添加素材7輸入文本65輸入文本7.3.4設計剃須刀直通車圖添加剪貼蒙版復制圖層并添加素材982627.3.4設計剃須刀直通車圖11繪制圓角矩形的效果為文本圖層制作投影的效果102637.3.4設計剃須刀直通車圖13添加剪貼蒙版調整曲線的效果12264目錄Contents制作高點擊率的主圖智鉆圖設計7.27.1直通車推廣圖設計7.3實戰演練7.47.4.1設計唇彩直通車圖266020103撰寫文案，提煉賣點。要求主題賣點簡潔精確，畫面整體簡潔美觀。添加背景、商品與裝飾元素，注意整體色調的和諧統一。通過文本顏色、字體、大小與角度的組合設計，編輯文案的外觀。1.設計思路7.4.1設計唇彩直通車圖2672.知識要點分析消費者心理需求，并遵循直通車圖片設計的原則。主題賣點簡潔精確、構圖合理、具有吸引力。組合與編輯素材：包括素材的添加、素材疊放順序的設置、素材位置與大小的調整，以及素材投影的制作。編輯文本：文本字體、顏色、大小的搭配組合。7.4.1設計唇彩直通車268

3.操作步驟下面根據唇彩外觀設計直通車圖，其具體操作步驟如下。2蒙版隱藏部分圖像添加背景添加素材137.4.1設計唇彩直通車2694輸入文本斜切文本添加投影657.4.1設計唇彩直通車270最終效果繪制形狀并更改文本顏色787.4.2設計紫色護膚品智鉆圖271色調的選擇文本的漸變設計

1.設計思路7.4.2設計紫色護膚品智鉆圖272

2.知識要點智鉆圖的設計要點，如主圖突出、目標明確、形式美觀等。智鉆圖的構圖方式，包括兩欄式、三欄式、正反三角形構圖等。文本的輸入及形狀的繪制。7.4.2設計紫色護膚品智鉆圖273

3.操作步驟下面制作紫色護膚品智鉆圖，其具體