淘寶商城，賣家的寶貝都很漂亮的展示在首頁。小賣家進不了商城如何把自己店鋪打造的如同商城呢？今天淘寶學(xué)堂地瓜就和大家來分享一下如何制作寶貝櫥窗式展示圖，讓你的店鋪瞬間變身華麗商城。

淘寶商城只所以吸引人就是因為顯得大氣。大氣的網(wǎng)店裝修不僅可以讓買家的停留時間加長，而且買家也會更加信任你的店鋪，覺得店鋪做的這么漂亮，店家肯定很正規(guī)，從而增加信任感，從而提高成交轉(zhuǎn)換率。既然我們舍不得花錢請專業(yè)的網(wǎng)店裝修設(shè)計師來幫我們設(shè)計網(wǎng)店，那么為何我們不自己動手制作寶貝櫥窗式展示圖呢？下面淘寶學(xué)堂跟大家一起學(xué)習(xí)如何制作寶貝櫥窗式展示圖。

先給大家看下寶貝櫥窗式展示圖整體效果吧。你可以做好多這樣的條，然后把代碼粘帖到自定義里，這樣就有好多排 ，很是漂亮哦。

第1節(jié)，首先你需要把要進行櫥窗展示的寶貝，先做成這樣的小塊。這個步驟的目的是把各個寶貝做成同寬高的大小，方便下一步作圖。第一步完成是這樣的。

第2節(jié)，然后再把他加上文字說明，標題和價格啦。第2節(jié)完成是這樣的

第3節(jié)，寶貝都做成這樣的后，就可以進行大整合了。最終圖片完成是這樣的。

首先你先要確定好你一排做幾個櫥窗寶貝，確定他們之間的間距，才可以確定小方塊，的寬度和高度。是不是會算的有點暈?zāi)兀炔幌脒@么多，你可以拿我的帖子練習(xí)一番，之后你要多寬多高就也好算了。

我的是拓展版，我要做950寬的，親們?nèi)绻菢藴拾娴脑捑妥?50寬的哈，算好了就。我是一排放4個寶貝，兩邊，還有四個寶貝這間的三條間隔，我需要50像素的位置做間隔（也就是留白哈），950減50，還剩下900給寶貝，900除以4，每個寶貝寬度225，。這樣我的小方塊的寬度就是225了。高度可隨意，個人覺得225寬，300高是比較美觀的。

下面我們來完成如何制作寶貝櫥窗式展示圖第一節(jié)，

首先，點文件—新建，新建一個空白文檔，寬225，高300，你可以命名為小方塊模板

再打開一張寶貝圖片。把它拖動小方塊模板這個文檔里。然后按CTRL+T鍵，調(diào)整大小及位置。調(diào)整好后按ENTER鍵確定。然后另存為JPEG格式的圖片。可以改名為1號寶貝，方便識別

至此一個小方塊完成了，你把其它寶貝也這樣做。你還需要存一份PSD格式的，這樣可以當模板用，方便日后增加新品時直接用。

下面開始如何制作寶貝櫥窗式展示圖第二節(jié)

前面的小方塊，是225寬，300高的，這次的大方塊，也是225寬，但高必需大于300，留出位置做寶貝標題及價格說明。我這里做225寬，380高，比較合適。

新建一個225寬，380高的文檔，取名為大方塊模板。

接下來我們需要新建參考線，上面是要小方塊寶貝，下面要放標題及價格。第一條參考線的高度就是小方塊的高度，也就是300，先做水平的，第一條參考線300，第二條310，這處是為了美觀空出來的，還剩70哈，分為兩塊，一塊是寶貝標題，一塊是價格，所以第四條是345。

不知道如何新建參考線？

視圖—新建參考線。之后會彈出一個窗口，要你選擇水平或者垂直的，有個數(shù)字框，你可以在里面填上參考線的位置。

參考線建好了，這里我給大家看一下框架，哪里放什么，大家好有個數(shù)，清楚為什么要這些參考線。

下面來做一下放標題和價格的那塊。選擇距型選框工具，把放價格和標題的位置全框選起來，再新建一個圖層。圖層命名為價格及標題背景色。再按ALT+BACKSPACE鍵，填寫充前景色。之后再按CTRL+D鍵，取消選區(qū)

下面要建一條垂直參考線了，位置為113，正中間的位置。

再選擇距型選框工具，這回需要調(diào)下他的樣式，樣式為等比例。框一個小框，然后新建一個圖層，命名，小尖頂。再按CTRL+BACKSPACE鍵填充背景色。注意這里是填背景色。再按CTRL+D鍵取消選區(qū)，然后再按CTRL+T鍵，調(diào)整那個小尖頂圖層的位置，噢，要注意的是，你調(diào)整時還得按住CTRL鍵調(diào)整，這樣方塊不會變形。是等比例縮小或放大的，使其四方形的一角剛好落在在中間的參考線上，并且這個角要伸出到空白的位置一點，注意也不要頂?shù)椒艑氊惖哪菈K，留一點點。

