Photoshop+Dreamweaver淘寶天貓網店美工與廣告設計一本通 : 實戰版
創銳設計編著
寫在處理之前
網店裝修是指對網店頁面進行美化和裝飾設計，進而達到提高網店商品轉化率的目的。在進行網店裝修之前，我們需要先了解網店裝修的重要性、網店裝修背景的基本操作、網店裝修的常用工具、網店裝修的主要視覺元素、網店裝修的工作流程等，以便在實際的裝修過程中提高工作效率，達到事半功倍的效果。
也許有人會問，網店不裝修可以賣東西嗎？當然，現在很多電商平台都提供網店裝修模闆，賣家可以直接使用，無需額外裝修就能賣東西。但是，這些裝修模闆往往千篇一律，很難展現特色，是以，還是會有很多賣家想盡一切辦法将自己的網店裝修得更加漂亮，以在衆多網店中脫穎而出，獲得更好的客源和更高的轉化率。
這些賣家之是以如此重視網店裝修，是因為網購具有一定的特殊性。在實體店，消費者可以通過看、嘗、摸、聞、聽去感覺實物；而在網店中，買家隻能通過看頁面中的視訊、圖檔和文字來了解商品。是以，網店裝修就顯得尤為重要。總體來說，網店裝修是為了達到讓網店頁面更美觀、吸引更多眼球、提升轉化率等多種目的，如下圖所示。
下面通過對比兩家網店的頁面，直覺地感受一下網店裝修的作用。如下左圖所示的網店對店招、導覽列、促銷廣告、商品分類等進行了藝術化設計，使得商品與頁面整體風格形成視覺上的統一，更能吸引買家的注意，博得買家的好感；如下右圖所示的網店則采用了電商平台最基本的裝修設定，并沒有做額外設計，給人的感覺是單調、簡陋，買家很難對這樣的網店産生信任感。
接下來再選擇兩家網店風格和價格都比較相近的兩款商品進行比較。下一圖所示為裝修過的網店的商品，下二圖所示為未裝修的網店的商品，從圖中可以看到，裝修過的網店的商品，其交易數量、收藏人氣和評論數都比未裝修過的網店的商品高很多。由此可見，網店裝修是促進商品銷售的重要因素。
在進行網店裝修之前，需要對網店裝修背景的一些常用操作有一定了解，如設定并應用預設模闆、添加頁面及自定義子產品等。下面以淘寶為例進行講解。
1．上傳圖檔到圖檔空間
裝修網店之前，首先要做的就是将裝修需要用到的圖檔上傳到圖檔空間。淘寶有專門的圖檔空間來存儲和管理裝修圖檔。登入賣家背景管理中心，單擊“店鋪管理”下方的“圖檔空間”，即可進入圖檔管理頁面，單擊“上傳”按鈕，如下一圖所示，彈出“上傳圖檔”對話框，可以直接将圖檔拖動到對話框中間位置，也可以單擊“上傳”進行上傳，如下二圖所示。
上傳完成後，頁面中會顯示上傳後的檔案或檔案夾，選中檔案或檔案夾，可以單擊“重命名”按鈕，對上傳的檔案或檔案夾進行重命名操作，如下圖所示。在此頁面中單擊“删除”按鈕，可以删除已經上傳的檔案或檔案夾。
2．頁面布局管理
頁面布局管理是對頁面整體結構的調整，包括店鋪招牌（店招）、導航和頁尾等，這也是進入網店裝修進行子產品添加的一個最基本的操作。登入賣家背景管理中心，找到并單擊“店鋪裝修”，如下一圖所示，進入網店裝修背景頁面，根據需要選擇要裝修的頁面是手機端還是PC端，然後單擊“裝修頁面”按鈕，如下二圖所示。
進入下一級裝修背景頁面，在頁面中先單擊“首頁”右側的下拉按鈕，然後選擇要裝修的頁面，如店内搜尋頁、詳情頁或個性化裝修頁面等。標明裝修頁面後，單擊“布局管理”按鈕，如下一圖所示，進入“布局管理”頁面，顯示預設的頁面布局效果，如下二圖所示。
如果需要向頁面添加新布局樣式，單擊頁面中的“添加布局單元”按鈕，如下一圖所示，在彈出的對話框中單擊選擇想要的布局結構，如下二圖所示。
添加新的布局單元後，在頁面左側單擊選擇相應的子產品，将其拖動到添加的布局單元中，如下左圖所示，即可完成頁面的重新布局，如下右圖所示。如果需要删除布局單元，則單擊布局單元右側的删除按鈕。
3．應用模闆快速裝修網店
為了便于賣家快速完成基本的網店裝修工作，電商平台通常會提供一些裝修模闆。淘寶平台提供的裝修模闆有簡約時尚官方模闆、動感紅官方模闆、收費店鋪官方模闆三套。淘寶賣家都是在這幾套模闆的基礎上進行網店裝修的，其中絕大部分的淘寶網店裝修特效模闆代碼，如全屏海報代碼、輪播代碼、卡盤代碼等，都是基于簡約時尚官方模闆制作出來的。
進入網店裝修背景，單擊頂部導航欄中的“模闆管理”按鈕，如下左圖所示，進入“模闆管理”頁面，滾動滑鼠滾輪，在下方的“可用的模闆”區域中單擊選擇要應用的裝修模闆，然後單擊“馬上使用”按鈕，如下右圖所示，就可以應用所選模闆快速裝修網店。
4．添加自定義子產品
電商平台提供的裝修模闆的風格并不總能比對網店的整體形象或商品的特質，如果使用預設的裝修模闆不能達到理想的裝修效果，就需要使用自定義裝修子產品。
進入網店裝修背景，然後單擊左側的“自定義區”子產品，将其拖動到右側頁面區中合适的位置，當出現“松開滑鼠，子產品會放到這裡”的提示文字時，如下左圖所示，釋放滑鼠，即可插入一個新的自定義子產品，如下右圖所示。
添加自定義子產品後，子產品右上角會顯示“編輯”“删除”“添加子產品”等按鈕。單擊“編輯”按鈕，将彈出如下左圖所示的“自定義内容區”對話框，在對話框中定義子產品背景
色、圖檔和文本等。如果已經使用Dreamweaver編輯好裝修代碼，則可以單擊“源碼”按鈕，将代碼複制、粘貼到代碼編輯區，單擊“确定”按鈕以完成裝修，如下右圖所示。
5．選擇合适的預設裝修配色
不同的顔色能帶給人不同的感受。例如，藍色能使人聯想到科技、幹淨和理性；紫色能使人聯想到神秘及高貴；綠色能使人聯想到自然與生機等。淘寶為賣家提供了幾種配色方案，大家可以根據所銷售商品的特點選擇合适的配色方案。
進入網店裝修背景，單擊左側的“配色”選項，在右側即顯示系統提供的幾種配色方案，隻需要單擊某個配色方案，如下左圖所示，就能快速更改網店的整體裝修配色，更改後的效果如下右圖所示。
6．更改頁面背景圖
很多新手賣家總覺得自己的網店裝修效果太過單調，其原因之一就是頁面背景效果欠佳。此時可以通過裝修背景為頁面設定更美觀的背景圖。網店裝修背景圖通常都要經過一定的設計，可以通過摳取及合成等後期處理手段進行美化，使其與商品和網店整體裝修風格形成更統一的視覺效果。
單擊網店裝修背景左側的“頁面”選項，如下左圖所示，在右側先取消勾選“頁面背景色”右側的“顯示”複選框，如下中圖所示，再單擊“更換圖”按鈕，如下右圖所示。
打開“打開”對話框，在對話框中選擇需要應用的背景圖，然後單擊“打開”按鈕，如下一圖所示，再設定背景顯示方式和對齊方式，如下二圖所示，更換背景後的網店裝修預覽效果如下三圖所示。
在進行網店裝修時，常常需要使用一些軟體對裝修的素材進行優化或美化，如圖檔處理和網頁架構設計等。網店裝修中比較常用的兩個軟體是Photoshop和Dreamweaver，下面就來簡單認識一下這兩個軟體。
1．Photoshop
Photoshop是Adobe公司開發的圖像處理軟體，它的專長是處理以像素構成的位圖圖像，包括編輯加工、校色調色、添加特效、摳圖與合成等。
在計算機中安裝好Photoshop軟體後，輕按兩下桌面上的快捷方式圖示即可啟動軟體。啟動軟體後可以看到界面由菜單欄、工具選項欄、工具箱、面闆等幾大部分組成。Photoshop界面的各組成部分及功能介紹如下圖和下表所示。
2．Dreamweaver
在網店裝修背景進行編輯時，我們會看到很多的源代碼。如果需要對模闆進行重構，可以在Dreamweaver裡對模闆的代碼進行編輯。
Dreamweaver是一款“所見即所得”的網頁編輯工具，是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯同步的設計工具，利用其可以輕而易舉地制作出跨越平台和浏覽器限制的充滿動感的網頁。進行網店裝修時，應用Dreamweaver對頁面進行編排，可以建立具有網店自身特色的裝修頁面。Dreamweaver工作界面的各組成部分及其功能介紹如下圖和下表所示。
前面提到過，相對于實體店來說，網店最大的局限是隻能讓買家通過視訊、圖檔和文字了解所售商品，是以，網店裝修最重要的就是視覺效果。視覺效果代表着網店的門面，其中顔色、文字和版式是網店裝修的三大視覺要素，隻有合理地規劃這三大要素，才能獲得理想的網店裝修效果。
1．顔色
在浏覽網店頁面時，我們首先會被頁面中的顔色所吸引，再根據顔色的走向，對網店中的商品進行更深層次的了解。是以，配色是樹立網店形象的關鍵。頁面的配色處理得當，能給人和諧、愉快的視覺感受，可以進一步提高商品的轉化率。網店裝修中使用的顔色可分為主色、輔助色和強調色三類，下面分别講解它們的概念和作用。
主色是指展示網店形象和延伸其内涵的色調。主色主要用于網店标志、标題和主菜單等，給人以整體統一的感覺。主色好比一部電影的主角，串聯起整部電影的主線，應該比其他搭配顔色更明顯、清楚、強烈，以給人留下深刻的印象。但要注意的是，在一個網店的裝修中使用的主色不宜超過3種，否則極易讓人眼花缭亂。如下左圖所示的網店頁面以紅色作為主色，通過調整紅色的透明度和飽和度，營造出熱烈、喜慶的氛圍；如下右圖所示的網店頁面則選擇了象征智慧、科技的藍色作為主色，給人以穩重、冷靜、嚴謹的感受。
輔助色是頁面中僅次于主色的顔色，它的主要作用是烘托主色，支援和融合主色。輔助色與主色一樣，也可以有一個或多個顔色，要根據網店裝修風格和商品特點來選擇與搭配。
如果在網店頁面中整體采用統一的主色和輔助色進行搭配，那麼可以在頁面的一小塊面積上使用強烈的顔色，即強調色。強調色使用的面積越小，顔色越鮮豔，起到的強調作用就越明顯。因為強調色所占據的面積較小，是以無論是多麼鮮豔的顔色，也不會影響整個網店的裝修風格。
2．文字
文字的編排在網店裝修中有着舉足輕重的地位。優秀的文字編排會給浏覽者帶來良好的閱讀情緒，進而使其能夠進行深入的閱讀。是以在編排文字時，要遵循一定的規則，使頁面資訊的傳播度最大化，使商品的轉化率得到較大的提高。總體來說，文字的編排規則包含三個部分：其一是文字編排的準确性；其二是段落排列的易讀性；其三則是整體布局的審美性。
文字編排的準确性不僅僅是指文字所表達的資訊要滿足主題内容的要求，而且還要求整體排列風格要符合設計對象的形象。隻有當文字内容與排列樣式都達到畫面主題的标準時，才能保證文字準确地傳達相關的資訊。
如下圖所示，頁面中的圖檔内容與文字資訊在邏輯上存在一定的關聯性，同時通過準确的文字叙述對商品的材質特點進行了更加全面的介紹。
網店頁面中的文字還應該易于識别，即具有易讀性。在實際的文字編排過程中，文字的字型、字距和行距等都可能影響文字的易讀性。是以，在進行網店裝修時，可以根據畫面的需要，通過調整文字的字型及增大或縮小間距等方式來增強文字的易讀性，給買家以順暢的閱讀感受。
如下圖所示的優惠券，通過将版面中的部分文字設定為大号字型，并配以适當的間距，使其易讀性得到了顯著提高，同時也便于買家更加直覺地了解優惠券的優惠額度和使用要求等資訊。
文字的審美性是指文字編排在視覺上的美觀度。在實際的裝修過程中，為了滿足編排設計的審美性，可以對字型本身添加一些帶有藝術性的設計元素，如建立連體字、立體字效果等，從字型結構上增加其美感。
如下圖所示的輪播廣告圖對主體文字的字型結構和筆畫進行了有規則的改造，使其在外觀上呈現出了特定的圖形效果，提高了畫面整體的藝術性和美觀性。
3．版式
網店裝修中的版面布局是讓頁面脫穎而出的關鍵。是以，進行網店裝修時，除了要考慮頁面的顔色和文字編排方式外，還應當考慮整個頁面的視覺流程，即版面布局對買家的視覺引導，指引買家視線的關注範圍和方位。清晰明确的視覺流程，不但可以增加買家在頁面中的停留時間，還可以提高頁面整體的美觀性。
網店裝修中比較常用的視覺流程有單向型和曲線型兩種。單向視覺流程也稱為線性視覺流程，它又可以分為橫向視覺流程、縱向視覺流程和斜向視覺流程。橫向視覺流程也稱為水準視覺流程，是最符合人們閱讀習慣的視覺流程，其通過版面各個元素的依次排列，引導觀者的視線在水準線上左右來回移動。橫向視覺流程在歡迎子產品和促銷廣告中應用較多。下圖所示的頁面即從左至右依次展示了不同茶具的尺寸大小。
縱向視覺流程也稱為垂直視覺流程。縱向視覺流程是将版面中的元素在垂直方向上進行編排，讓觀者的主要視線在頁面的垂直方向上移動。該視覺流程常用于較為簡潔的版面中，不僅能起到穩固畫面的作用，還能為觀者帶來穩妥與堅定的心理感受。如右圖所示的頁面将各個元素基于頁面的中軸線進行合理的編排，産生了一種縱向的視覺流程，讓觀者感受到頁面整體的堅定與和諧。
斜向視覺流程是指通過将版面中的圖檔或文字進行斜向排列，引導觀者的視線從左上角移動到右下角或從右上角移動到左下角。此類畫面具有相對的不穩定性，是以會産生強烈的運動感和視覺吸引力，能更自然輕松地引導觀者的視線和注意力。下圖所示的頁面通過文字和圖檔的方向引導觀者的視線，如此既能賦予畫面一定的動感，也能從側面反映出鞋子的舒适性。
除了單向視覺流程，曲線視覺流程也是網店裝修中運用較多的一種版面布局方式。曲線視覺流程是将頁面中的圖檔和文字等元素，以S形或O形等曲線形态排列，使觀者的視線随曲線移動。曲線視覺流程不但能使版面看起來飽滿而靈活多變，還能讓人從中感受到優雅的動态美。
右圖所示的頁面即采用了S形曲線視覺流程，将商品發貨及售後處理流程置于S形曲線上，如此不但使得版面的上下和左右達到了相對平衡的效果，而且也讓畫面的視覺空間效果顯得更加靈動和活潑。
無論做什麼事，都有一個“先做什麼，再做什麼，最後做什麼”的順序，網店裝修也是如此。按照下面的流程進行網店裝修，可以減少工作失誤，提高工作效率，得到理想的工作效果。
1．收集并整理裝修素材
裝修網店前，首先需要收集相關素材，如拍攝的商品照片、視訊及其他一些裝修中需要使用的素材等。将收集到的素材通過檔案夾分門别類地存放，以便在裝修過程中快速調用。
2．在Photoshop中設計頁面
準備好素材後，就可以啟動Photoshop軟體。在Photoshop中對頁面進行融合設計，對素材圖檔進行修飾、美化和設計，制作出網店的店招、導航、歡迎區及客服區等子產品，如右圖所示，然後存儲處理後的圖像檔案。為友善随時進行修改，在存儲圖像檔案時可以分别存儲為PSD格式和JPG格式。
3．對圖像進行切片處理
完成頁面圖像的設計後，接下來就需要對圖像進行切片。切片可以幫助我們設計和優化單個網頁圖檔或整個頁面布局，并提高頁面的下載下傳速度。為了實作更精細的切片操作，可以先在圖像中建立參考線，如下左圖所示，然後基于參考線建立切片效果，如下中圖所示，再應用“存儲為Web所用格式”指令存儲切片圖像，如下右圖所示。
4．将圖像上傳到圖檔空間
對圖像進行切片優化後，在存儲圖像的檔案夾中将出現一個“images”檔案夾，此檔案夾中包含了所有的切片圖像。打開網店裝修背景，将檔案夾中的切片圖像全部上傳到背景指定的圖檔空間中，以便進行圖像的連結和代碼的制作，如下圖所示。
5．在Dreamweaver中編輯自定義子產品
啟動Dreamweaver軟體，建立一個空白文檔，然後分别制作出網店的店招和頁面自定義裝修子產品的代碼。在制作代碼時，需要通過網店裝修背景，複制圖檔空間的圖像連結和代碼，并利用Dreamweaver調整代碼，如右圖所示。在文檔視窗可以檢視由一張張圖檔組成的頁面效果，如下圖所示。
6．複制代碼完成裝修
進入網店裝修背景，删除多餘的裝修子產品，将制作好的代碼複制并粘貼到相應的裝修子產品編輯區域，最後單擊“釋出”按鈕，釋出裝修後的網店。再次進入網店時，就可以看到裝修後的頁面效果，如下圖所示。