第1章　網店美工入門必讀

關于網店美工　網店的組成　網店裝修流程

1.1　關于網店美工

網店美工是一個區別于其他傳統行業的新興行業，但是又和傳統行業緊密相關，介于網站設計和平面設計之間。作為一名網店美工，既要懂得設計排版，也要會寫一些代碼。隨著電商行業越來越成熟，成千上萬家的淘寶、天貓店鋪應運而生，這么多店鋪出現，必然需要大量的美工人員。

美工的入行門檻比較低，有的人看一些教程就以為可以出師了。但是想要成為一名優秀的美工，需要付出更多的努力。

在通往優秀設計師的路上，勤于動腦是一個快速提高能力的好方法，先動腦，再動手。Photoshop軟件只是一個工具，花上半個月的時間就可以學會，難的是如何利用軟件表達出自己的想法。“授人以魚，不如授人以漁。”希望把我的一些想法和思路分享給廣大讀者，使大家能夠從中收獲知識，繼而轉變成自己的能力，在設計行業慢慢走向成功。

1.1.1　網店美工的定位

網店美工在店鋪團隊中起著很重要的作用。一個成熟的店鋪包含店長、運營、美工、策劃、發貨員、售后和客服等。美工的工作是把買家看不見的實物通過圖片和文字的方式介紹給買家，讓買家對產品產生興趣并下單購買。

網店美工在店鋪中起到了承上啟下的作用，對上輔助運營做出營銷性的圖片用來推廣，對下針對客服和售后反映的情況做出相應的修改，讓店鋪健康地經營下去。

1.1.2　美工必須要知道的事

1.各種圖片的像素要求

主圖、直通車圖片的尺寸為800像素×800像素，輪播海報圖的尺寸為1920像素×500（或以上）像素。

淘寶首頁模塊的寬度為950像素，天貓首頁模塊的寬度為990像素。

淘寶詳情頁的寬度為750像素，天貓詳情頁的寬度為790像素。

手機端詳情頁的寬度為480~640像素。

2.分辨率

圖像分辨率

圖像分辨率是指單位長度的圖像中存儲的信息量，代表每英寸圖像內有多少個像素點，分辨率決定了位圖圖像細節的精細程度。一般來說，圖像的分辨率越高，成品尺寸越大，圖像越清晰。分辨率的單位為像素/英寸。

可以把整個圖像想象成一個大型的棋盤，而所有經線和緯線交叉點的數目是圖像像素總數，分辨率是指單位長度上的像素數，如圖1-1所示。

顯示分辨率

顯示分辨率就是單位面積屏幕上顯示的像素個數。由于屏幕上的點、線、面都是由像素組成的，顯示器可顯示的像素越多，畫面就越精細，同樣的屏幕區域內能顯示的信息也越多，所以分辨率是個非常重要的性能指標。例如，分辨率160×128，就是說水平像素數為160個，垂直像素數128個。分辨率越高，像素數越多，顯示出來的圖像越精細。因此在屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越細膩，如圖1-2所示。

以分辨率為1024×768的屏幕來說，每一條水平線上包含1024個像素點，共有768條線，即掃描列數為1024，行數為768。

顯示分辨率不僅與顯示屏的尺寸有關，還受點距、視頻帶寬等因素的影響。其中，它和刷新頻率的關系比較密切，嚴格地說，只有當刷新頻率為“無閃爍刷新頻率”時，顯示器才能達到最高的分辨率，才能稱這個顯示器的最高分辨率為多少。

1.1.3　圖片格式

Photoshop軟件可以導出、支持很多圖片格式，淘寶上用到的主要有JPEG、PNG、GIF等格式，下面介紹一下經常用到的這3種圖片格式。

圖片在Photoshop軟件中制作完成后，執行“文件>存儲為”菜單命令，彈出對話框，“格式”下拉列表中包含了多種圖片格式，如圖1-3和圖1-4所示。

作為網店美工，僅僅使用JPEG格式圖片是不夠的。執行“文件>存儲為Web所用格式”菜單命令，如圖1-5所示，之后彈出存儲設置對話框，如圖1-6所示。

1.JPEG格式

JPEG是最常用的圖片格式，它在獲取極高的壓縮率的同時，還能展示十分豐富生動的細節，大多數有豐富的細節和色彩的圖片都會使用JPEG格式。在“存儲為Web所用格式”對話框中，可以設置JPEG格式圖片品質的高低等參數，如圖1-7所示。

2.GIF格式

GIF格式的圖片一般用于動態展示，動態圖片的優點是能快速吸引人的注意力。科學研究表明，人們對動態的東西更感興趣。但是此格式弊端也很多，由于它最多支持256色，很多優質圖片存儲為GIF格式后，質量會嚴重下降，有很多顆粒，會影響美觀，建議存儲為GIF格式時使用純色的背景。該格式的參數如圖1-8所示。

3.PNG格式

PNG格式支持透明背景，是一種無損壓縮的圖片格式，在保證圖片質量的同時，可以減少文件大小。PNG格式分為PNG-8和PNG-24兩種類型。因為產品圖片一般要求不帶背景，所以PNG格式的文件比較多。使用PNG格式的主圖、海報和首頁應用更方便。PNG格式吸取了GIF和JPEG格式的優點，既支持透明背景又支持多種顏色，是設計圖片時常用的格式之一。該格式的參數如圖1-9所示。

1.1.4　網店美工需要掌握的軟件

1.Photoshop圖像編輯軟件

有些人發布照片時，每一張都是經過精挑細選的，再請修圖師進行美化。我們做產品圖也是一樣，買家看不到實物，只能通過圖片來了解產品，圖片質量直接影響買家的購買率。熟練掌握Photoshop軟件是作為一個網店美工應達到的最基本的要求。

2.Dreamweaver網頁設計軟件

與淘寶首頁和詳情頁關聯的很多效果都是Dreamweaver的功勞，網上也出現了很多輔助軟件來幫助設計師更好地設計自己的頁面。例如，“碼工助手”“和“小語言設計”等。將圖片導入加上鏈接后導出代碼，再復制到首頁上就可以實現很多的功能，幫助了很多設計新手。

3.Premiere視頻制作軟件

淘寶店鋪支持在主圖、首頁和詳情頁中添加視頻。在科技發達的今天，買家可以通過視頻更加直觀地看到自己心儀的產品，對產品的顏色、大小、功能有了更精確的了解后，退貨率會大大降低。Premiere視頻制作軟件可以對視頻進行裁剪、配音、添加字幕等操作，用它可以讓客戶看到更真實的產品。

1.1.5　普通美工和優秀美工的差別

普通的美工和優秀的美工存在什么差別呢？

普通美工：簡單摳圖后，加上背景再加上文字，不注重色彩的搭配和文案的排版，賣點全都放在一起，如圖1-10所示。

優秀美工：摳圖后修圖，背景跟產品有一定的關聯。文案精練有吸引力、色調統一，風格高端大氣，讓買家從心里產生信服感，從而愉快地下單，增加產品銷量，如圖1-11所示。