PS 切图 PS 切图1、PS 基本操作因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以以后我们大部分切图工作都是在 PS 里面完成。部分操作：文件→打开 ：可以打开我们要测量的图片Ctrl+R：可以打开标尺，或者 视图→标尺右击标尺，把里面的单位改为像素Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图按住空格键，鼠标可以变成小手，拖动 PS 视图用选区拖动 可以测量大小Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区2、图层切图最简单的切图方式：右击图层 → 导出 → 切片。3、切片切图2.1、利用切片选中图片利用切片工具手动划出2.2、导出选中的图片文件菜单 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储 。4、PS插件切图​ Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出 web 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。官网：http://www.cutterman.cn/zh/cutterman注意：Cutterman 插件要求你的 PS 必须是完整版，不能是绿色版，所以大家需要安装完整版本。5. PS 切图5.1. 常见的图片格式序号格式特点和常用的用途1jpgJPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片 经常用jpg格式的2gifGIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果, 实际 经常用于一些图片小动画效果3pngpng图像格式，是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景. 如果想要切成 背景透明的图片 ,请选择png格式.4psdPSD图像格式，Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿. 对我们前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离.PS 有很多的切图方式：图层切图、切片切图、PS 插件切图等。5.2. 图层切图简单版步骤：​ ① 使用移动工具，点击需要的图片​ ② 查看右侧，找到图片对应的图层，右击图层 → 快速导出为 PNG但是很多情况下,我们需要合并图层再导出:步骤：​ ① 选中需要的若干个图层：选择一个图层，再按住shift键，继续选第二个图层: ​ ② 图层菜单 → 合并图层(ctrl+e) ​ ③ 查看右侧生成的新图层，在合并后的图层上，右击 → 快速导出为 PNG5.3. 切片切图步骤：​ ① 利用切片选中图片 ：利用切片工具手动划出​ ② 导出选中的图片：文件菜单 → 导出 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储 。​ 注意：保存的时候，要选“选中的切片”：5.4. 插件切图5.4.1. 介绍Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。5.4.2. 安装注意： cutterman插件要求你的ps 必须是完整版，不能是绿色版，所以大家需要从新安装完整版本。查看 “窗口菜单”里面的“扩展功能”：​ ① 如果是扩展功能的是灰色的，表示就是绿色版的，需要重新安装PS​ ② 如果是扩展功能右侧是可以使用的，表示就是完整版的，可以安装cutterman插件快速切图官网: http://www.cutterman.cn/zh/cutterman当cutterman 安装完成后，重启PS，会发现扩展功能里面多了一个cutterman工具：5.4.3 使用步骤​ ① 选择需要的图层​ ② 选择web端，点击web下面的下拉三角​ ③ 选择需要的图片格式​ ④ 设置好存储路径​ ⑤ 点击 “导出选中图层” 按钮示意图：