photoshop操作之前端PS操作切图和合并sprite
今天给大家介绍一下关于前端相关PS操作之切图和合并sprite，首先给那些已经学习完HTML/CSS基础知识，想模仿做一个静态页面，但缺少对ps了解的新手同学，那么下面我们一起来看一下吧。
一、准备工作
切图前需要先对PS进行基本设置，记住一些快捷键能帮我们更快的工作。
工作区设置
通过窗口打开：信息、字符、图层、历史记录、选项。
信息面板：配合矩形选框可显示距离、鼠标定位坐标
字符面板：显示字体、字体大小、字体颜色、行高
历史记录：快速返回到历史状态
单位设置
信息调板设置：颜色RGB，标尺单位px
编辑——首选项——单位与标尺：单位px
快捷键
整体移动：空格+鼠标
整体缩放：ait+滚轮
取消：ctrl+D
返回上n步：ctrl+alt+Z
移动：V
文字：T
选框：M
吸管：I
切片：K
标尺：ctrl+R
新建参考线：alt+V+E(可直接设参数)
参考线：ctrl+;
拿到设计图，可以先分析页面的结构分布，判断设计图中公共样式部分，判断出图中需要切出单独保留的图片和需要拼接Scrpite图片。
二、切图
切图前先确定切图范围，并且隐藏掉图上的干扰信息(比如文字，不必要的小短线，图标什么的)。
1. Icon/Logo
这类图片常常尺寸不是很大，起指示作用，较少变更，背景往往为透明。切这种图片可以用这两种方法。
1.1新建psd另存对象
操作
移动工具选中——图层转化为智能对象——选框工具框选大致区域、ctrl+c、ctrl+n确定——ctrl+v——ctrl+alt+shift+s——PNG-24/8、命名save、关闭窗口
无需仔细框选图片边沿，也能非常准确的切取图片
一次只能处理一张图片，适用于图比较少的情况
对于由多个图层组成的icon，需要先全部选取并合并图层
1.2 切片法
操作
切片工具K——选择相应位置切片——隐藏背景/文字——ctrl+alt+shift+s、切片选择工具(可单独选几个保存)、PNG-24/8保存——保存所有用户切片、文件位置，保存
可一次切完单页面上所有图片后一次性保存，当然保存图片格式是一致。
切片时适当放大图片，注意图片边缘。可提前设好准确的参考线。
对于比较规整的页面，可以利用【基于参考线自动切片】
1.3 保存
颜色单一，且【无】半透明效果opacity——存为PNG8
颜色单一，且【有】半透明效果opacity——存为PNG24
2. 内容/背景
设计中有些图片是表达具体内容，往往随着页面内容的更新而变更并且颜色会更丰富。(如下图红框所示)
2.1操作
覆盖图层隐藏——选框图片——alt+I、p裁剪——ctrl+alt+shift+s——JPEG、60——ctrl+alt+z还原
当然，这些图片往往需要存储的格式比较单一，可以直接全部切片，保存。
2.2存储
颜色丰富，无透明色——存为JPEG60/80
JPEG有损压缩，数值越高，图片质量越高
三、合并sprite
为了减少http请求数量，加速页面显示。我们可以将加载量较大，不随用户信息变化的多个小图片拼接成雪碧图。
操作
选中A图层、转化为智能对象、选框工具框选区域、ctrl+c、ctrl+n、ctrl+v
——图像画布大小、定位、更新宽/高——放好交界参考线——选中B图层、转化为智能对象、选框工具框选区域、ctrl+c、回到新建窗口、ctrl+v
四、测距/获取颜色值
当然，除了以上。我们还有两个非常常用又非常简单的ps操作：测距和获取颜色值。写CSS一定会用到。
测距
矩形选框直接拉，在信息面板可见宽(w)高(H)
字体大小直接看字符面板
获取颜色值
吸管吸取相应位置，工具栏设置前景色点一下，即可得各种形式颜色数值
可多吸取几个位置，注意颜色数值是否有变化，确定有无渐变
