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