PS--前端工程师切图

PS传统切图

PS精准切图   PS CC 版本，新增了一部分新功能

JDP  PNG 透明

界面设置

1、需要智能参考线，尺寸，

2、还有4大板块，上 信息 字符，下 图层，历史记录

　　　　信息板块，单击设置，面板选项，颜色选择为RGB，坐标选择像素。勾上文档尺寸。

3、编辑--首选项--单位与标尺 ，在这里全部改为像素。

切图与切片

存储为Web所用格式 Alt + Shift + Ctrl + S

Png - 24 质量 ，点 击存储。

精确切图流程

利用PS的脚本，进行一些更精准的切图方法。

自动化切图，省时省力

计算机自动切图。

1、单击文件，脚本，将图层导出到文件

2、文件类型 PNG-24 勾上下面三个。

拓展知识

自动切图

编辑--首选项--增效工具--勾上启用生成器。 更改只有在重新启动后才会生效。

文件--生成--图像资源 ，要讲它勾上  多出一个文件夹   前缀--assets

把图片改名为png,，然后在assets 里面就有这个图片了。

SVG矢量图的格式，logo.svg ，SVG用sublime打开。

webP格式

文件--抽出资源   也是导出SVG格式。

复制CSS

图层--复制CSS，已经到剪贴板，直接粘贴就出来了。

图层管理