電商美工培訓(xùn)

1、東莞市動點信息科技有限企業(yè)美工培訓(xùn)Desigened by Hao電商美工培訓(xùn)第1頁01 Photoshop基礎(chǔ)02 旺鋪首頁設(shè)計03 主圖美化04 搜索列表頁設(shè)計05 寶貝詳情頁設(shè)計電商美工培訓(xùn)第2頁01 Photoshop基礎(chǔ)02 旺鋪首頁設(shè)計03 主圖美化04 搜索列表頁設(shè)計05 寶貝詳情頁設(shè)計電商美工培訓(xùn)第3頁Photoshop 基礎(chǔ)1.1 Photoshop默認(rèn)界面A.文檔窗口B.停放折疊為圖標(biāo)面板C.面板標(biāo)題欄D.菜單欄E.選項欄 F.“工具”調(diào)板G.“折疊為圖標(biāo)”按鈕H.垂直停放三個調(diào)板（面板）組ABCDEFGH操作界面4電商美工培訓(xùn)第4頁1Photoshop 基礎(chǔ)1.2 工具面

2、板 在 Photoshop 中稱為“工具”調(diào)板，包含用于創(chuàng)建和編輯圖像、圖稿、頁面元素等工具。相關(guān)工具將編為一組。電商美工培訓(xùn)第5頁1Photoshop 基礎(chǔ)1.2 工具面板1.2.1 選擇工具：選框工具移開工具套索工具魔棒工具快速選擇工具電商美工培訓(xùn)第6頁1Photoshop 基礎(chǔ)1.2 工具面板1.2.2 裁剪工具：裁剪工具切片工具切片選擇工具電商美工培訓(xùn)第7頁1Photoshop 基礎(chǔ)1.2 工具面板1.2.3 修飾工具：污點修補工具修復(fù)畫筆工具修補工具紅眼工具仿造印章工具圖案印章工具橡皮擦工具背景橡皮擦工具電商美工培訓(xùn)第8頁1Photoshop 基礎(chǔ)1.2 工具面板1.2.3 修飾工具

3、：魔術(shù)橡皮擦工具含糊工具銳化工具涂抹工具減淡工具加深工具海綿工具電商美工培訓(xùn)第9頁1Photoshop 基礎(chǔ)1.2 工具面板1.2.4 畫筆工具：畫筆工具鉛筆工具顏色替換工具歷史統(tǒng)計畫筆工具歷史統(tǒng)計藝術(shù)畫筆工具漸變工具油漆桶工具電商美工培訓(xùn)第10頁1Photoshop 基礎(chǔ)1.2 工具面板1.2.5 繪圖和文字工具：路徑工具文字工具文字蒙版工具鋼筆工具形狀工具直線工具自定義形狀工具電商美工培訓(xùn)第11頁1Photoshop 基礎(chǔ)1.2 工具面板1.2.6 其它工具：注釋工具吸管工具測量工具抓手工具縮放工具電商美工培訓(xùn)第12頁1Photoshop 基礎(chǔ)1.3 調(diào)板調(diào)板可幫助您監(jiān)視和修改您工作。默認(rèn)

4、情況下，將顯示一些面板，能夠經(jīng)過從“窗口”菜單中選擇任何面板來添加該面板。很多面板都含有菜單，其中包含特定于面板選項。能夠?qū)γ姘暹M行編組、堆疊或停放。電商美工培訓(xùn)第13頁1Photoshop 基礎(chǔ)1.4 菜單欄 同其它Windows應(yīng)用程序一樣，Photoshop CC提供了豐富菜單命令，許多操作都能夠經(jīng)過菜單命令來完成，Photoshop CS3主菜單共有11個。Photoshop CC界面電商美工培訓(xùn)第14頁1Photoshop 基礎(chǔ)1.5 位圖與矢量圖 在我們設(shè)計輪播海報、寶貝主圖等圖片時候，盡可能選取矢量圖形或高像素圖片作為我們設(shè)計素材，防止出現(xiàn)失真現(xiàn)象。位圖圖像：位圖也叫柵格圖，由象

