淘寶商城，賣家的寶貝都很漂亮的展示在首頁。小賣家進不了商城如何把自己店鋪打造的如同商城呢？今天淘寶學堂地瓜就和大家來分享一下如何制作寶貝櫥窗式展示圖，讓你的店鋪瞬間變身華麗商城。
淘寶商城只所以吸引人就是因為顯得大氣。大氣的網店裝修不僅可以讓買家的停留時間加長，而且買家也會更加信任你的店鋪，覺得店鋪做的這么漂亮，店家肯定很正規，從而增加信任感，從而提高成交轉換率。既然我們舍不得花錢請專業的網店裝修設計師來幫我們設計網店，那么為何我們不自己動手制作寶貝櫥窗式展示圖呢？下面淘寶學堂跟大家一起學習如何制作寶貝櫥窗式展示圖。
先給大家看下寶貝櫥窗式展示圖整體效果吧。你可以做好多這樣的條，然后把代碼粘帖到自定義里，這樣就有好多排 ，很是漂亮哦。
第1節，首先你需要把要進行櫥窗展示的寶貝，先做成這樣的小塊。這個步驟的目的是把各個寶貝做成同寬高的大小，方便下一步作圖。第一步完成是這樣的。
第2節，然后再把他加上文字說明，標題和價格啦。第2節完成是這樣的
第3節，寶貝都做成這樣的后，就可以進行大整合了。最終圖片完成是這樣的。
首先你先要確定好你一排做幾個櫥窗寶貝，確定他們之間的間距，才可以確定小方塊，的寬度和高度。是不是會算的有點暈呢，先不想這么多，你可以拿我的帖子練習一番，之后你要多寬多高就也好算了。
我的是拓展版，我要做950寬的，親們如果是標準版的話就做750寬的哈，算好了就。我是一排放4個寶貝，兩邊，還有四個寶貝這間的三條間隔，我需要50像素的位置做間隔（也就是留白哈），950減50，還剩下900給寶貝，900除以4，每個寶貝寬度225，。這樣我的小方塊的寬度就是225了。高度可隨意，個人覺得225寬，300高是比較美觀的。
下面我們來完成如何制作寶貝櫥窗式展示圖第一節，
首先，點文件—新建，新建一個空白文檔，寬225，高300，你可以命名為小方塊模板
再打開一張寶貝圖片。把它拖動小方塊模板這個文檔里。然后按CTRL+T鍵，調整大小及位置。調整好后按ENTER鍵確定。然后另存為JPEG格式的圖片。可以改名為1號寶貝，方便識別
至此一個小方塊完成了，你把其它寶貝也這樣做。你還需要存一份PSD格式的，這樣可以當模板用，方便日后增加新品時直接用。
下面開始如何制作寶貝櫥窗式展示圖第二節
前面的小方塊，是225寬，300高的，這次的大方塊，也是225寬，但高必需大于300，留出位置做寶貝標題及價格說明。我這里做225寬，380高，比較合適。
新建一個225寬，380高的文檔，取名為大方塊模板。
接下來我們需要新建參考線，上面是要小方塊寶貝，下面要放標題及價格。第一條參考線的高度就是小方塊的高度，也就是300，先做水平的，第一條參考線300，第二條310，這處是為了美觀空出來的，還剩70哈，分為兩塊，一塊是寶貝標題，一塊是價格，所以第四條是345。
不知道如何新建參考線？
視圖—新建參考線。之后會彈出一個窗口，要你選擇水平或者垂直的，有個數字框，你可以在里面填上參考線的位置。
參考線建好了，這里我給大家看一下框架，哪里放什么，大家好有個數，清楚為什么要這些參考線。
下面來做一下放標題和價格的那塊。選擇距型選框工具，把放價格和標題的位置全框選起來，再新建一個圖層。圖層命名為價格及標題背景色。再按ALT+BACKSPACE鍵，填寫充前景色。之后再按CTRL+D鍵，取消選區
下面要建一條垂直參考線了，位置為113，正中間的位置。
再選擇距型選框工具，這回需要調下他的樣式，樣式為等比例?？蛞粋€小框，然后新建一個圖層，命名，小尖頂。再按CTRL+BACKSPACE鍵填充背景色。注意這里是填背景色。再按CTRL+D鍵取消選區，然后再按CTRL+T鍵，調整那個小尖頂圖層的位置，噢，要注意的是，你調整時還得按住CTRL鍵調整，這樣方塊不會變形。是等比例縮小或放大的，使其四方形的一角剛好落在在中間的參考線上，并且這個角要伸出到空白的位置一點，注意也不要頂到放寶貝的那塊，留一點點。
將“小尖頂”圖層和“標題加價格背景”圖層合并，按CTRL鍵，選中這兩個圖層，然后右擊選擇合并圖層，不是合并可見圖層哈，那樣會將全部圖層合并的。不需要那么做的哈。合并后它的名字變成了小尖頂，一般合并后都是以之前最上面的圖層命名的。
OK，現在我們來調小尖頂圖層的顏色，還有描邊，雙擊小尖頂圖層。
選擇“顏色疊加”，混合顏色為“正常”，再點那個色塊，選顏色，我們選白色。再選擇描邊，大小為1，位置為內部，混合模式正常，透明度100%，再點擊色塊那，咱們要灰色的。當然您可以根據自己的喜好，選擇顏色。
我去除一下參考線給您看下效果哈，您不用做這步的。
下面來做寶貝標題的背景。用距型選框工具，之前好象調了樣式為固定大小，這次要調回來的哈。調成正常?？虺瞿菈K后，新建一個圖層，命名寶貝標題背景，按ALT+BACKSPACE鍵，填充前景色，CTRL+D取消選區。你可以事先將前景色，設成你想要的寶貝標題那塊的顏色，不過之前沒調也不要緊，你可以雙擊圖層那來調的。我這里選淡玫紅色，寶貝的衣服，粉粉的，可愛點
再打開之前做好的小方塊圖片，就是這個啦，然后把寶貝拖到這大方塊這，調整好位置，上面有留他的位置的哈，別越界。
放上寶貝圖片后，把這個寶貝圖片圖層加上一下描邊哈，距離1，混合模式為內部，再在下面，白色處打上寶貝價格，紅色處打上寶貝的標題。完成后是這樣的。
然后存儲為JPEG格式，這里我命名1號寶貝大方塊。并且存一份PSD格式的。作為模板。然后你把其它寶貝也這樣做，你完全可以打開剛剛存儲的PSD格式的模板，只需要再打開一張寶貝圖，把寶貝疊加上去，然后改下文字部分及價格，、不需要這第2節全部重復。存為JPEG后是這樣的。
把你需要做櫥窗展示的寶貝成完第2節后。就可以做第3節了。
如何制作寶貝櫥窗式展示圖第3節
之前說過我是拓展版，950的寬，兩旁加四個寶貝中間3個間隔，一共5個空位，每個10象素，剛剛第2節的大方塊高度是380，我們需要新建一個寬950，高400的文檔，因為上面和下面都要留10象素。
好了，開始，
新建950*400的文檔，再新建兩條水平參考線，距離分別為10和390，再來新建8條垂直參考線，位置依次為，10，235，245，470，480，705，715，940。這次就不載如何新建參考線的圖了哈，大家看前面的。
建完參考線后是這樣的。
咱們現在把寶貝依次放上來，看我看的位置放的哈，不要放到留白處哈。
圖片部分完成是這樣的。
當然你可以自由發揮想象，不一定要這么規規矩矩的一排四塊的框架。例如也可以這樣。
下面為講下圖片切片，上傳至圖片空間，然后添加寶貝鏈接，復制代碼粘帖到自定義那。之后發布，就大功告成了。這里需要用到DREAMWEAVER，這個軟件。
首先在PS里將剛剛做好的整體圖片進行切片。
切4塊哈，一定切好，之前留白處一起切進去，不用單獨切的。下面我用截圖工具框給大家看下哈，你們切片時邊框不是紅的哈，我這是為了讓大家更清楚些，而截圖框的。
切片完后，存儲為WEB和設備所用格式，大之后彈出的窗口中，保存格式一定要是HTML和圖片。這樣會生存一個圖片夾和一個網頁文件。
接下來就要用到DEARMWEAVER這個工具了。當然你得先安裝下這個軟件哈。找到之前你存存儲“存為WEB和設備所用格式”的兩個文件。把IMAGE文件夾里的圖片全部上傳到圖片空間，然后再找到另一個網頁文件，右鍵點擊鼠標，選擇打開方式，然后選擇DREAMWEAVER。
點設計模式，再把圖片空間的圖片復制下鏈接，“源文件”處放圖片鏈接，“鏈接“處放寶貝鏈接，然后四塊圖片都要放上寶貝鏈接和圖片鏈接的哈，你要放哪個的要點下哪個，不然你會無從下手的。
現在進入店鋪裝修，添加一個寶貝自定義，然后打開，點代碼模式，粘帖了剛剛復制的代碼，保存，再發布店鋪，大功告成。
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源： 如何制作寶貝櫥窗式展示圖（超詳細圖文教程）
