Photoshop如何切图

准备工作

1、切图工具（firework ，Photoshop ，px_cook）

本文分享一些用Photoshop切图的一些经验。需要把Photoshop功能面板设置成我们前端常用的并保存下来，这样以后每次使用的时候就不需要花时间再去设置一次了。

2、设置标尺单位

——CSS里面用的最多的单位是像素(px)，测量和读取的值也都是以像素为单位的值）

设置步骤： ps首选项设置：编辑>首选项>单位与标尺 ——— 将标尺和文字单位设置为像素

3、将面板调整为适合切图

——其他不经常用的可关闭

设置步骤：在“窗口”菜单下开启：工具、选项、信息(F8)、图层(F7)、历史记录

4、辅助视图

在“视图”菜单下开启：

  1）对齐(在移动图层的时候当它靠近文档边缘或参考线时会有一定的吸附力)、

  2）标尺(Ctrl+R)(显示隐藏标尺)

  3）显示>参考线(Ctrl+;)(需勾选[显示额外内容])Ctrl+h也可以显示/隐藏参考线；

获取信息

1、尺寸信息

——测量（宽度、高度、内外边距、边框、定位、文字大小、行高、背景图位置）

方法：矩形选框工具和信息面板结合使用——画一个矩形框在信息面板中读取矩形框的宽高(尽可能的将画布放大以减小误差)

矩形选框工具

选区相加：按住Shift

选区相减：按注+Alt

选区相交：按住Shift

2、颜色信息

——取色（边框色、背景色、文字颜色） —— 使用吸管工具或拾色器 （faststone）

1、确定背景是否为纯色——使用取色工具（吸取背景不同位置看颜色是否有变化）

2、确定背景是否为线性渐变——使用魔棒工具

选中图层，选择魔棒工具，容差值改低(可直接设置为0)，用魔棒工具多次击图层不同位置，若每次选中的区域为线性的并且多次点击域都为线性并平行，背景色则为线性渐变。反之则不是。

切图之前

1、那些图片需要切出来？

修饰性（一般用在background属性）：

图标、logo

有特殊效果的按钮、文字等：

非纯色的背景

2、内容性的（一般用在img标签）：

banner、广告图片

文章中的配图

3、切出来的图片存为哪种类型？

修饰性：

PNG24——支持全透明和半透明（IE6不支持半透明）

PNG8——不支持半透明

内容性的：

一般存为JPG（有时还要做些压缩来保证图片不要太大）

切片方法

1、使用矩形选框工具：

1、切图PNG24

——移动工具选中所需图层（按住Ctrl或Shift多选）——需切到一张图上的多个图层，合并在一个图（Ctrl+E）右键复制图层到新文件或直接拖至已有文件

2、PNG8

——带背景切

合并图片的（可见）图层（Shift+Ctrl+E）

矩形选框工具选择内容

魔棒工具去除多余部分（减去相减：按住Alt）——适度调整容差值

用移动工具拖至新文件或已有文件

3、可平铺背景

——主要针对css里面background-repeat的属性

用矩形选框工具选区一块区域——尺寸尽可能小（例如：一个横向渐变的背景图片可将图片切为高同原图一致，宽为一像素的图片）

2、使用切片工具：

快速切片：

1.拉参考线

2.选择切片工具

3.点击选项栏中的“基于参考线的切片”按钮

4.导出切片

手动选择：也可以按住鼠标左键拖动鼠标选区切片区域，然后导出切片

存储

存储为Web所用格式——选择所需要的切片（按住Shift多选）——选择图片格式——存储——选择（用户选中切片） 

保存类型

1、当图片色彩丰富且无透明要求时——建议保存JPG格式并选择合适的品质。

——品质越大图片质量越高图片文件越大 。
设置图片的一个原则是：品质不要设置为100。设为100相当于没有对图片进行任何的压缩，会使文件相当大。一般60-80就可以了（具体数值根据项目需要）

2、当图片色彩不太丰富时无论有无透明要求——！保存为PNG8格式

——文件较小、支持透明，但不支持半透明。

3、当图片有半透明要求时——！PNG24

——支持半透明，并且不对图片进行压缩，文件较大。
4、保留一份psd格式

sprite拼图

图片精灵（CSS Sprites，又称css精灵）即把网页设计图里面的小图标小按钮合并到同一个文件，命名为sprite，用的时候引入sprite这个文件，同时通过background-position这个属性来定位这个文件。利用CSS Sprites最大的优点是能很好地减少了网页的http请求，从而大大的提高了页面的性能；并且CSS Sprites能减少图片的字节。

精灵图遵循的原则

1、合并—排列

1）图片之间必须保留空隙；

——防止之后有更改图片大小的需求时，还要去更改css的background-position属性；有一定的容错性，防止css写的不准确时其他不需要的部分显示出来。 （建议整像素点）
2）图片排列方式——横向排列、纵向排列

2、合并—分类

1）把属于一个模块的图片进行合并
2）把大小相进的图片进行合并
3）把色彩相近的图片进行合并 可以使文件比较小
4）综合以上方式合并

3、合并--推荐

1）只本页用到的图片合并
2）有状态的图标合并（这样在写css代码时状态的图标只是x轴或y轴的区别）