5、素點組成，每個象素點都含有獨立位置和顏色屬性。在增加圖像物理象素時，圖像質(zhì)量會降低。矢量圖形：由矢量直線和曲線組成，在對它進行放大、旋轉(zhuǎn)等編輯時不會對圖像品質(zhì)造成損 失，如其它軟件創(chuàng)造AI、CDR、EPS文件等。1：1百分比下位圖圖像和矢量圖像： 放大后位圖圖像和矢量圖像：電商美工培訓(xùn)第15頁1Photoshop 基礎(chǔ)1.6 象素與選區(qū) 巧用選區(qū)配合印章等修圖工具能夠更加好對圖像指定位置進行修改與處理，防止影響到其它不相關(guān)區(qū)域。象素：象素是組成圖像最基本元素，它實際上一個個獨立小方格，每個象素都能統(tǒng)計它所在位置和顏色信息。下列圖中每一個小方格就是一個象素點，它記載著圖像各種信息。選區(qū)：也叫選取

6、范圍，是PS對圖像做編輯范圍，任何編輯對選區(qū)外無效。當(dāng)圖像上沒有建立選擇區(qū)時，相當(dāng)于全部選擇。下列圖中黑白相間細(xì)線就是選擇區(qū)邊界，對圖像操作只對選擇區(qū)內(nèi)有效。電商美工培訓(xùn)第16頁1Photoshop 基礎(chǔ)1.7 容差與流量容差：圖像上像素點之間顏色范圍，容差越大，與選擇象素點相同范圍越大，其數(shù)值為0-255。下列圖是用魔術(shù)棒選擇工具在不一樣容差值下對圖像做不連續(xù)選區(qū)結(jié)果。流量：控制畫筆作用到圖像上顏色濃度，流量越大產(chǎn)生顏色深度越強，其數(shù)值為0%-100%。下列圖是用一樣畫筆在不一樣流量控制下對圖像操作結(jié)果。 電商美工培訓(xùn)第17頁1Photoshop 基礎(chǔ)1.8 蒙版與樣式 蒙板：蒙板是用來保護

7、圖像任何區(qū)域都不受編輯影響，并將對它編輯操作作用到它所在圖層。以下列圖，蒙板將對其黑白控制轉(zhuǎn)化為透明后作用到圖像上，蒙板上黑色部分為完全透明，白色為完全不透明。 樣式：對活動圖層或選區(qū)進行定制風(fēng)格化編輯，類似動作。下列圖是對圖像各個圖層內(nèi)容指定不一樣樣式結(jié)果。電商美工培訓(xùn)第18頁1Photoshop 基礎(chǔ)1.9 通道與圖層 圖層：為了方便圖像編輯，將圖像中各個部分獨立起來，對任何一部分編輯操作對其它部分不起作用。下列圖實際上是由多個圖層合成一張成品稿。 通道：通道是完全統(tǒng)計組成圖像各種單色顏色信息和墨水強度，并能存放各種選擇區(qū)域、控制操作過程中不透明度。下列圖是一張色彩模式為RGB圖像在彩色（

8、RGB）、紅色（R）、綠色（G）、藍色（B）通道下顯示效果。電商美工培訓(xùn)第19頁1Photoshop 基礎(chǔ)1.10 圖層樣式投影內(nèi)陰影外發(fā)光內(nèi)發(fā)光斜面浮雕光澤顏色疊加漸變疊加圖案疊加描邊電商美工培訓(xùn)第20頁1Photoshop 基礎(chǔ)1.11 濾鏡 濾鏡：利用攝影中濾光鏡原理對圖像進行特殊效果編輯。即使其源自濾光鏡，但在PS中將它功效發(fā)揮到了濾光鏡無法比擬程度，使其成為PS中最神奇部分。PS中有13大類(不包含Digmarc濾鏡)近百種內(nèi)置濾鏡。 原圖：使用不通濾鏡結(jié)果：電商美工培訓(xùn)第21頁1Photoshop 基礎(chǔ)1.12 文件保留 分辨率：單位長度內(nèi)(通常是一英寸)象素點數(shù)量多少。針對不一樣

