不相干的前言：
希望大家在电脑面前工作时注意身体，别久坐否则眼睛、颈椎、肩周、脊椎、腰间盘、痔疮、坐骨神经等等各种相关的病会找上门。
本文以Adobe Photoshop CC 2018 (32 Bit)版本为例介绍，不同版本可能有细微差异。
一、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 所有，如需转载请注明出处。谢谢！
网友评论