之前我们学习了如何使用热点的形式达成图片的个性化排列，参考文章《淘宝店铺装修系列课程之热点的使用》，本文讲述另一种形式，即切片。US淘宝培训中心

在淘宝店铺装修里，这两个知识都是最为基础的内容，请大家熟练掌握，店铺装修切片课程我会以三个例子讲述并分别作为讲解，本文讲解最为简单的规则宝贝排列切片方法。

首选我们要知道切片所适用范围，图片规格大小，以及为什么要优先选择切片。切片可以用在首页，宝贝详情页的关联，切片有利于网页的加载速度，更多图片规格及适用范围，参考《淘宝网店图片规格概览》

下面开始操作步骤，我们以首页的宝贝陈列为例，把如下做好图片放到淘宝首页中(图片制作参考US淘宝美工课程)：

大家看到这幅图，现在最先想到的一定是用《淘宝店铺装修系列课程之热点的使用》也可以实现该图片的上传，但是，本例使用PS切片，完成这个操作。

本例大纲如下：

1.使用PS软件完成图片的切图，生成图片和html

2.上传图片到图片空间

3.复制html中table表格到自定义内容区

4.替换图片的本地连接和赋予图片链向地址。

注：本例配有视频教程，可在US淘宝学院官方论坛找到

第一步：

打开PS软件，把图片拖入PS中

菜单栏--视图—标尺，快捷键Ctrl+R

把鼠标放到标尺上，按住鼠标左键拖拽，生成参考线，使用参考线把图片分开，如图：

划好参考线线后

工具切换到切片工具，如图：

然后查看工具对应的属性栏，点击上面的基于参考线的切片，如图：

点击基于参考线的切片之后，会发现图片被切割成了八张图片，如图所示：

这里讲的是基于参考线生成切片，也可以手工切图，需要注意不要切出不起眼的小条出来，不然会麻烦一些了。

文件—储存为web所用格式—jpeg文件，如图：

注意要保存html和图片，切片选择所有切片，点击保存，PS阶段完毕。

第二步：

PS完成切片后，保存桌面会自动生成一个image文件夹，该文件夹盛放的就是分隔开的图片，及时上传到图片空间里。

第三步：

PS完成切片后，查看桌面会保存一个html文件，右击，使用Dreamweaver或者记事本打开。如图

打开后，复制里面body之间的内容，如图框选区域：

后台首页新建一个自定义内容区，选择标题不显示，源码模式，插入该段代码。

第四步：

插入完代码就完事儿了吗?还没有，会发现根本没有图片，图片全部是裂开状态，原因是因为该段代码所引用的是本地图片地址的链接。

回到可视化编辑窗口，双击裂开的图片，如图：

这里面有三点需要注意：图片链接复制图片空间中的链接、链向地址复制该宝贝详情页链接、在新窗口打开一定要勾选挨个替换这八张图片，完成操作后预览效果。

使用切片的好处：优化打开速度、便于替换单一宝贝。

以上内容有配套视频教材，可在US淘宝学院官网进行下载。

以上所使用涉及软件分别是：Adobe公司的Photoshop和Dreamweaver，US淘宝学院论坛有Adobe公司官方下载链接，请大家支持正版。谢谢!

以上来源于teacher丁手打