9、輸出要求對分辨率大小也不一樣，如慣用屏幕分辨率為72象素/英寸，而普通印刷分辨率為300象素/英寸。 文件格式：為滿足不一樣輸出要求，對文件采取存放模式，并依據(jù)一定規(guī)格對圖像各種信息和品質(zhì)做取舍，它相當(dāng)于圖像各種信息實體描述。 下面是PS慣用文件格式。 輸出：將圖像轉(zhuǎn)換成其它文件格式，以到達不一樣軟件之間文件交換目標(biāo)，或是滿足其它輸出需求求。色彩式模：將圖像中象素按一定規(guī)則組織起來方法，稱之為色彩模式。不一樣輸出需要圖象有不一樣色彩模式。慣用色彩模式如RGB、CMYK、Lab等。電商美工培訓(xùn)第22頁01 Photoshop基礎(chǔ)02 旺鋪首頁設(shè)計03 主圖美化04 搜索列表頁設(shè)計05 寶貝詳情頁

10、設(shè)計電商美工培訓(xùn)第23頁2旺鋪首頁設(shè)計2.1 裝修界面尺寸介紹旺鋪整體版面寬度為1440-1920px,普通情況下選取1440px即可。主體內(nèi)容最大寬度尺寸為950px；其它主體模塊內(nèi)容分別為190px與750px。招牌尺寸：950 x120px頁頭尺寸：1440 x150px導(dǎo)航尺寸：950 x30px電商美工培訓(xùn)第24頁2旺鋪首頁設(shè)計2.2 旺鋪店招設(shè)計制作進入裝修頁面之后，選擇店招編輯按鈕即可進入店招編輯界面。店招制作方法有三種：1.默認(rèn)招牌2.自定義招牌3.BannerMaker電商美工培訓(xùn)第25頁2旺鋪首頁設(shè)計2.2.1 默認(rèn)招牌設(shè)計制作1.招牌類型選擇默認(rèn)招牌2.將顯示店鋪名稱勾去

11、掉3.背景圖處點擊選擇文件按鈕，將已經(jīng)制作好店招圖片上傳到招牌4.點擊保留按鈕即可。注意事項：在裝修店招時候，先要在把你所要放店招圖片準(zhǔn)備好。店招圖片尺寸為：950 x120 px（店招詳細(xì)高度能夠依據(jù)你版面需求有所改變。）（默認(rèn)店招只能單獨放一張圖片，不足太大，不提議使用）電商美工培訓(xùn)第26頁2旺鋪首頁設(shè)計2.2.2 自定義招牌設(shè)計制作1.招牌類型選擇自定義招牌2.點擊插入空間圖片按鈕，上傳店招圖片3.店招如要添加收藏、點擊等功效，能夠切換到源碼頁，添加相關(guān)代碼。4.點擊保留按鈕即可。注：自定義招牌是我們美工經(jīng)常使用一個招牌類型，可在源碼頁面自由設(shè)計自己招牌，自由度在3種招牌類型里面是最高。

12、電商美工培訓(xùn)第27頁2旺鋪首頁設(shè)計2.2.3 BannerMaker招牌類型1.招牌類型選擇BannerMaker2.點擊進入BannerMaker設(shè)置，進入banner圖購置頁面3.挑選你喜歡banner圖類型，購置相關(guān)banner圖即可。4.點擊保留按鈕即可。注意事項：BannerMaker這個界面適適用來尋找設(shè)計靈感，并不提議使用這種圖片，一個方面是因為要用錢，另一個方面是這種banner圖不一定真適合你店鋪，不足太大。電商美工培訓(xùn)第28頁2旺鋪首頁設(shè)計2.2.4 頭部頁頭設(shè)計專業(yè)版頁頭制作方法：1.打開后臺左側(cè)頁頭設(shè)置頁面2.如若需使用背景色，則可更換頁頭背景色，假如不許使用則把那勾去

