1、網(wǎng)店美工網(wǎng)店美工第 1 章 網(wǎng)店美工基礎(chǔ) 第 1 節(jié) 網(wǎng)店圖片的調(diào)整 第 2 節(jié) 網(wǎng)店視覺色彩 第 3 節(jié) 商品圖片的美化第 1 節(jié) 網(wǎng)店圖片的調(diào)整 網(wǎng)店美工從事對網(wǎng)絡(luò)店鋪的頁面進(jìn)行美化的工作，既包括整體頁面風(fēng)格的結(jié)構(gòu)布局設(shè)計(jì)，又包括頁面主要圖片元素的設(shè)計(jì)、編輯和美化。網(wǎng)店的美工設(shè)計(jì)要符合網(wǎng)絡(luò)店鋪的經(jīng)營理念，與所銷售的商品相呼應(yīng)，從而達(dá)到吸引買家關(guān)注和瀏覽、提升網(wǎng)店品牌和信譽(yù)的目的。一、網(wǎng)店圖片文件的類型1. JPEG 格式 JPEG 是最常見的一種圖片格式，文件的擴(kuò)展名為 . jpg 或 . jpeg。2. PNG 格式 PNG 是可移植的網(wǎng)絡(luò)圖形格式。3. GIF 格式 GIF 是圖形交換

2、格式。二、網(wǎng)店圖片編輯軟件 Photoshop CS6 是一款用于圖像制作和處理的專業(yè)軟件，具有強(qiáng)大的功能，利用這些功能，可以有效地進(jìn)行商品圖片的編輯，是網(wǎng)店美工必備的軟件工具。1.PhotoshopCS6 工作界面2.PhotoshopCS6 文件的新建和打開 （1）新建文件（2）打開文件三、商品圖片的基本編輯1.商品圖片的調(diào)整2.商品圖片的校正3.商品圖片的摳圖 對于買家來說，在瀏覽網(wǎng)店時(shí)，首先吸引他們的是網(wǎng)店色彩搭配的視覺效果。對于網(wǎng)店來說，可以利用色彩鮮明的商品圖片吸引買家瀏覽和關(guān)注，由此增加商品和網(wǎng)店的吸引力，從而達(dá)到良好的營銷效果。第 2 節(jié)網(wǎng)店視覺色彩一、色彩的分類1.無彩色2.

3、有彩色3.特殊色二、色彩的三要素1.色相：是區(qū)別不同色彩的名稱。2.明度：是指色彩的明暗程度。3.純度：是指色彩鮮艷的程度。三、顏色的模式1.RGB 模式2.CMYK 模式3.HSB 模式4.Lab 模式四、網(wǎng)店色彩的搭配1.同一色調(diào)搭配2.類似色調(diào)搭配3.對比色調(diào)搭配 為了讓商品圖片更加具有吸引力，獲得更多買家的關(guān)注，需要在商品圖片上傳之前對其進(jìn)行了細(xì)致的處理和美化。第 3 節(jié)商品圖片的美化一、圖片修圖工具1.仿制圖章工具2.圖案圖章工具3.污點(diǎn)修復(fù)畫筆工具4.修補(bǔ)工具5.紅眼工具二、商品圖片的批量處理 “動作”控制面板可以對圖像進(jìn)行批量處理，避免重復(fù)操作，提高處理圖片的效率。課件制作謝謝觀

4、看第 2 章 網(wǎng)店圖片設(shè)計(jì) 第 1 節(jié) 網(wǎng)店促銷圖設(shè)計(jì) 第 2 節(jié) 商品主圖設(shè)計(jì) 第 3 節(jié) 商品詳情頁設(shè)計(jì)第 1 節(jié) 網(wǎng)店促銷圖設(shè)計(jì)一、促銷圖的類型 網(wǎng)店促銷圖一般分為整店促銷圖、單品促銷圖和活動推廣促銷圖三種類型。1.整店促銷圖2.單品促銷圖3.活動推廣促銷圖二、促銷圖元素 促銷圖元素有產(chǎn)品、背景、文案。三、促銷圖排版1.左文右圖2.左圖右文3.兩邊圖中間文字四、濾鏡工具第二章第二章1.濾鏡庫第二章第二章2. 獨(dú)立濾鏡第 2 節(jié)商品主圖設(shè)計(jì)第二章第二章一、商品主圖設(shè)計(jì)要點(diǎn)1.主圖尺寸要求2.商品要突出3. 圖片要清晰4.圖片要真實(shí)二、商品主圖的構(gòu)圖方法1.中心構(gòu)圖2.均衡構(gòu)圖3.緊湊式構(gòu)圖

