不相干的前言:
希望大家编程时注意身体,别久坐否则坐骨神经,腰间盘,脊椎,眼睛,颈椎,痔疮等等各种相关的病会找上门.
本文以 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 则表示会在原有基础上放大三倍大小导出.这一点对视网膜屏很有用.
来源: http://www.jianshu.com/p/143f458f7d90