13、掉3.頁頭下邊距10像素，選擇關(guān)閉4.如要使用自定義頁頭，則選取更換圖片按鈕，上傳圖片。頁頭圖片高度為150像素，寬度不少于1440像素5.選擇適當(dāng)背景顯示方式及對齊方式后，點擊保留 所謂頁頭，就是指店招與導(dǎo)航左右兩邊空白區(qū)域，我們做頁頭目標(biāo)就是把這空白區(qū)域色塊補充完整，如上圖所表示。 基礎(chǔ)版店鋪是沒有設(shè)置頁頭權(quán)限，對此我們能夠用代碼來設(shè)計，代碼以下：bodybackground:url(圖片地址) no-repeat fixed center top transparent;電商美工培訓(xùn)第29頁2旺鋪首頁設(shè)計2.3.1 導(dǎo)航設(shè)計制作方法1.點擊導(dǎo)航編輯按鈕，進入導(dǎo)航編輯界面2.能夠點擊添加按

14、鈕，在導(dǎo)航上添加二級頁面電商美工培訓(xùn)第30頁2旺鋪首頁設(shè)計2.3.1 導(dǎo)航設(shè)計制作方法1.點擊顯示設(shè)置，添加導(dǎo)航控制代碼2.點擊保留電商美工培訓(xùn)第31頁2旺鋪首頁設(shè)計2.3.1 導(dǎo)航設(shè)計制作方法色塊:background:#000000; 自定義圖片:background:url(圖片鏈接); 前半段.skin-box-bd .linkbackground:#000000; 后半段.skin-box-bd .menu-listbackground:#000000; 最右邊1小塊.skin-box-bdbackground:url(圖片鏈接); 電商美工培訓(xùn)第32頁2旺鋪首頁設(shè)計2.3.1 導(dǎo)航

15、設(shè)計制作方法色塊:background:#000000; 自定義圖片:background:url(圖片鏈接); 首頁色塊.skin-box-bd .menu-list .menu-selected .linkbackground:url(圖片鏈接);.skin-box-bd .menu-list .menu-selected .link .titlebackground:url(圖片鏈接);“全部分類”背景色代碼以下：.all-cats .linkbackground:#000000;電商美工培訓(xùn)第33頁2旺鋪首頁設(shè)計2.3.1 導(dǎo)航設(shè)計制作方法色塊:background:#000000;

16、自定義圖片:background:url(圖片鏈接); 豎線編輯：一級導(dǎo)航分類（除去“全部寶貝”分類）分隔線顏色代碼以下：.menu-list .menuborder-color:#000000;一級導(dǎo)航“全部寶貝”分類分隔線顏色代碼以下：.all-cats.linkborder-color:#000000;電商美工培訓(xùn)第34頁2旺鋪首頁設(shè)計2.3.1 導(dǎo)航設(shè)計制作方法色塊:background:#000000; 自定義圖片:background:url(圖片鏈接); 二級分類文字代碼以下：.popup-content .cats-tree .fst-cat .cat-namefont-siz

17、e:字號px;color:#顏色代碼;font-weight:bold/bolder/normal;二級分類背景代碼以下：.popup-contentbackground:#000000;三級分類文字代碼（除去“全部寶貝”分類）以下.popup-content.cats-tree.snd-pop-innerfont-size:字號px;color:#顏色代碼;font-weight:bold/bolder/normal; 三級分類文字代碼（包含“全部寶貝”分類字體大?。┻@么就無法改變字體顏色，以下.popup-content.cats-tree.snd-pop-innerfont-size:字

18、號px;color:#顏色;三級分類背景代碼：.popup-content .cats-tree .snd-pop-innerbackground:#000000;電商美工培訓(xùn)第35頁2旺鋪首頁設(shè)計2.3.1 導(dǎo)航設(shè)計制作方法色塊:background:#000000; 自定義圖片:background:url(圖片鏈接); 鼠標(biāo)滑過一級分類導(dǎo)航文字變換背景色代碼以下：.menu-list .menu-hover .linkbackground:#000000;鼠標(biāo)滑過一級分類導(dǎo)航文字變換顏色代碼以下：.menu-list .menu-hover .link .titlecolor:#FFFF

