淘寶店鋪首頁(yè)裝修技巧

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

一． 首頁(yè)裝修基礎(chǔ)

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

2.首頁(yè)的裝修有兩個(gè)方法：

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

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

二．首頁(yè)裝修的步驟

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

1.布局劃分籌備工作

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

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

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

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

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

（3）我們將切好的圖片通過(guò)上圖片空間，然后我們打開(kāi)剛才的HTML文件，將店招圖片的地址按照順序替換成圖片空間的地址。將html代碼中的<table>至</table>復(fù)制到店鋪的店招上，并加上我們需要的鏈接。

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

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

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

3.全屏海報(bào)的制作技巧

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

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

原圖

 海報(bào)主體

海報(bào)背景

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

（4）接下來(lái)，我們像之前制作店招一樣，進(jìn)行背景添加操作。操作如下：

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

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

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

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

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

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

5.頁(yè)尾的制作

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

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

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