一、Photoshop预设准备

1、默认单位设置

由于ps默认的是以厘米为单位，因此需要修改为我们前端所用的以像素为单位：
编辑-->首选项-->单位与标尺-->按下图修改即可：

默认单位修改及屏幕分辨率.png

2、视图设置

由于ps默认未启用标尺及智能参考线等，因此需要自行开启：

视图.jpg

3、窗口设置

窗口设置.jpg

如果左侧工具栏未开启显示，则也可在此设置让其显示；另外需要提的是，信息面板需要一些额外的设置：

信息面板设置.jpg

信息面板选项设置

4、新建文件存储预设

新建文件存储预设.png

5、新建工作区

以上设置完后，建议保存工作区以保存之前预设的一些设置。
保存工作区方法：窗口-->工作区-->新建工作区

二、切图方法

1、普通切图

这里就不解释了，直接上图：

image.png

2、智能对象切图法

选择移动工具 ---> 勾选自动选择及选择图层选项（不是组） --->选择预切图的位置（选择后会自动跳至相应图层）--->右键相应的图层--->选择转换为智能对象--->启用选框工具框选相应区域--->复制--->新建文件--->粘贴--->选择图像菜单--->选择裁切--->选中基于透明像素--->确定即可；
此方法比较适合不规则的图像，比如logo等；

3、参考线切图法

拉好参考线后，选择切片工具--->点击基于参考线的切片

image.png

--->文件--->导出--->存储为web所用格式--->选择png24--->存储--->选中所有用户切片；

由于有很多条参考线存在时会相互干扰，我们可以将原有图片裁剪成几个独立的部分，然后再使用参考线切图法即可。

4、导出切图法

文件--->导出（Photoshop低级版本此处是脚本而不是导出）--->将图层导出到文件--->设置文件类型（PNG24，勾选透明区域、交错及裁切图层）

完成后，ps脚本会自动运行。可能耗时比较长。

5、生成切图法

该方法需要事先设置两个地方：
a、编辑-->首选项-->增效工具-->启用生成器
b、文件-->生成-->图像资源
上述两个设置完成后，启用移动工具，选择需要的切图，在其图层上加后缀名，则在原始psd文件目录下的xxxxxx-assets文件夹中会自动生成相应格式的图片（甚至svg）。

当然我们还可以在后缀名添加数字来表示图片的质量。比如logo.jpg8（表示80%的质量），logo.png24，logo.png8等。当然如果不加数字的话则默认取最大值；

不仅如此，我们还可以设置生成后的大小倍数比如命名300% logo @2x.png 则表示会在原有基础上放大三倍大小导出。这一点对视网膜屏很有用。

** 本文版权归本人即简书帐号：该账号已被查封https://www.jianshu.com/u/e0c3321672f5 所有，如需转载请注明出处。谢谢！