淘寶首頁裝修的邏輯和步驟，無私奉獻給大家

淘寶首頁裝修技巧

一．      概述

淘寶店鋪裝修，是致力于淘寶鋪裝修的網(wǎng)站。淘寶店鋪裝修與實體店的裝修是一個意思，都是讓店鋪變的更美，更吸引人。對于淘寶店鋪來講，一個好的店鋪設(shè)計更為至關(guān)重要，而首頁則是頁面中的重中之重。一個好的首頁，能清晰地展示推廣寶貝，還能為客戶帶來美的享受，從而增加客戶的信任感，還能樹立起店鋪品牌形象，為店鋪推廣打下堅實的基礎(chǔ)。下面，讓我們來了解下首頁裝修吧。

二．      首頁裝修基礎(chǔ)

1.    在我們裝修店鋪之前，首先我們需要了解，我們的店鋪屬于什么版本。在2012新旺鋪里，把旺鋪版本劃分為：基礎(chǔ)版，專業(yè)版和天貓版。其中基礎(chǔ)版與專業(yè)版是為集市店用戶提供的，基礎(chǔ)版可修改的內(nèi)容與權(quán)限不大，店鋪變化受到限制，為初級賣家簡易使用。專業(yè)版則能提供較大的自由裝修空間，足夠我們店鋪首頁風(fēng)格的實現(xiàn)。而天貓版則是為天貓店鋪提供，功能與專業(yè)版類似。

2.    首頁的裝修有兩個方法：

1)     一是從裝修市場直接購買裝修模板進行裝修，比較簡易。但由于裝修模板是根據(jù)模板設(shè)計師自我感覺進去制作，面向所有用戶。因此很難貼合自己店鋪理想中的風(fēng)格與效果，也會因為設(shè)計師模塊的特定效果，使得店鋪風(fēng)格與品牌形象不明顯，效果差強人意。

2)     二是通過淘寶設(shè)計師為店鋪專門定制首頁，裝修過程相對會比較復(fù)雜。但整個首頁都會完全貼合店鋪，使店鋪風(fēng)格突出，樹立良好的品牌形象。而且寶貝擺放與排布更為自由，更能使風(fēng)格與推廣相輔相成。

三．      首頁裝修的步驟

      在設(shè)計師為我們設(shè)計好店鋪首頁以后，還需要把首頁裝修到我們的店鋪上去，才能達到向客戶展現(xiàn)的效果。以下，讓我們來了解一下首頁裝修的基本步驟吧。

1.    布局劃分籌備工作

（1）我們可以將首頁劃分成：店招，海報，產(chǎn)品寶貝，頁尾，四個部分。并通過PHOTOSHOP的切片工具劃分切片。我們可以使用輔助線進行精準(zhǔn)的劃分。然后，通過“存儲為web所用格式”存儲，我們就得到了四部分獨立起來的圖片。

（2）我們整個首頁可分為主體部分和背景，主體部分的寬度根據(jù)店鋪性質(zhì)的不同而有著差異。一般來說，集市店的主體不可寬度為950像素，而天貓店則為990像素。在后續(xù)裝修中，我們都需要先將主體部分與背景劃分開來，將背景剪裁，留下主體部分，方便進行裝修。

2.    店招切片，上傳與拼接技巧

（1）劃分好模塊以后，我們先從店招開始裝修。通過剪裁，我們得到了店招的主體部分，店招大略可以分為兩部分：店鋪招牌和導(dǎo)航欄部分。導(dǎo)航欄是主要添加加鏈接的地方。我們可以按照加鏈接的需求，對店招進行切片。

（2）完成切片后，我們通過“存儲為web所用格式”進行存儲，將格式選擇為“HTML和圖像”，我們就能得到各模塊獨立的圖片與一個HTML網(wǎng)頁文件了。

（3）我們將切好的圖片通過上圖片空間，然后我們打開剛才的HTML文件，將店招圖片的地址按照順序替換成圖片空間的地址。將html代碼中的

至

復(fù)制到店鋪的店招上，并加上我們需要的鏈接。

（4）完成第三步后，我們就得到了主體部分的店招了，但我們的店招是全屏1920像素的，該怎么辦呢？我們通過背景拼接達到1920像素的全屏效果。在新旺鋪中，店招背景圖片的大小限制為200K以內(nèi)，而1920*150像素的店招，只要我們稍微調(diào)節(jié)下圖片的質(zhì)量，基本上不會超過這個范圍，所以我們可以把整個店招的圖片直接當(dāng)作背景。

操作如下：進入裝修界面，選擇裝修下拉菜單中的樣式管理 ，然后點擊樣式編輯中的“背景設(shè)置” 。

