0. 前言
本次示例教程以恶魔不要的项目psd文件讲解，本文只是讲解一些基本用法，基本上能满足前端需要，深入了解Photoshop需要很长的磨炼，大家有兴趣可以学习。
1. 准备前的工作
拿到一张psd设计稿，首先工作就是复制一份，以备不时之需。打开后可能是这样有密密麻麻的参考线或者整体图像显示的百分百过小的情况。清除参考线的方法是：执行视图-清除参考线；控制图像的方法是：alt+鼠标滚轮上下。关于参考线的简单用法，后续会提到。
关于Photoshop工作界面，建议窗口中除了工具和选项，其他只勾选信息，历史记录，图层这三个显示小窗口，摆放在右侧。信息窗口用于实时查看像素宽高，历史记录可以回到历史操作，图层窗口自然不用说了。
2.找图层
可以说psd文件都是以图层的形式叠堆形成的。当我们进行图像操作时候，就得在该图像的图层上进行。一般找图层都是由上级目录往下级目录逐步寻找。
3. 左导航处理示例
1. 背景处理：找到背景图层，可以发现背景由两个图层混合制成的。不信？隐藏其中一个图层试试。另外，你还能发现图像的图层最右侧有个“fx”字样，代表的意思是应用了图层样式。
处理的方式：只需按Ctrl依次选中两个图层，执行右键删格化图层样式，然后你就发现那个“fx”不见了。然后右键合并图层，这样我们就得到一个新的图层。而在后续的切图中，往往会用到先删格化图层样式，后合并图层的方式这也是非常实用的一种方式。
接着：我们发现背景层是有规律的，似乎是由一个正方形的单位块拼接而成的。Ctrl+R键打开标尺，点击标尺，拉出合适的参考线，粗略的量出大概是34x34像素的正方形。
然后：Ctrl+H键隐藏参考线，选择选择工具，样式选择固定大小（
特地的：别忘了操作完成后，样式选择正常，不然一直都是34x34的选择区域），宽高填出粗略的量的34像素（偏大偏小自行修改），拖动到合适的位置，Ctrl+C复制，+N新建，+V粘贴。抠出这个单位图，然后css中设置背景填充即可。再熊猫压缩图片，这样省不少空间了。
2. 数字1背景处理：基本方法同上，找到对应图层，先删格化图层样式，再合并图层，Ctrl+C复制，+N新建，+V粘贴。抠出保存png格式。
4. 补充
1.参考线
创建：Ctrl+R打开标尺，点击标尺拉动到画布上。
删除单个参考线：选中该参考线，拉动到标尺上。
删除所有参考线：视图-清除参考线。
2.图像Ctrl+C复制，+N新建，+V粘贴宽高会自适应。比如你要抠下面个按钮，只需在该图层上，用选择工具框起来起来，大点也无所谓。执行Ctrl+C复制，+N新建，+V粘贴，得到的图像就会自适应宽高。特地的，最后保留png格式后，别忘记了隐藏背景层。或者双背景层新建成默认图层0，再直接删除背景层。