將“小尖頂”圖層和“標題加價格背景”圖層合并，按CTRL鍵，選中這兩個圖層，然后右擊選擇合并圖層，不是合并可見圖層哈，那樣會將全部圖層合并的。不需要那么做的哈。合并后它的名字變成了小尖頂，一般合并后都是以之前最上面的圖層命名的。

OK，現(xiàn)在我們來調(diào)小尖頂圖層的顏色，還有描邊，雙擊小尖頂圖層。

選擇“顏色疊加”，混合顏色為“正常”，再點那個色塊，選顏色，我們選白色。再選擇描邊，大小為1，位置為內(nèi)部，混合模式正常，透明度100%，再點擊色塊那，咱們要灰色的。當然您可以根據(jù)自己的喜好，選擇顏色。

我去除一下參考線給您看下效果哈，您不用做這步的。

下面來做寶貝標題的背景。用距型選框工具，之前好象調(diào)了樣式為固定大小，這次要調(diào)回來的哈。調(diào)成正常。框出那塊后，新建一個圖層，命名寶貝標題背景，按ALT+BACKSPACE鍵，填充前景色，CTRL+D取消選區(qū)。你可以事先將前景色，設(shè)成你想要的寶貝標題那塊的顏色，不過之前沒調(diào)也不要緊，你可以雙擊圖層那來調(diào)的。我這里選淡玫紅色，寶貝的衣服，粉粉的，可愛點

再打開之前做好的小方塊圖片，就是這個啦，然后把寶貝拖到這大方塊這，調(diào)整好位置，上面有留他的位置的哈，別越界。

放上寶貝圖片后，把這個寶貝圖片圖層加上一下描邊哈，距離1，混合模式為內(nèi)部，再在下面，白色處打上寶貝價格，紅色處打上寶貝的標題。完成后是這樣的。

然后存儲為JPEG格式，這里我命名1號寶貝大方塊。并且存一份PSD格式的。作為模板。然后你把其它寶貝也這樣做，你完全可以打開剛剛存儲的PSD格式的模板，只需要再打開一張寶貝圖，把寶貝疊加上去，然后改下文字部分及價格，、不需要這第2節(jié)全部重復(fù)。存為JPEG后是這樣的。

把你需要做櫥窗展示的寶貝成完第2節(jié)后。就可以做第3節(jié)了。

如何制作寶貝櫥窗式展示圖第3節(jié)

之前說過我是拓展版，950的寬，兩旁加四個寶貝中間3個間隔，一共5個空位，每個10象素，剛剛第2節(jié)的大方塊高度是380，我們需要新建一個寬950，高400的文檔，因為上面和下面都要留10象素。

好了，開始，

新建950*400的文檔，再新建兩條水平參考線，距離分別為10和390，再來新建8條垂直參考線，位置依次為，10，235，245，470，480，705，715，940。這次就不載如何新建參考線的圖了哈，大家看前面的。

建完參考線后是這樣的。

咱們現(xiàn)在把寶貝依次放上來，看我看的位置放的哈，不要放到留白處哈。

圖片部分完成是這樣的。

當然你可以自由發(fā)揮想象，不一定要這么規(guī)規(guī)矩矩的一排四塊的框架。例如也可以這樣。

下面為講下圖片切片，上傳至圖片空間，然后添加寶貝鏈接，復(fù)制代碼粘帖到自定義那。之后發(fā)布，就大功告成了。這里需要用到DREAMWEAVER，這個軟件。

首先在PS里將剛剛做好的整體圖片進行切片。

切4塊哈，一定切好，之前留白處一起切進去，不用單獨切的。下面我用截圖工具框給大家看下哈，你們切片時邊框不是紅的哈，我這是為了讓大家更清楚些，而截圖框的。

切片完后，存儲為WEB和設(shè)備所用格式，大之后彈出的窗口中，保存格式一定要是HTML和圖片。這樣會生存一個圖片夾和一個網(wǎng)頁文件。

接下來就要用到DEARMWEAVER這個工具了。當然你得先安裝下這個軟件哈。找到之前你存存儲“存為WEB和設(shè)備所用格式”的兩個文件。把IMAGE文件夾里的圖片全部上傳到圖片空間，然后再找到另一個網(wǎng)頁文件，右鍵點擊鼠標，選擇打開方式，然后選擇DREAMWEAVER。

點設(shè)計模式，再把圖片空間的圖片復(fù)制下鏈接，“源文件”處放圖片鏈接，“鏈接“處放寶貝鏈接，然后四塊圖片都要放上寶貝鏈接和圖片鏈接的哈，你要放哪個的要點下哪個，不然你會無從下手的。

現(xiàn)在進入店鋪裝修，添加一個寶貝自定義，然后打開，點代碼模式，粘帖了剛剛復(fù)制的代碼，保存，再發(fā)布店鋪，大功告成。

樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進貨渠道。超市進貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則

本文來源： 如何制作寶貝櫥窗式展示圖（超詳細圖文教程）