一，设置PS 使用PS进行切图前的设置：
1，打开PS----打开PSD图片----点击窗口-----分别把：历史记录，信息，图层，三个打勾。
历史记录：可以回到之前想要的步骤，特别是不小心把图层的文字或者图层删除了，进行恢复。
信息：可以获得框选部分的：rgb ，XY轴的起始位置，还有宽高。
图层：PSD图片，是通过很多图层叠加起来才变成视觉上为一个页面的效果。
2，设置自动选择图层：点击窗口----选项打勾----即显示顶部的选项，选项中的：自动选择：图层。自动选择打勾，并且把组改为图层。
此时随便点击PSD文件的任何一个地方，图层都会显示该图层。
3，设置标尺：点击是图----标尺打勾。
按键盘M(矩形框选工具) ，如果有该选取，那么标尺移动到该处时，会自动吸附。很好用
二，测量
1，测量时注意，不要把边框算进去。
2，在使用选取工具时，选区左边 与 图层左边对齐时，选区可以从右边向左边画选区，这样比较好对齐，不会跑动。
因为鼠标点击时很难确定哪里开始画。
方法一：比较简单，推荐使用：
1，打开PS ----打开PSD文件
2，按快捷键M 画矩形选区 ------- 选区左边 与 图层 左边对齐。
3，按住Shift ------ 画矩形选区 ------- 选区右边 与 图层 右边对齐。
4，查看信息，这时的 W 就是 两个矩形选区之间的宽度，指左边选区的左边 到 右边选区的右边 之间的宽度。
H 就是 两个矩形选区之间的高度，指上面一个选区的上边 到 下面一个选区的下边 之间的高度。
方法二：
1，打开PS ----打开PSD文件
2，快捷键M----在图层左边画一个矩形选区 和 图层左边对齐，拉一条标尺对准左边。
3，在图层右边----按住shift 键 画一个矩形选区 和 图层 右边对齐，拉一条标尺对准右边。
4，按住 ctrl + 鼠标滚轮 ---- 缩小PSD文件，再按M(矩形选区工具) 从两条标尺之间画一个矩形选区，查看信息中的W的即可，H也一样的测量方法。
三，快捷键
Ctrl + 鼠标滚轮 缩放PSD文件
空格键 + 鼠标左键 拖动PSD文件
M 矩形选区
V 拖动指定对象
T 查看字体颜色时，点击字体按下 T 键，在选项中可以获取字体的信息，包括字体样式，大小，颜色等。
四，写样式时的习惯做法，比如 站点导航：
1，使用 Ctrl + 鼠标左键 选中 站点导航结构里面 要写样式的所有 class 。
2，黏贴到 指定样式表中。
3，使用 Shift + 鼠标右键 选中所有className 前面 添加一个 "." ，再按小键盘 1(end) 回到末尾 添加 " { }" 即可。如下：
/* nav-site 站点导航 */
.nav-site {
//写好结构样式名称后，再开始一层一层写样式
}
.container {
//写好结构样式名称后，再开始一层一层写样式
}
.nav-site-signin {
//写好结构样式名称后，再开始一层一层写样式
}
.nav-site-signup {
//写好结构样式名称后，再开始一层一层写样式
}
.nav-site-mobile {
//写好结构样式名称后，再开始一层一层写样式
}
五，颜色吸取
1，使用左边工具的吸管工具，点击指定位置获取颜色
2，点击前景色-----拾色器中获取颜色信息。
六，切图：透明图标
1，按 V 键-----找到需要的图标图层------右击图层-----复制图层 ----- 文档：新建---- 点击菜单栏 图像-----裁切----出现一个窗口----
---- 基于：选中 透明像素 裁切：全选 ---- 点击确定-----存储为web使用格式----设定好存储位置 和 名称.png 即可完成切图。
七，动态添加样式的三种方法：
第一种：最优雅：