ps如何切html用的图片,前端实战(一)-----用ps把PSD切成HTML能用的图片

本章实际操作使用ps来进行切图,分成四部分来讲解：

1.切图的常规步骤

2.如何只保留某一部分

3.删除切片

4去掉默认切片线

切图的常规步骤

我现在有一张登录框的psd，拿到psd后首先要思考怎么构图。也就是切图的思路。我这里只是演示步骤，所以就不详细推理了。

在工具栏中选择切片工具

然后用切片工具画出三个部分，如果觉得切片工具不好画的话 可以右键切片 编辑切片 直接输入参数。

点击文件----》存储为web和设备所用格式

这里可以调节一些参数和图片格式，或者直接点击存储并选择保存路径即可。

存储后到保存的路径看到我们的3个切片已经有了

如何只保留某一部分

我们上面已经了解了正常的流程，不过有时候我们需要某一部分的图片，不能一次性全部切好。比如我们需要蓝色按钮单独作一张图片。那怎么单独切出这个按钮呢。

步骤如下:

选择切片工具，画出按钮。

文件--》存储为web和设备所用格式，关键是在调节页面的时候 需要点击选中按钮部分。然后点存储。

选择好路径后 选择 只输出 选中切片 也就是只输出 按钮。

结果文件夹中就只输出了按钮图

ps:这里只是演示步骤,正规流程中 按钮这些单独的图层 最好使用 图层切片，这样得到的图才是最完整无混合边界的图。

步骤是 在右侧图层面板中选中图层 ----》选取图层---》新建基于图层的切片

删除切片

在画切片的时候 经常有画错的时候， 除了后退之外我们还可以删除切片。

对着切片直接右键可以看到 删除切片。

仅仅是用户切片才能 使用 删除切片。

非用户切片的删除切片是灰色的。只能先右键点击提升为用户切片之后才能删除。

所谓的用户切片就是 我们画的切片，非用户切片是我们画了一部分之后 系统补充的另一部分。

去掉默认切片线

前面我们讲到删除切片 只能删除用户切片  那么系统默认的切片 和 切片线应该怎么去掉 删除呢。

视图-----》清除切片即可。