HTML与CSS入门系列[3]-PS切图指南
简介
切图是设计稿图片源文件psd到UI素材转变的过程，这个过程由前端来完成。
banner等丰富色彩图常切为jpg，修饰性图标切为png，且把他们放在一起减少http请求。
服务器来更新的区域，无须切图。或者只切出来占位。因为数据是从后端拉取的。
按钮图标：我们需要把设计稿上的文字去掉，再把图标背景切出来（因为要通过编码的方式添加文字）。如果本来在psd里就是单独设计的图层，那么直接隐藏文字图层即可。如果不是，则我们需要使用矩形选框选择背景的一部分，然后ctrl+t进行图形变换，把选择的这款背景拉伸覆盖掉文字。当然，如果背景有纹理不能拉伸，此时需要按住alt键移动选取，来覆盖文字部分。总之发挥聪明才智让文字去掉即可。
对于平铺的背景装饰：
如果是沿x轴平铺的，则你切出这个背景条一个像素宽度的东西，然后在新画布上一定要保证占满画布的宽。这样横向平铺的话，才能永远是这个东西，而不会出现空白内容的平铺。
y轴同理。
快捷键
- 信息 f8
- 图层： f7
- 历史记录： 打开。
- 撤销步骤： ctrl ＋ alt ＋ z
- 恢复步骤： ctrl ＋ shift ＋z
- 两步之间来回撤销： ctrl ＋ z
- 放大缩小： cmd ＋ 加号 cmd+ 减号
- 或者安住alt再滚动鼠标滚轮，
- 或者mac上，按住z不放（切换到放大镜模式），然后按住触摸板往下拉放大往上拉缩小。这样更精确一点。
photoshop首选项里面，进入文字和标尺，设置，把文字和标尺两个单位改成像素。方便我们度量。
为了让鼠标可以点击图像上某个部分，可以自动选中点击位置的图层：，我们需要选中“选择工具”，然后把他上面的options，修改为自动选择－－－“图层” （默认情况好像是自动选择组）。 这样方便我们快速选中图层。
移动画布： 按住space键，然后按住触摸板移动。
辅助视图：
ctrl ＋ shift ＋ ； 开启或关闭对齐，他能够让选框或其他东西具有吸附能力，对齐更方便。
ctrl ＋ R： 开启标尺。 能让你大概看到图片的尺寸。
ctrl ＋ h： 隐藏或显示额外内容。 比如参考线、网格等。
ctrl + ; : 参考线显示与否
ctrl + ‘ 网格显示与否。
测量信息：
太多的尺寸需要测量： 行高，文字大小，定位的位置等等等等。
alt + 选框： 减去选区
shift+ 选区： 加上选区
shift + alt + 选区： 取交集。
取色：
线性渐变的话，可以用魔棒，调低容差值，看看他是什么方向渐变的。 因为魔棒会选择同一种颜色的。
ps直接修改png8图像：
直接用ps打开png8的图片进行修改的话，他是以索引颜色方式打开的。这时候如果编辑图片，是无法给图片添加丰富色彩的。此时需要在图像菜单的模式中选择RGB模式，然后编辑这幅图像，最后导出即可。
同一个图层的多个元素移动：
如果同一个图层上有好几个小元素，要想移动其中一个，就得用选框工具选中它，然后再移动。如果想把它单独搞到一个图层，则ctrl+x，ctrl+v即可。
若将一个图层的某个图标复制或粘贴为新图层，则使用ctrl+c或ctrl+x复制后，然后粘贴即可。如果想让粘贴后的位置跟复制的时候在同一个位置，则使用ctrl+shift+v粘贴。
活动页切图：
活动页效果图一般比较炫，有很多地方直接使用图片实现。此时可以用ps自带的切片工具。
- 先拖参考线，在把要切割的部分划分出来。然后在裁剪工具上长按，选择里面的切片工具。
- 然后在选项面板点击基于参考线的切片。然后双击图上各个切片部分给他命名。
- 然后选择文件—另存为web所用格式。 选择整幅图中所有切片，然后设置图片质量为jpg，60–80的质量。
- 然后保存即可。
切图后的保存
切图后修饰性的内容常常需要把图片素材ctrl+c复制选择的内容，然后去ctrl+n创建背景为透明的新文件，然后ctrl+v粘贴进去。或者直接在当前选中的内容的图层鼠标右键选择复制图层，就能让你粘贴到对应的其他文档中。
当然，可以直接拖动你选择的内容到其他文件。
如果某个元素是由多个图层组成的，你要切出来这个元素的时候，则需要先把这几个图层合并，在图层面板ctrl多选图层后点击右键合并即可。
如果保存为png24则不需要注意什么，因为他支持半透明，但图片体积大一点。
如果保存为png8，则要知道透明通道是无法保存的，所以半透明无法显示（比如设计图上的某些阴影效果），然而psd中只要有背景，则渲染为png8的时候，半透明就无意义了，就变成依托在颜色背景上的效果，这样透明效果就能出现，而且能保存为图保持着着中国效果。所以要保存png8的切图，你需要合并带背景颜色的图层和你要切的元素的图层，这样你的元素就拥有了带颜色的背景，此时透明通道丢失，但透明效果基本与原来差不多，而此时可以保存为png8。对于非图层的不规则的形状，一般矩形选框选择后，用魔棒工具去掉周围不用的部分。然后粘贴到新文件里。
保存类型
- jpg比较丰富的颜色，常保存jpg，质量一般60–80.
- 有透明颜色的要保存为png8，保存时设置杂色为“无”，扩散选择无仿色，颜色选256种。
- 有半透明的图片要保存为png24，默认设置即可。png24文件相对较大，压缩很少。
来自站长之家：JPG天生适合风景照片，PNG几乎就是为了“便携网络图形图像”而生。截图保存为jpg，很容易出现失真现象，在文字、渐变色和比较精细的地方，例如线条周围，常常出现斑点、不清楚，模糊。就算提高质量，jpg的体积就上去了。而且JPG不支持透明，所以的你软件图片如果有阴影效果，用JPG就太浪费了。相对的，PNG就比较适合，在保持极少失真的情况下，还能保留透明阴影，文件体积小，而且压缩空间很大。所以，截图的选择无疑是PNG更好。
切图的维护：
每个切图结果（比如图片精灵文件）都要保留一个psd稿件，以便后期对这些小装饰品或其他图片进行更改或维护。因为只有psd上才是原始色彩的，等你另存为png或jpg之后，都是压缩过的。 所以一旦以后要修改，我们要去修改psd再导出，而不是去修改png。
sprite拼图：
也就是把一些小图标，拼到一张图片上。减少http请求。因为浏览器并发请求数量一般4个左右。图片越多速度肯定会被拉慢。
在图片上增加内容（扩展图片精灵）：
如果要在图片精灵文件上增加图片，则需要扩大精灵文件的画布区域。这里需要选择 图像—画布大小。然后设置一个绝对的画布大小，然后在下方扩展方向上选中左上角，也就是左上角不动，向右向下增加图片画布大小。这样就保证了之前的装饰物坐标位置在画布上保持不变。
缩小画布大小（裁剪）：
一般图片精灵spride一般要在右侧和下侧留出一些空白来提高可维护性。若非要裁剪，则只需要使用裁剪工具调整下即可。 也可以使用选框工具选择范围后u，点击图像菜单下的裁剪选择。
图片大小与质量要求：
对于ps导出来的png，jpg等图片，还可以进一步进行压缩。
压缩的化分有损压缩和无损压缩。 无损压缩有一个基于node的工具minimage（在github）。
有损压缩，tinypng.com这个网站可以。 同样是png压缩，难道会产生不同的压缩效果吗，答案是可以的，因为png压缩规范里虽然有规定png图像的格式要求，然而其格式内部的某些调色板等部分，是可以使用不同的算法实现的。比如tinypng.com这个网站他就可以分析你原图中的颜色，进行合理的去色等方法，达到压缩的目的（这个网站压缩效果比ps好多了哦，文件又小又清晰）。 而ps导出的时候那个算法可能只是用他自己的算法做了一部分压缩。
图片合并时的原则：
把同属于一个模块组件（比如一个弹窗）的小图标进行合并到一个sprite。
把大小相近的图片进行合并。
把色彩相近的图像进行合并。
综合以上三种方式进行合并。
推荐：有状态的图标一起合并到同一个y轴上，这样hover样式就很容易设置位置了。 另外，只合并本页用到的图片，比如登录页只合并登录页的图标，这样用户访问登录页不会产生无用的请求。 另外，尽量利用好空白空间。另外，尽量把一类的放在一起。比如 logo的，背景的，小图标的。
代码方面的要求
精灵图片的使用：
一般用在css样式的background属性上，通过url引用图片精灵，然后设置background-positon的值，即图片精灵的左上角相对于你html容器左上角的位移位置。
图片兼容方案：
IE6不支持半透明。所以，给IE6保存一个png8格式的图片，给他带上背景切图。（也就是半透明区域其实变成了特定的颜色值，而不是透明值）。 这样普通浏览器使用sprite.png。ie6使用sprite_ie.png.
圆角技术： 现代浏览器使用css3，低级浏览器使用切图，给css加hack处理。
优雅降级的方法： 都用css3，高级浏览器显示圆角，低级浏览器显示直角，不采用任何处理，这就是优雅降级。
图片排列方式：
小图标在sprite上摆放，一般有2种方式。即要么横向摆，要么纵向摆。
不过，我认为最好纵向摆。因为我们的html容器很多是横向的，这样在上面放背景图，如果我们sprite是纵向摆放图标的话，就正好不用考虑横向上的其他组件进入html容器背景抢镜。
图片合并要求：
小图标们合并到一个sprite画布上的时候，不要让这些元素紧挨在一起。最好让两个组件上下之间保留一定的空隙。以免后期需要修改元素的大小，就不用更改css代码，而且html容器设置背景的话也不会让其他元素抢镜。