关注“每天新知”（微信号：meitianxinzhi）微信公众号后，回复0查看所有文章目录，回复1查看第一篇，以此类推。

一、切片工具都有什么用

Ps中有个切片工具，也许有的人根本没用过，可是对于做网页设计和宝贝详情页设计的朋友应该经常用。记得当初学了切片工具后有一年没用过，因为很少需要切割图片。那么Photoshop中的切片工具到底是干什么用的哪？

【切片工具】顾名思义就是切割图片的，可以平均切割、按辅助线切割，还可以自己手动切割。说简单点就是把一大张图片按照要求分成很多小张的。

【网页设计用途】页面布局、按钮导航、热点链接

【详情页用途】切割成单张小图

二、为什么要切割图片

可能你要问，好好的图片为什么要切开。首先说网页设计，首要的就是要制作热点，只有把每个热点区域分开，才能单独的给其加上链接。还有就是能加快网页的加载速度，也许你不在乎速度，但是在网速较慢的地区和手机上，图片加载速度是很有必要的。比如打开网页要5秒以上的话，估计很多人会选择放弃就看此网页。

还有就是淘宝和天猫上的详情页设计，如果把所有图片都做在一起的，组成一大张的话也可以，就是网页加载很慢，网速慢的有可能打不开。用户体验很差，很容易丢失客户。前两年确实有很多商家把所有描述做在一张图上。但是现在都改成小图了。而且手机上传图不仅限制图片大小还限制了张数。也是为了提升用户体验。

有一点，不知道大家在手机上浏览宝贝详情页的时候有没有注意到，当我们往下滑动详情页的时候才会逐步的显示图片描述，你滑动多少就加载多少，一直到加载完。也就是根据你的需求，你想多看就自己继续加载图片。这也就说明了切图的好处，如果是一张图的话你一拖动页面就要加载整个页面，而如果是多张小图，只会加载上面临近的图片。能为使用流量的客户节省移动流量。

三、手动切图法

手动切图多用于不是成行成列的切图，优点就是灵活自由，缺点是效率低，有时不太准确，容易多切出小切片。

【操作方式】：选择切片工具手动绘制，绘制同时按住空格移动切片，Shift锁定正方形。

四、辅助参考线自动精确切图

参考线切图是比较精确的切图，缺点是不够灵活，多用于成行成列的切图。具体操作方式就是，先在要切开的地方拉出水平或者垂直参考线，然后再选择切片工具，点击选项栏上的“基于参考线的切片”，Ps就能自动从参考线创建切片。水平和垂直参考线形成的所有矩形区域都会形成切片。切好后再根据需要组合或划分切片。

【操作方式】：调出标尺，拉出参考线到自己想要的位置，然后点击选项栏“基于参考线的切片”按钮（保持切片工具）

五、自动平分切图（划分切片）

自动切图是最简单的切图方式，就是固定切片的数量或者切片的尺寸，设置好后，点击确定，切片就自动产生了，在Photoshop中叫做划分切片。优点是简便快捷，缺点是不能确定具体的切割位置，除非先按照要划分的尺寸设计页面。

【操作方式】：切片工具时在图片上右键单击选择“划分切片”

六、根据图层自动切片（新建基于图层的切片）

这个比较少用，因为图层比较多，很多都是多个图层混合后的效果。

【操作方式】：选择图层后，点击图层菜单下面的“新建基于图层的切片”

七、淘宝天猫图片如何切

因为考虑到用户体验的原因，淘宝天猫描述图都要切割成小点的图片，单张尺寸不要太大，避免加载过慢，让客户等待。由于类目不同，个人经验，仅供参考。建议在图片描述图片与图片空白分界的位置采用参考线切图，尽量不要把文字或者商品图切开（当然如果您觉得切开商品无所谓使用划分切片速度最快了），方便以后快速修改详情页。PC端建议单张图片300K左右，图片高度最好不要超过1屏（我个人习惯一般图片高度800以下），移动端看平台的要求吧，具体的根据自己的描述设计和天猫淘宝要求决定尺寸。

八、视频切图演示

本文所有内容均为作者个人经验所得，仅供参考，图片也是个人拍摄处理，公众号：meitianxinzhi，本文只在本公众号发布，严禁盗用转载，一经发现，投诉到底！