淘宝店铺装修，是致力于淘宝铺装修的网站。淘宝店铺装修与实体店的装修是一个意思，都是让店铺变的更美，更吸引人。对于淘宝店铺来讲，一个好的店铺设计更为至关重要，而首页则是页面中的重中之重。一个好的首页，能清晰地展示推广宝贝，还能为客户带来美的享受，从而增加客户的信任感，还能树立起店铺品牌形象，为店铺推广打下坚实的基础。下面，让我们来了解下首页装修吧。

一． 首页装修基础

1.在我们装修店铺之前，首先我们需要了解，我们的店铺属于什么版本。在2012新旺铺里，把旺铺版本划分为：基础版，专业版和天猫版。其中基础版与专业版是为集市店用户提供的，基础版可修改的内容与权限不大，店铺变化受到限制，为初级卖家简易使用。专业版则能提供较大的自由装修空间，足够我们店铺首页风格的实现。而天猫版则是为天猫店铺提供，功能与专业版类似。

2.首页的装修有两个方法：

1)一是从装修市场直接购买装修模板进行装修，比较简易。但由于装修模板是根据模板设计师自我感觉进去制作，面向所有用户。因此很难贴合自己店铺理想中的风格与效果，也会因为设计师模块的特定效果，使得店铺风格与品牌形象不明显，效果差强人意。

2)二是通过淘宝设计师为店铺专门定制首页，装修过程相对会比较复杂。但整个首页都会完全贴合店铺，使店铺风格突出，树立良好的品牌形象。而且宝贝摆放与排布更为自由，更能使风格与推广相辅相成。

二．首页装修的步骤

在设计师为我们设计好店铺首页以后，还需要把首页装修到我们的店铺上去，才能达到向客户展现的效果。以下，让我们来了解一下首页装修的基本步骤吧。

1.布局划分筹备工作

（1）我们可以将首页划分成：店招，海报，产品宝贝，页尾，四个部分。并通过PHOTOSHOP的切片工具划分切片。我们可以使用辅助线进行精准的划分。然后，通过“存储为web所用格式”存储，我们就得到了四部分独立起来的图片。如下图：

（2）我们整个首页可分为主体部分和背景，主体部分的宽度根据店铺性质的不同而有着差异。一般来说，集市店的主体不可宽度为950像素，而天猫店则为990像素。在后续装修中，我们都需要先将主体部分与背景划分开来，将背景剪裁，留下主体部分，方便进行装修。

2.店招切片，上传与拼接技巧

（1）划分好模块以后，我们先从店招开始装修。通过剪裁，我们得到了店招的主体部分，店招大略可以分为两部分：店铺招牌和导航栏部分。导航栏是主要添加加链接的地方。我们可以按照加链接的需求，对店招进行切片。如下图：

（2）完成切片后，我们通过“存储为web所用格式”进行存储，将格式选择为“HTML和图像”，我们就能得到各模块独立的图片与一个HTML网页文件了。

（3）我们将切好的图片通过上图片空间，然后我们打开刚才的HTML文件，将店招图片的地址按照顺序替换成图片空间的地址。将html代码中的table至/table复制到店铺的店招上，并加上我们需要的链接。

（4）完成第三步后，我们就得到了主体部分的店招了，但我们的店招是全屏1920像素的，该怎么办呢？我们通过背景拼接达到1920像素的全屏效果。在新旺铺中，店招背景图片的大小限制为200K以内，而1920*150像素的店招，只要我们稍微调节下图片的质量，基本上不会超过这个范围，所以我们可以把整个店招的图片直接当作背景。

操作如下：进入装修界面，选择装修下拉菜单中的样式管理，然后点击样式编辑中的“背景设置”。

在页头设置选项，将”要设置的页面”选项设置为“所有页面”，通过“更换图片”选项将我们做好的店招背景更换上去，再将“背景显示”选项设置为“不平铺”，“背景对齐”选项设置为“居中”。最后，我们保存一下。我们就能得到1920像素的全屏店招了。具体设置参考下图：

