前端PS实用切图指南

如何快速,精确的切出一张图是前端工作者每天都要面对的问题,本文总结了一些自己ps切图时的实用技巧,仅供大家交流参考。

一.PS智能切图

1.ps脚本切图

前端PS实用切图指南_第1张图片

步骤:文件–>脚本–>将图层导出到文件
ps:此方法可以非常智能的导出所有图片,但是对文件较大的处理时间较慢,建议分区分次导出

2.基于参考线的手动切图

前端PS实用切图指南_第2张图片

步骤:拉参考线->切片工具–>基于参考线的切片

ps:此方法依旧不太适合较大文件,需先分区切图.

3.使用图像生成器智能生成

前端PS实用切图指南_第3张图片

步骤:
1.首选项–>图像生成器
2.文件–>生成–>图像资源
3.给你想要的图层或组重命名加你想生成的图像后缀
例如:header组,重名名为header.jpg,则会在你存放psd文件的地方自动生成相应的图片.
ps:生成器在ps2014之后版本被废弃,得重新下载

二、前端切图PS配置

1.界面设置

a.右侧面板设置

前端PS实用切图指南_第4张图片

b.信息面板设置

前端PS实用切图指南_第5张图片

c.设置智能参考线和标识

前端PS实用切图指南_第6张图片

2.统一使用像素作为单位

a.新建时像素单位

前端PS实用切图指南_第7张图片

d.设置单位与标尺

前端PS实用切图指南_第8张图片

这样一个适合前端工作者切图的ps配置就完成了。

你可能感兴趣的:(前端技术)