19、FF;電商美工培訓(xùn)第36頁2旺鋪首頁設(shè)計2.3.1 導(dǎo)航設(shè)計制作方法色塊:background:#000000; 自定義圖片:background:url(圖片鏈接); 鼠標(biāo)滑過二級分類導(dǎo)航文字變換背景色代碼以下：.popup-content .cats-tree .cat-hd-hoverbackground:#000000;鼠標(biāo)滑過二級分類導(dǎo)航文字變換顏色代碼以下：.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-namecolor:#ff0000;電商美工培訓(xùn)第37頁2旺鋪首頁設(shè)計2.3.1 導(dǎo)航設(shè)計制作方法色塊:back

20、ground:#000000; 自定義圖片:background:url(圖片鏈接); 鼠標(biāo)滑過三級分類導(dǎo)航文字變換背景色代碼以下：.popup-content .cats-tree .snd-cat-hd-hoverbackground:#000000;修改“全部寶貝”右邊小圖標(biāo)代碼以下：.all-cats .link .popup-iconbackground:url(圖片連接);電商美工培訓(xùn)第38頁2旺鋪首頁設(shè)計2.3.1 導(dǎo)航設(shè)計制作方法色塊:background:#000000; 自定義圖片:background:url(圖片鏈接); 修改二級分類右側(cè)圖標(biāo)代碼以下（有三級分類才會顯示

21、）：.popup-content .cats-tree .fst-cat-iconbackground:url(圖片連接);在三級分類前加上小塊白色代碼以下：.popup-content .cats-tree .snd-cat-icondisplay:block;height:3px;width:3px;電商美工培訓(xùn)第39頁2旺鋪首頁設(shè)計2.4 全屏海報制作淘寶上慣用寬度尺寸有1440、1680、1920這三種。 淘寶后臺默認(rèn)最大寬度為950,假如要超出這尺寸必須經(jīng)過代碼實現(xiàn)。另外，這全屏代碼只能在淘寶首頁使用，子頁面是不兼容。1440px 全屏海報：（寬度1440px，高度隨便自己調(diào)，同時修

22、改兩處500px即可） 電商美工培訓(xùn)第40頁2旺鋪首頁設(shè)計2.5 萬能熱區(qū)代碼介紹萬能熱區(qū)是淘寶上最常見一個點擊功效，它能是圖片上某一個區(qū)域?qū)崿F(xiàn)頁面跳轉(zhuǎn)。萬能熱區(qū)按鈕： 萬能熱區(qū)工具網(wǎng)址：/hotpoint/電商美工培訓(xùn)第41頁2旺鋪首頁設(shè)計2.6 其它代碼介紹在線客服與收藏店鋪也是淘寶里面很常見一個互動功效。收藏店鋪普通來說會放到招牌或者詳情頁左側(cè)。在線客服普通會放到首頁輪播圖下方、首頁主產(chǎn)品上方或詳情頁左側(cè)。在線客服代碼：收藏店鋪代碼：電商美工培訓(xùn)第42頁01 Photoshop基礎(chǔ)02 旺鋪首頁設(shè)計03 主圖美化04 搜索列表頁設(shè)計05 寶貝詳情頁設(shè)計電商美工培訓(xùn)第43頁3主圖美化3.1 做圖前準(zhǔn)備事項一張好淘寶主圖制作，離不開你充分準(zhǔn)備工作。只有對同行產(chǎn)品充分了解，你才能充分突出你產(chǎn)品，提升點擊量。影響主圖排名相關(guān)原因：1.主圖創(chuàng)意度2.周圍主圖區(qū)分（主圖顏色等）3.主圖點擊率4.寶貝成交率主圖制作前準(zhǔn)備事項：1.同行產(chǎn)品對比，找出產(chǎn)品賣點。2.對寶貝排名附近產(chǎn)品進行對比，確定主圖主色調(diào)。3.撰寫文案，展示寶貝優(yōu)勢，字?jǐn)?shù)不宜過多。4.準(zhǔn)備主圖相關(guān)素材5.對主寶貝進行修圖，對產(chǎn)品上臟東西及明暗度進行調(diào)整。電商美工培訓(xùn)第44頁3主圖美化3.2 主圖制作注意事項每一個寶貝上都能夠有5張主圖，其中有兩