photoshop切片的使用

一、photoshop中切片工具的使用方法【切图】

在前端编写页面时，部分小图标会使用ps中的切片工具将UI给的小图标组合在一起的大图片进行分割，小编今天将切片工具的使用方法分享给大家。

1.首先找一张图标很多的大图片，将图片放置画布中。

2.选择工具栏中的“切片”工具。

3.从最上方开始画出区域，将图片裁切为需要的部分，可以看到上方显示的裁切数字。

或者在需批量裁切大量图片时可以打开标尺（ctrl+r），然后通过拉参考线划分区域，然后点击基于参考线切片。

4.将图片裁切好后，如果需要修改，选择工具栏中的“切片选择工具”，在需要更改的切片中，可以移动更改尺寸，移至切片周边出现箭头符号时就可以更改尺寸。

5.如果想要去除切片，需要使用“切片选择工具”将需要去除的部分选中，然后del删除。如果需要全部撤销时，选择“视图”工具，然后在最下方选择“清除切片”，全部切片即可全部撤销。

6.导出：选择“文件-存储为web所用格式，批量裁切时会出现大量无用部分，可以批量选择需要的图片部分，保存时选择导出选择的切片即可。


7.在保存位置时，还可以选择保存的格式，还可以选择全部导出或只导出选中的切片，选择完成后，确定保存。

8.然后在保存位置，就可以看到保存的内容了。

二、什么是雪碧图（CSS Sprites图片切割术）

1.精灵图（英语：Sprite），又被称为雪碧图或拼合图。在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图。
2.常见碳酸饮料雪碧的英文名也是 Sprite，因此也有人会使用雪碧图的非正式译名。

优点

1.体积小：把N多个小图标放到一张大图上去，通过整合图片来减少图片的体积。
2.请求次数少，打开速度更快：通过图片整合减少用户对服务器的请求次数，从而提高网站的优化速度。

缺点

1.由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
2.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。

使用 background属性

 1 .box1 li:nth-child(1) {
 2   width: 30px;
 3   height: 30px;
 4   background: url(./images/map-icon.png) no-repeat 0 0; /* 第一个图标*/
 5 }
 6 
 7 .box1 li:nth-child(2) {
 8   width: 30px;
 9   height: 30px;
 10   background: url(./images/map-icon.png) no-repeat -30px 0; /* 第二个图标*/
 11 }
 12 
 13 .box1 li:nth-child(3) {
 14   width: 30px;
 15   height: 30px;
 16   background: url(./images/map-icon.png) no-repeat -60px 0; /* 第三个图标*/
 17 }

补充background相关属性
background-color: red (等于 background:red)
background-image: url() 填充背景图片
background-repeat: no-repeat(不平铺)
background-position：0 0；属性设置背景图像的起始位置。
CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位，这样能减少维护带来的不必要麻烦。

三、如何在psd上切图

1.打开你的Photoshop，首先将你的psd文件引入，可以点击文件选择打开或者直接拖动你的psd文件到Photoshop界面。

2.点击文件使用脚本，将图层导出文件。

3.修改合适的地址，以及文件名前缀和文件的类型，然后直接运行即可。
注：运行后可能会出现卡死状况，此功能对于电脑的要求比较高，慎用。