基础切片

在逛淘宝时，大量高质量的图片吸引眼球，鲜有图片需要等待的情况。这是怎么做到的呢？就是限制上传图片的大小。既要高质量，又要图片小，鱼和熊掌不可兼得怎么办？解决这个问题的办法就是大图变小图，一图变多图。举例说明：把裙子的图片分为5个小图，浏览时，图片同步分开加载，直到整个图像出现在你的屏幕上，这样，需要1秒加载的图片就只需要0.2秒

大图变小图，一图变多图的变化过程就是“切片”。PS切片分为四种方式：基础切、平均切、基于参考线切、综合切。首先学习基础切片。

基础切片包含三种样式，为“正常”、“固定长宽比”、“固定大小”。

“正常”方式可以任意拖动切片框，调整大小，是真正的任意切。图中是利用正常方式切片的结果。切片大小不同，排列也没有规律。

“固定长宽比”限制长宽的比值，图中左侧切片设置长宽比为3:1，右下方则是最常用的长宽比1:1，切片为正方形。

“固定大小”用于统一切片大小，图中蓝色的切片就是设置固定大小值为400*150像素的切片结果

刚刚老师说到了蓝色切片，切片还有不同颜色吗？当然有，蓝色表示用户切片（手工切片）、灰色则表示自动生成的切片、褐色表示选中的切片，也就是正在编辑的切片，切片有哪些编辑方式呢？

第一，移动切片。选择切片后，按下鼠标左键拖动切片，就可以调整位置。

第二，调整切片的边线。切片的四条边可以拖动调整切片大小，但是不能旋转，缩放，只能水平或垂直调整。所以切片都是方形的。

第三，删除切片。直接按[Delete]键可以删除选中的切片，要整体删除切片，可以执行视图一删除切片。

第四，点击后编辑切片。包括删除切片、拼合切片、划分切片等操作。如果要选择任意切片或一次选择多个切片编辑，就需要用到“切片选择工具”。按下[Shift] 键可以选择多个切片。在切片选择工具下，可以设置自动切片的显示和隐藏，左图是隐藏自动切片的画面，右图是显示自动切片的画面。

 

回到Photoshop中，和老师一起任性一次，给“本初网络”招聘图来个任意切，学习切片的基本操作和设置。在Photoshop中打开“本初招聘” 广告图片，先查看图片大小，宽度为1000像素，默默记下。选择“切片工具”，在图片左上角点按鼠标左键拖动切片框到右边，文档添加了蓝色的“01”切片，其他图像默认为“02”切片，向内拖动“01”切片框的右边线，切片变小，右边区自动更改为“02”切片。底部区域为“03”切片。也就是在切片时，图像未划分的区域，会根据用户设置的切片线自动切片，切片都是方形的。用户切片为蓝色，Ps自动切片为灰色，选中的切片为黄褐色。在“01”切片区域右击，选择“编辑切片选项”，可以设置切片名称，链接等信息，设置切片的尺寸，比如，网页上部的banner，设置x值为0 Y为0，宽度与原图一致，设置为1000，高度设置为100像素，以本初网络logo为主的banner就切出来了

再来真正任意切，我们任性的横七竖八的拖动切片框创建切片，一眨眼就创建了35个切片，这些切片杂乱无章，真正的任意切也是有规律可循的，任意切的规律就是以画面为本，按元素切图片中的主要元素包括logo，卡通人、主题文字、介绍性文字四部分。现在logo作为banner切出来了，其他图像被切得凌乱。怎么一次去掉这些凌乱的切片呢？这里有一个非常常用的技巧。用切片工具从右下角开始拖动到“01”切片的边线上，杂乱无章的切片就统统消失，也就是说，变成了一个整体切片。只剩下“01”和“02”两个切片。

秘籍：在多个切片上创建新切片，原切片自动删除。

拖动绘制切片框时可以超过文档边缘，切片自动以文档边缘为边。再从文档右边缘的中间开始拖动创建切片框，将主题文字切片，卡通人可以切片为正方形，切片样式选择"固定长宽比1:1”，从左下角往右上拖动和02切片下边连起来，切出正方形的人物，剩下的两个部分就自动生成了切片

这是我们刚才生成的切片，为什么02和05是自动生成的切片，但不是灰色的呢？

这是因为这两个区域以前都被任性的创建过切片，在切片时，你有没有注意到老师很多次都是从边缘开始拖动绘制切片的呢？这是因为从已有切片对面的边界开始绘制切片框，和原切片边接近时就会自动对应上切片边，实现切片无缝对接。

切片有什么作用？

第一个就是老师说的大图变小图，把一张图片切片成了5部分，怎么保存得到这5张小图呢？你可以试一试保存或另存为，这两种方式都不能把切片保存为图片，必须通过“存储为Web所用格式”，把切片区的图像保存为一个个子图像或整体保存为网页。

第二个作用，就是辅助功能。提供其他操作参考。

接下来详细学习“存储为Web所用格式”。执行文件菜单的导出-存储为Web所用格式，可以选择存储格式，常用的gif和jpg格式，点击面板底端的存储按钮，在存储设置框中选择存储路径，接下来的两项设置非常重要，格式有三种：仅限图像、HTML和图像、仅限HTML。切片设置中也分为：所有切片、选中的切片[Shift]、所有用户切片。如果只需要保存其中的几个切片，就可以按下[Shift]点击选择多个切片，导出时设置“选中的切片”，其他切片就不导出。其中所有用户切片就是指用户自己创建的切片，选中“所有用户切片”时默认的切片不导出。

回到Photoshop中，执行文件菜单的导出-存储为Web所用格式，再选择JPG格式，点击面板底部的存储按钮，文件名默认图片名“本初招聘”，格式选择"HTML和图像”，切片设置"所有切片，点击保存，在文件中查看，文件中多了本初招聘html文件和一个"image”文件夹，里面包含切片的5张图片和一个分隔符，分隔符是1*1像素，用在网页中补充空白图像。Html文件可以转到网页编辑器中用语言编辑，切片也就把网页设计的UI转为网页编辑文件了。

在“本初网络”网络切片中我们学习了基础切片的方法，可以调整切片的位置和大小。切片应用最广泛的就是存储为Web所用格式，也就是大图变小图，加速网页加载速度。切片存储为html文件，可以将Ps中设计好的UI图片转为网页形式。