写在前面：之前写了两篇前端图片相关的内容（前端ps切图方法，图文详细,css sprite雪碧图制作，使用以及相关，图文gif），本文是面向前端小白的，搜集整理的一些切图技巧，及其相关内容。
关于版本：
推荐pscc2017版，一些老版本很多新功能没有，会影响到效率的。（目前2017/4/11）
基本设置
先要调整工作区域的布局。
1.选择“窗口”——把“信息”，“图层”，“历史记录”，“颜色”面板打开，其他的可以先关闭了，在切图的工作中其他的基本用不到，这个很简单的，打几个勾就可以了，如下图所示：
工作区的内容
2.调整好面板之后，选择“窗口”——“工作区”——“新建工作区”，将当前的工作布局保存起来，并命个名，之后下次打开的时候就会直接出现你调整好的工作布局，否则的话你每次重新打开ps的时候都要重新设置。
ps：就算有别人弄乱了你的面板也可以直接通过“窗口”——“工作区”——选择你之前保存的工作布局。
设置标尺坐标
还有其他的一些设置：
文件-新建--：初始化预设设置1920x2000，72分辨率，8位色图，背景透明色 然后保存起来。后续可以选择新建模版
视图/显示/智能参考线以及视图/字符，这两个都要选上；
ps界面中有菜单栏、属性栏、工具栏、面板、工作区：
测量 、取色
哪些要测量？
标签的宽度、高度、内边距、边框、定位、文字大小、行高、背景图位置等等，凡是需要数值型，都要进行测量。
使用什么方式：下面弄了一个矩形选择框的例子，如果想要更精确的话，直接使用标尺工具也可以。
测量宽高的两种方式：
标尺测量的方法：
矩形选择框测量的方法：
颜色取色技巧：
QQ截图的方式：
截图的时候，鼠标移动到哪里，下面就有一个rgb。（在ps中也是一样，鼠标移动信息栏就会有对应的rgb）
ps拾色器获得 ：
注意
要把画布尽量放大，来减少我们测量的误差
关于png、jpg、gif三种图片格式的区别：
JPG的特性
1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。
2、有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。
3、JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
PNG的特性
1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
2、PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。
3、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
什么时候应该使用PNG
具备以下条件的图像更适合用PNG8格式进行存储：
1、图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。
2、具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。
对于写实的摄影图像或是颜色层次非常丰富的图像采用JPG格式的图片格式保存一般能达到最佳的压缩效果。
这篇文章写得非常详细，有兴趣的要看一下：png、jpg、gif三种图片格式的区别
快捷键
1.快速选中图层用ctrl+鼠标右键
2.安住空格键鼠标变成一只手拖拽图片
3.alt+鼠标滚轮可以放大或者缩小区域
4.ctrl+h隐藏所有的参考线
5.h,鼠标移动文件，t文字工具，i吸管工具，移动工具，任何时候按v，就可以回到移动工具
6.导出切片：alt+shift+ctrl+s（文件-存储为web所用格式）
踩坑经历：
自动化切图，文件–脚本–图层保存为文件（这个时候要注意之前的保存为web格式文件时是保存了所有切片，而不是仅用户切片，不然会导致一直搜索过滤图层，半天没反应，而且一直谭警告窗，要一直点）
意思就是保存图层的时候要保存自己选中的切片。
快捷键：zhidao.baidu.com/question/52…
压缩图片
ps切出来的图片一般文件都比较大：
这里有一个压缩图片很神奇的网站（有墙，攻城狮应该都会科学上网）：
一般网站文件目录
PSD切图（项目文件目录）
project：
-admin(后台)
-static（所有资源）
-css（所有子文件都可以分子文件夹，方便管理，层级不建议太多）common.css/reset.css/yemian.css
-images（可以按页面主题来）
-js(预定义的，引入的，common.js)
-font
-pulgs
-前台页面
-其他单独文件