5、4.三角構(gòu)圖5.對角線構(gòu)圖6.九宮格構(gòu)圖第 3 節(jié) 商品詳情頁設(shè)計(jì)一、商品詳情頁的尺寸要求1.計(jì)算機(jī)端描述頁面要求 每張圖片的容量建議不超過 2 MB，圖片寬度不超過 750 像素，商品描述頁面“源碼”不超過 200 000 個(gè)字符。2.手機(jī)端（無線端）描述頁面要求 圖片寬度要求在 4801 242 像素，高度小于等于 1 546 像素；圖片總?cè)萘坎怀^ 2 560 KB，總字?jǐn)?shù)不得超過 5 000 個(gè)字；摘要內(nèi)容不超過 140 個(gè)字。二、詳情頁包含的元素1.基本信息2.產(chǎn)品展示3.商品焦點(diǎn)圖4.商品細(xì)節(jié)圖5.購物須知三、蒙版和通道的使用1.蒙版 （1）蒙版效果 （2）蒙版使用2.通道 （1）

6、通道的分類 （2）通道控制面板 （3）通道的作用課件制作謝謝觀看第 3 章 網(wǎng)店文字設(shè)計(jì) 第 1 節(jié) 文字基礎(chǔ)設(shè)計(jì) 第 2 節(jié) 促銷文字排版第 1 節(jié) 文字基礎(chǔ)設(shè)計(jì) 商品的某些屬性有時(shí)無法單純用圖片來說明，如店鋪公告欄，商品分類信息、商品詳情、售后服務(wù)、運(yùn)輸方式、付款方式、說明等，而文字就可以把這些信息直接傳遞給買家，文字是店鋪展示的基礎(chǔ)部分。 一、文字設(shè)計(jì)基本操作1. 文字工具的使用 常用的文字工具有“橫排文字工具”“豎排文字”和“文字蒙版工具”（可以創(chuàng)建文字選區(qū)，在選區(qū)中可以填充文字的顏色）。 （1）純文字狀態(tài)下，橫排文字和豎排文字的切換 1）單擊窗口欄的“改變文字方向”按鈕 。 2）選中

7、文字所在圖層，右擊鼠標(biāo)選擇“水平 / 垂直”。 3）執(zhí)行窗口菜單“文字”“取向”“水平 / 垂直”命令。（2）字母數(shù)字方向的更改 單擊“字符”面板的倒三角形，先選擇“更改文本方向”，再單擊“倒三角”，選擇“標(biāo)準(zhǔn)對齊垂直羅馬方式”。2.文字面板 在文字的設(shè)計(jì)過程中需要使用“字符”面板和“段落”面板，如圖所示。它們可以讓文字具備更多的功能，如“字符”面板中的字體樣式， ，還有“段落”面板中的 選項(xiàng)，可以在段落文本框?qū)?度不夠的情況下自動換行。二、創(chuàng)建文字1.點(diǎn)文字的創(chuàng)建 點(diǎn)文字是一個(gè)水平或垂直的文本行，每行文字都是獨(dú)立的，行的長度隨著文字的輸入而不斷增加，但是不會換行。2.段落文字的創(chuàng)建 段落文字

8、是在定界框內(nèi)輸入的文字，它具有自動換行、可調(diào)整文字區(qū)域大小的優(yōu)勢。在需要處理文字量較大的文本時(shí)，可以使用段落文字來完成。3.路徑文字的創(chuàng)建 路徑文字用于創(chuàng)建排列不規(guī)則的文字 , 可自行定義文字方向。創(chuàng)建路徑文字時(shí)需要先繪制一條路徑，將文字工具指定到路徑上，創(chuàng)建的文字會隨著路徑的走向排列，路徑改變時(shí)，文字的排列也會隨之變化。三、轉(zhuǎn)換文字圖層1.文字的柵格化 Photoshop CS6 中，用文字工具生成的文字未柵格化前，優(yōu)點(diǎn)是可以重新編輯，如更改內(nèi)容、字體、字號等。缺點(diǎn)是無法使用 PS 中的濾鏡。因此使用柵格化命令將文字柵格化，可以制作出樣式多樣，漂亮的文字，使文字效果更豐富。文字柵格化后加濾鏡

