用PS标尺参考线打造专业淘宝模板

这次给各位卖家带来一个新的店铺设计装修，一旦学会，不敢保证一定会有订单成交，但是流量大大提升是绝对没有问题的。如何用PS标尺参考线 打造专业淘宝模板？下面请仔细看清每一个步骤。用的还是photoshop CS2(简称PS)。

第一步、打开PS，点击左上角的“文件“，新建一个白色背景，如图：

然后点击“好“，如图：

第二步、嘿嘿，关键来了---调出标尺!快捷键Ctrl+R(是Ctrl键加上字母R)，即可调出，或者是点击在PS的最上方的工具栏(即是刚开始的“文件“一栏)的”视图“，会在弹出的下拉菜单中看到”标尺“，点击。背景图变化如下：

下面为了让大家看清楚一点，我会把白色背景改成其他颜色。

第三步、关键又来了---调出参考线!

把鼠标移动到标尺上，按住鼠标左键，往右边(下边)拖动，即可调出咱们可爱的参考线;或者是通过“视图“，可以在”标尺“的下方看到”新参考线“，点击。弹出一个框框，选择所需要的取向，在”位置“那里设置距离，我设置为5cm，如图：

新参考线

参考线设置

参考线模样

呵呵，采用在“视图“那里点击稍微有点麻烦，下面我用鼠标拖动的方式来操作。哦，忘了重要的一点，肯定会有人问如何取消参考线和调节参考线?

方法：

1、“视图“的就在那个下拉菜单里有”消除参考线“的(注：按这个取消参考线是将全部参考线都取消的哦，要注意了。如果要取消刚弄错的一条参考线，可以点击”编辑“的”返回“。);

2、鼠标拖动：按住Ctrl键，把鼠标放到参考线上，会出现一个图标，额，截取不了图，我画一个：，就是这个样子。然后就可以往左往右(往上往下)拖动了。把参考线一直往两边拖到最边上就是传说中的取消。使用鼠标拖动的好处就是可以任意调节参考线和取消参考线，想不要那条参考线，就可以很快的操作。是不是很简单!

第四步、好啦，标尺和参考线都会了，那么接下来就可以制作模板了，我做的是750像素的三栏效果，先把参考线做出三栏的效果，如图：

然后点击PS左边的工具条中的“矩形工具“，如图：

颜色设置

点击颜色设置，选择颜色，确定。然后快捷键按Alt+Delete键，会发现我们用矩形工具框住的范围变成了我们刚才设置的颜色，如图：

其他的也是如此操作。

第五步、接下来就可以把已经弄好的图片还有需要的文字放上去了，这里为了避免广告嫌疑，我随便用一张图片来处理。打开图片(PS左上角“文件”中的“打开”)，然后点击“矩形工具“旁边的“移动”工具，，然后拖动调整到需要放置的位置上，需要注意的是，拖动的时候图片会被参考线吸引，老是往参考线上黏糊。所以我们可以使用快捷键来调整，按ctrl+T，会发现图片四周有所变化，可以发现图片四个角和中间部分都有一个很小的正方形，把鼠标放到正方形上，可以调节图片的大小的，当然啦，那是不规则的变形，如果要等比例的改变图片大小，鼠标拖动前先按住Shift键，那就可以随意调节图片大小了。http://www.tbxt.com/

额，说多了。转回正题，我们按ctrl+T后，就可以用鼠标拖动图片了，放到适合的位置，还不满意的话，拖动后放开鼠标，然后用键盘四个方向键来调节;也可以在按ctrl+T后，按住ctrl+鼠标拖动。效果如图：

其他的也是按照如此方法来进行，最终效果如图：

然后在图片下方输入文字，点击工具中的这个(如图)即可输入文字，最后效果如图：

第六步、处理完图片和文字后，接下来是比较重要的环节---切片。这里我们将用到切片工具。嗯，先把参考线消除，其实不用消除的，这里我为了让大家看清楚切片的效果，就消除，呵呵。

因为我做的是三栏效果的，所以我们可以用“切片选取工具”，把鼠标放到选区内，鼠标右键，点击“划分切片”，在弹出的选框中选择“垂直划分为”填写3，可以明显的看到我们的选区分为了无限接近相同大小的三个区域。如图：

然后点击“文件”中的“存储为web所用格式”，弹出选框，点击“存储”，保存格式为“HTML和图像(*html)”，然后按确定即可。

第七步、保存在桌面的，然后打开那个images文件夹，将里边的所有图片上传到图片空间。

第八步、打开dreamweaver(简称DW)，打开另外一个文件，点击一个图片，然后复制图片空间相对应的地址，在DW属性栏找到“源文件”，

删除里边的内容，然后粘贴地址。另外“源文件”下方有个“链接”，把店铺的这款产品的链接粘贴进去。其他的也是按照这个步骤操作，最后点击保存。

最后鼠标右键点击保存好的文件，选择“打开方式”中的“记事本”,复制记事本内的所有代码，在店铺新建一个自定义内容区，把代码复制进去，即可收工。

看看我店铺的效果：

总结：其实店铺装修在于用心，哪怕你不会photoshop，不会dreamweaver，没关系!只要你拿出百分百的努力用心做好，相信有一天，在你的店铺首页，会有一个崭新的变化!