Phtoshop切图
界面设置
PS首选项设置：
编辑>首选项>单位与标尺： 将单位（标尺/文字）改成像素。
面板：
在“窗口”菜单下开启：工具/字符/选项/信息（F8）/图层/历史记录
调整面板后，需要保存工作区：窗口>工作区>新建工作区
辅助视图
在“视图”菜单下开启：对齐/标尺（Ctrl+R）/显示>参考线（Ctrl+;）
需要开启视图菜单下的显示额外内容，才能看到画布里的参考线和网格。
Photoshop基本操作
ps界面中有菜单栏、属性栏、工具栏、面板、工作区。
放大快捷键ctrl++，缩小ctrl+-
移动工具快捷键（v）
选框工具：
选框工具快捷键（m），按shift（画正圆），按alt+shirt（以中心画正圆），按shift+m
为选框工具的切换。
裁剪选取：画一个选框后，按右键，变化选取，然后拉动相应位置，对选取进行裁剪。
撤销选框：Ctrl+D
选择页面较大区域方法：在左侧画一个小矩形框，在右侧再画一个小矩形框，在信息视图里显示相关区域的大小。
选区
选中选区：ctrl + 相应图层前的框。
撤销选区：Ctrl+D
填充选区颜色：选中选区后，设置前景色，然后：ALT+Del；Del:为删除选区颜色
删除重叠选区颜色：选择一个选区，点击另一个选区，用选框工具+Alt选择要删除的颜色区域，点击Del即可删除。
图层：
选中图层：移动工具下，Ctrl+ 鼠标点击画板中相应区域
复制图层：选中某一图层，Alt+ 鼠标点击图层，并拖动，即新建一个类似的图层。
参考线：
开启：对齐/标尺（Ctrl+R）/显示>参考线（Ctrl+;）
需要开启视图菜单下的显示额外内容，才能看到画布里的参考线和网格。
关闭：拖动参考线到左侧标尺，顶部标尺，即删除一条参考线。
新建参考线：从左侧或顶部标尺处，按鼠标左键拖动到内容区
新建确定尺寸参考线：快捷键：ALT+V+E
打开视图菜单，点击新建参考线。
参考线隐藏/显示：ctrl+分号(;)
选中图层，然后建立一条参考线，当拖动到图层边缘时，会自动吸附到图层位置。
传统切图
方法1：选择切片工具，点击图层，然后切图，切图边线会吸附到图层位置。
方法2：先绘制图片各部分的参考线，然后选择切片工具，顶部选择“基于参考线的切片”，然后再选择相应切片，进行调整尺寸。
隐藏文字只留背景的切图：
A: 若文字为独立图层，隐藏文字图层
- 找到文字图层
- 去掉眼睛图标
B:若文字和背景合并，平铺背景覆盖文字
- 矩形选框工具
- 自由变换（Ctrl+T）–(背景图像可以拉伸)
- 使用移动工具+Alt –（背景图像不能拉伸）
PNG24/PNG8格式的切图方法
PNG24格式
1.单图层：
移动工具选中所需图层;
再右键复制图层到新文件，或直接拖至已有文件（新建：Ctrl+N）
2.多图层：
移动工具选中所需图层（按住Ctrl多选）；
右键合并图层（Ctrl+E）；
再右键复制图层到新文件，或直接拖至已有文件（新建：Ctrl+N）
PNG8格式
带背景切图：
- 合并（可见）图层（Shift+Ctrl+E）;
- 矩形选框工具选择内容
- 魔棒工具去掉多余部分（从选区中减去：按住Alt）
- 再右键复制图层到新文件，或直接拖至已有文件（新建：Ctrl+N）
可平铺背景的切图
用矩形选框工具选取一块区域
复制粘贴到新文件中（平铺内容充满文件的宽(X轴)或高(Yz轴)）
活动页的切图——适用于可以一刀切的活动页
- 拉参考线
- 选择切片工具
- 点击“基于参考线的切片”按钮
- 为切片命名
- 保存（全选切片，统一设置存储格式）
精准切图
利用Photoshop的脚本，进行一种更加快捷精准的切图方法，自动化切图
文件 → 脚本 → 将图层导出到文件 → 文件类型选择png24.
扩展知识
新版PS CC2014功能
自动切图：
【配置】配置完成后，PSD 文件所在路径会出现 对应文件名-assets 的文件夹
1、编辑–首选项–增效工具–这里对『启动生成器』打勾√ （注意，更改在下一次启动 PS 后生效）
2、文件–生成–图像资源（将其打勾√ ）
【使用】
1、在 PSD 内将图层或图层组的名称修改为.png 或.jpg 结尾，则在assets文件夹内自动生成导出图片（以图层名称及其约定的文件后缀名命名）。
2、Retina优化:
如果需要适配 retina 显示器，可以将图层命名为『200% 图层名字 @2x.后缀名』（注意需要添加空格，如：200% button @2x.jpg）自动导出的文件名不会出现200%的字样，但是文件尺寸变为2倍大小。
3、如果不想要导出的图片资源了，可以取消图层和图层组的文件后缀名，则导出的图片自动在assets文件夹内消失。
4、还可以通过图层和图层组的文件后缀名来控制导出图片质量，例如『.jpg8』则为 导出为80%品质的 jpg文件，如果不设置则默认为最佳品质。
5、SVG生成：改后缀名可自动生成SVG
6、SVG导出：选中资源－文件－抽出资源，抽出SVG图片
7、复制CSS：选中资源－图层－复制CSS
8、图层管理：图层下方可选择类型，进行图层筛选
抽出资源
指定的图层：文件-抽出资源-找对应图层-相应格式svg.
抽出改文件名
复制CSS
点击图层-复制CSS
单击后，代码已经生成了，粘贴下来了会自动命名。需要使用即可。
Fireworks切图
打开图片时：pS首选项选择：
1、维持层的可编辑性优先于外观 (选取这个选项，打开图片后文字等可编辑)
2、维持Photoshop层外观
切片步骤：
1、矩形选框绘制选中区域
2、右键 → 插入切片 → 在右上方”优化”里设置导出属性(图片格式，色板：透明) → 对着图片，右键”导出所选切片”
或者：直接鼠标点击相关图层，然后右键”插入矩形切片”，在”优化”里设置选项 → 导出所选切片。
参考资源：
1、前端工程师必备的PS技能——切图篇 http://www.imooc.com/learn/506
2、Fireworks切图教程 http://v.youku.com/v_show/id_XMTMyNjExMjAzNg==.html