9、的效果2.文字轉(zhuǎn)換為形狀 在圖層面板中選擇文字圖層，右擊鼠標(biāo)轉(zhuǎn)換為形狀，可將文字轉(zhuǎn)換為形狀圖層。3.文字轉(zhuǎn)換為工作路徑 在圖層面板中選擇文字圖層，右擊鼠標(biāo)創(chuàng)建為工作路徑，可將文字轉(zhuǎn)換為路徑。第 2 節(jié) 促銷文字排版 設(shè)計(jì)商品促銷廣告主要以商品圖片和文字為主，因此要注意商品圖片和促銷文案的排版，商品圖片要清晰，促銷文案要突出重點(diǎn)。設(shè)計(jì)過程中主要使用畫筆工具繪制背景，使用摳圖工具摳出商品圖片，使用文字工具結(jié)合鋼筆工具對文字進(jìn)行排版。 一、網(wǎng)店常用字體1. 靜態(tài)店標(biāo) 網(wǎng)店常用黑體、微軟雅黑、漢真廣標(biāo)等筆畫較粗的字體，能讓促銷文案具有力量感。設(shè)計(jì)促銷文案時(shí)，要按文字的重要程度來設(shè)置文字的大小，需要強(qiáng)調(diào)

10、的文字，一般會被加粗或者放大。二、網(wǎng)店文字排版常用形式1. 左文右圖式排版2. 左圖右文式排版3. 兩邊圖中間文字式排版4. 多產(chǎn)品構(gòu)圖式排版課件制作謝謝觀看第 4 章 網(wǎng)店裝修設(shè)計(jì) 第 1 節(jié) 店標(biāo)設(shè)計(jì) 第 2 節(jié) 店招設(shè)計(jì) 第 3 節(jié) 公告欄設(shè)計(jì) 第 4 節(jié) 商品分類設(shè)計(jì)第 1 節(jié) 店標(biāo)設(shè)計(jì) 網(wǎng)店裝修就是在第三方平臺規(guī)則許可的范圍內(nèi)，通過圖片美化、程序模板等手段使得網(wǎng)絡(luò)店鋪更加美觀。 一般來說，網(wǎng)店裝修的主要工作包括：店鋪標(biāo)識（店標(biāo)）設(shè)計(jì)、店鋪招牌（店招）設(shè)計(jì)、公告欄設(shè)計(jì)、商品分類設(shè)計(jì)等。 一、店標(biāo)類型1. 靜態(tài)店標(biāo) （1）文字型店標(biāo) 主要是以文字和拼音字母等單獨(dú)構(gòu)成，適用于多種傳播方式。

11、 （2）圖案型店標(biāo) 圖案型標(biāo)志僅用圖形或圖片構(gòu)成標(biāo)志。這種標(biāo)志形象生動，色彩明快，且不受語言限制，非常易于識別。但圖案標(biāo)志沒有名稱，因此表意不如文字標(biāo)志準(zhǔn)確。 （3）組合型店標(biāo) 組合型標(biāo)志是由文字和圖案組合而成的標(biāo)志。這種標(biāo)志發(fā)揮了文字及圖案標(biāo)志的優(yōu)點(diǎn)，圖文并茂，形象生動，易于識別。 2. 動態(tài)店標(biāo) 相對于靜態(tài)店標(biāo)，精美別致的動態(tài)店標(biāo)更加吸引人，或絢麗、或閃耀、或展示商品，也被更多的網(wǎng)店廣泛應(yīng)用。 二、店標(biāo)設(shè)計(jì)原則1.造型的創(chuàng)意性2.獨(dú)特的識別性3.設(shè)計(jì)的統(tǒng)一性 三、店標(biāo)設(shè)計(jì)的相關(guān)工具 1.形狀工具組 2.鋼筆和路徑工具組 3.選區(qū)工具組 4.文字變形工具 5.時(shí)間軸工具 五、將店標(biāo)設(shè)置為動畫

12、格式輸出 1. 一次 2. 永遠(yuǎn) 3. 其他 第 2 節(jié) 店招設(shè)計(jì) 店招就是商店的招牌，是掛在商店門前作為標(biāo)志的牌子，主要用來指示店鋪的名稱和字號，有豎招、橫招等形式。與實(shí)體店類似，網(wǎng)店店招也是用于展示店鋪名稱和經(jīng)營特色，同時(shí)具有宣傳店鋪的作用。 一、店招設(shè)計(jì)要點(diǎn)1.店鋪名稱醒目，凸顯品牌特性 2.重視店招圖片的左上角 3.顏色不要復(fù)雜，字體保持整潔性 4.及時(shí)更新 二、店招常用字體 三、店招設(shè)計(jì)的相關(guān)工具 1.背景底圖制作工具 2.字體工具 第 3 節(jié) 公告欄設(shè)計(jì) 公告欄是用于張貼公布公文、告示、啟示等提示性內(nèi)容的展示用品。網(wǎng)上店鋪公告欄則是起到向買家展示店鋪重要信息的作用。一、公告欄的類型1