在頁頭設(shè)置選項，將”要設(shè)置的頁面”選項設(shè)置為“所有頁面”，通過“更換圖片”選項將我們做好的店招背景更換上去，再將“背景顯示”選項設(shè)置為“不平鋪”，“背景對齊”選項設(shè)置為“居中”。最后，我們保存一下。我們就能得到1920像素的全屏店招了。

3.    全屏海報的制作技巧

（1）完成店招之后，我們開始制作海報部分。海報是店鋪的眼睛，它能充分展現(xiàn)店鋪的品牌，風(fēng)格與大氣。而全屏海報更能充分的表現(xiàn)出這一特點。而制作全屏海報，我們同樣要先將海報劃分為主體部分與背景，將主體部分上傳到店鋪的自定義模塊，加上我們想要的鏈接。

（2）然后我們進行至關(guān)重要的海報背景拼接。由于全屏海報的圖片會比較大，而背景圖片不能超過200K，所以在制作海報背景時，我們要先將主體部分的內(nèi)容刪除。

（3）由于我們用的背景是整個店鋪的背景。所以，我們需要考慮店招的高度，在事例中，我們店招的高度是150像素。所以，我們需要在海報背景圖片的上方加上150像素的留白，然后進行保存，注意不要超出200K。

（4）接下來，我們像之前制作店招一樣，進行背景添加操作。操作如下：

進入裝修界面，選擇裝修下拉菜單中的樣式管理  ，然后點擊樣式編輯中的“背景設(shè)置” 。在頁面設(shè)置選項，將”要設(shè)置的頁面”選項設(shè)置為“首頁”（這個需要特別注意，否則背景應(yīng)用到所有頁面，影響店鋪展現(xiàn)效果），通過“更換圖片”選項將我們做好的海報背景更換上去，再將“背景顯示”選項設(shè)置為“不平鋪”，“背景對齊”選項設(shè)置為“居中”。最后，我們保存一下。我們就能得到1920像素的全屏海報了。在制作全屏海報的過程中，可能會出現(xiàn)1-2像素的細微錯位，我們可以按照全屏海報的拼接效果，對海報背景進行微調(diào)。

4.    產(chǎn)品寶貝的切片與加鏈接技巧

完成了全屏海報后，表示我們的裝修已經(jīng)攻克了最困難的問題了。接下來的部分，我們只需要將產(chǎn)品寶貝模塊進行切片上傳以及加鏈接就可以了。以下，讓我們來了解下產(chǎn)品寶貝的切片技巧吧。

在開始之前，我們同樣要先將我們之前切好的產(chǎn)品寶貝主體部分提取出來。在產(chǎn)品寶貝模塊中，我們的寶貝擺放可能會分成幾個甚至十幾個不同的小區(qū)塊。例如，熱銷區(qū)，新品區(qū)，T恤區(qū)，連衣裙區(qū)等等。我們可以先將這些小區(qū)塊分別切出來，然后再按需求，對小區(qū)塊進行切片。

在切片的時候，我們一般會將標(biāo)題獨特切出，然后再針對寶貝的不同排布位置，進行切片操作，在切片時，我們可以運用參考先輔助進行。而切片的基本原則是，切片盡量簡單，避免過于復(fù)雜的切片。

切片完成后，我們將切好的圖片上傳到圖片空間上，然后我們打開剛才的HTML文件，將店招圖片的地址按照順序替換成圖片空間的地址。將html代碼中的選取內(nèi)容部分復(fù)制到新建的“自定義模塊”中，并加上相應(yīng)的寶貝鏈接。在每一個小區(qū)塊上傳的過程中，我們可以在圖片空間新建不同的文件夾存放圖片，方便日后的圖片管理。而每個小區(qū)塊代碼,可以用獨立的自定義模塊，以方面日后修改管理。

5.    頁尾的制作

首頁的制作已經(jīng)進入尾聲了，只要進行頁尾的最后制作，我們整個首頁就會完成。頁尾的制作跟之前寶貝的切片差別不大，我們只需要把我們需要加鏈接的模塊，按位置切片，將完成的切片上傳到圖片空間上，并將代碼上傳到預(yù)設(shè)好的頁尾模塊中去，加上我們呢的鏈接就可以了。這里需要注意的是，我們在放置代碼的時候，一定要記得放置在頁尾模塊中，否則其他頁面將顯示不了店鋪的頁尾，而頁面模塊的標(biāo)示很明顯。

經(jīng)過以上的介紹，相信大家對首頁的裝修已經(jīng)有了一定的了解。我們只需要通過：布局劃分籌備，全屏店招制作，全屏海報制作，寶貝的切片和頁尾的制作。我們就能完成一個完成自定義的個性首頁。

其實首頁裝修并非我們中那么深奧復(fù)雜，只需要我們有一定的Photoshop基礎(chǔ)，以及足夠的耐心與細心。我們就能將首頁按照我們的想法裝修得美輪美奐，為我們的店鋪換上適合自己，風(fēng)格強烈的新衣。