PhotoShop切图笔记

界面快捷键

放大、缩小：alt+滚轮 or ctrl+"+/-"
100%视图：ctrl+1
标尺：ctrl+R
参考线：ctrl+;
新建文件：Ctrl+N

测量、取色

尽可能放大画布，使用矩形选框工具选中测量区域，从信息框中读取宽高值
内边距、外边距、边框等数据

文字大小

1、字号：选中文字所在图层，点击文字工具，选择文字，可以在上方选项面板看到字号；矩形选框工具，选中文字，信息面板显示的高度即字体大小。
2、行高：文字工具，选中图层，点击字符面板，可以看到行高；或使用矩形选框工具选择，从第一行的最下到第二行的最下，高度就是行高。

矩形选框工具：

默认新选框，按住shift为添加新选框，按住alt是从原有选区中减去后面选中的区域，按住shift和alt就会交叉选区（新旧选区的交叉部分）。

取色

1、点击前景色，使用吸管工具取色。（注：取色时将画布尽可能放大。）
2、确认颜色是否线性渐变：使用魔棒工具，调整容差，观察所选择区域的变化。
3、文字取色：文字工具，点击设计稿中的文字，在文字面板会显示颜色，单击颜色弹出取色器得到颜色信息；文字在图层中，使用吸管工具、拾色器取色。

切图

切图内容：

1、修饰性(css-background)：图标、logo；有特效的按钮、文字等；非纯色背景。保存为png24（质量较高，但低版本浏览器不支持此格式的半透明）或png8格式。
2、内容型(html-img)：Banner、广告图片；文章配图。存为jpg格式。

隐藏文字图层切图。
文字不是单独图层：矩形选框工具，ctrl+T，拉伸背景覆盖文字。对于有纹理的背景，选中无文字背景，使用移动工具，按住alt来复制背景。（再按住shift来使其只在水平方向移动）

PNG24

选择所切图层，在图层面板中右键-复制来保存到新文件中；如果画布太大，使用矩形选框工具选择所需大小的区域，在上方“图像”菜单中选择裁剪。
若一个图标中各细节不在一个图层，可以合并后复制。

PNG8

合并可见图层(shift+ctrl+E)
矩形选框工具选择内容，使用魔棒工具去掉多余部分（按住alt点击多余部分）。然后就可以ctrl+c和ctrl+v来复制。

可平铺背景

用矩形选框工具选区所需区域，复制粘贴到新文件中。平铺内容充满文件的宽或高，视背景图沿哪个方向平铺而定。

切片工具

1、拉出几条参考线
2、在左侧选择切片工具，点击上方基于参考线的切片
3、选择切片选择工具，双击切出的图，可以重命名。
4、文件——存储为web所用格式，选中所有切片，统一设置格式，品质视情况决定，一般选择“高”，以使得文件不会太大。

保存

将切好的图片放到新文件中，保存成web所用格式。（Alt+Shift+Ctrl+S）
新文件中背景色一般选择透明。

文件格式

JPG:图片色彩丰富并且没有透明要求，选择合适的品质进行压缩。
PNG8:有压缩，当图片色彩不太丰富时，无论有没有透明要求，都存为PNG8。杂边选择无，扩散改为无仿色。可以在右上角保存所选的设置，以便以后使用（预设中选择）。维护时选择图像——模式，RGB颜色
PNG24:未压缩，图片有半透明要求时使用。
PSD:为保证图片质量，保留一份PSD

修改和维护

更改画布大小：
1、变大：图像——画布大小，选择尺寸，定位选在左上角（这样CSS中选择已有图像的位置不需要改变）。
2、变小：矩形选框工具选择需要的区域，图像——裁剪；或使用裁剪工具，选择需要的区域后双击。
移动图标：独立图层直接使用移动工具。合并在一起的多个图标，使用矩形选框工具选中需要移动的图标，再使用移动工具移动。
分开图层：矩形选框工具选择要切出的图，剪切再粘贴即可。

图片优化与合并

原因：为了减少网络请求，提升网页加载速度，将多个图标放到一个文件中。
压缩：有损与无损，图片质量和图片体积的取舍。

合并

图片合并时在各图片之前保留空隙，以便后期调整大小，并有一定的容错率
++（如果是小图标，留的空隙可适当小一些，一般20像素左右；那如果是大图标，要留的空隙就要大一点，因为大图标在调整的时候，影响到的空间也会比较大。有了一定的切图经验之后，对于保留多大空隙就会比较有概念，有自己的心得了）++。
合并时的图片排列一般选择横向或纵向。
合并的分类：
1、把属于同一个模块的图片进行合并
2、把大小相近的图片进行合并
3、把色彩相近的图片进行合并
4、综合上面的因素进行合并
推荐： 1、只本页使用的图片进行合并；2、有状态的图标合并（交互动态）

浏览器兼容

高级浏览器保存PNG24图片，给IE6保存一份带背景的PNG8
高级浏览器使用CSS3，低级浏览器切图。（也有降级原则，让低级浏览器不使用CSS3的特性）