3.全屏海报的制作技巧

（1）完成店招之后，我们开始制作海报部分。海报是店铺的眼睛，它能充分展现店铺的品牌，风格与大气。而全屏海报更能充分的表现出这一特点。而制作全屏海报，我们同样要先将海报划分为主体部分与背景，将主体部分上传到店铺的自定义模块，加上我们想要的链接。

（2）然后我们进行至关重要的海报背景拼接。由于全屏海报的图片会比较大，而背景图片不能超过200K，所以在制作海报背景时，我们要先将主体部分的内容删除，如下图：

原图

海报主体

海报背景

（3）由于我们用的背景是整个店铺的背景。所以，我们需要考虑店招的高度，在事例中，我们店招的高度是150像素。所以，我们需要在海报背景图片的上方加上150像素的留白，然后进行保存，注意不要超出200K。效果如图：

（4）接下来，我们像之前制作店招一样，进行背景添加操作。操作如下：

进入装修界面，选择装修下拉菜单中的样式管理，然后点击样式编辑中的“背景设置”。在页面设置选项，将”要设置的页面”选项设置为“首页”（这个需要特别注意，否则背景应用到所有页面，影响店铺展现效果），通过“更换图片”选项将我们做好的海报背景更换上去，再将“背景显示”选项设置为“不平铺”，“背景对齐”选项设置为“居中”。最后，我们保存一下。我们就能得到1920像素的全屏海报了。在制作全屏海报的过程中，可能会出现1-2像素的细微错位，我们可以按照全屏海报的拼接效果，对海报背景进行微调。具体设置参考下图：

4.产品宝贝的切片与加链接技巧

完成了全屏海报后，表示我们的装修已经攻克了最困难的问题了。接下来的部分，我们只需要将产品宝贝模块进行切片上传以及加链接就可以了。以下，让我们来了解下产品宝贝的切片技巧吧。

在开始之前，我们同样要先将我们之前切好的产品宝贝主体部分提取出来。在产品宝贝模块中，我们的宝贝摆放可能会分成几个甚至十几个不同的小区块。例如，热销区，新品区，T恤区，连衣裙区等等。我们可以先将这些小区块分别切出来，然后再按需求，对小区块进行切片，效果如下：

在切片的时候，我们一般会将标题独特切出，然后再针对宝贝的不同排布位置，进行切片操作，在切片时，我们可以运用参考先辅助进行。而切片的基本原则是，切片尽量简单，避免过于复杂的切片。

切片完成后，我们将切好的图片上传到图片空间上，然后我们打开刚才的HTML文件，将店招图片的地址按照顺序替换成图片空间的地址。将html代码中的table至/table部分复制到新建的“自定义模块”中，并加上相应的宝贝链接。在每一个小区块上传的过程中，我们可以在图片空间新建不同的文件夹存放图片，方便日后的图片管理。而每个小区块代码,可以用独立的自定义模块，以方面日后修改管理。

5.页尾的制作

首页的制作已经进入尾声了，只要进行页尾的最后制作，我们整个首页就会完成。页尾的制作跟之前宝贝的切片差别不大，我们只需要把我们需要加链接的模块，按位置切片，将完成的切片上传到图片空间上，并将代码上传到预设好的页尾模块中去，加上我们呢的链接就可以了。这里需要注意的是，我们在放置代码的时候，一定要记得放置在页尾模块中，否则其他页面将显示不了店铺的页尾。而页面模块的标示很明显，如下图：

经过以上的介绍，相信大家对首页的装修已经有了一定的了解。我们只需要通过：布局划分筹备，全屏店招制作，全屏海报制作，宝贝的切片和页尾的制作。我们就能完成一个完成自定义的个性首页。

其实首页装修并非我们中那么深奥复杂，只需要我们有一定的Photoshop基础，以及足够的耐心与细心。我们就能将首页按照我们的想法装修得美轮美奂，为我们的店铺换上适合自己，风格强烈的新衣。