使用PS进行切图

一，设置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 即可完成切图。

七，动态添加样式的三种方法：

　　第一种：最优雅：