仅仅记录自己所学。

学习链接：

前端工程师必备技能—PS切图-免费在线视频教程-php中文网

主要是后面两个视频，前面介绍ps基本操作比较多

前端psd到html切图视频教程-慕课网

这个包含代码构建，我自己还没来得及学

先贴最重要的

ps切图方法

最简单就是点击图层右击导出就行。

ps图层右键合并或者直接导出图层。

 

 

半自动切图（适用于需求量小的切图操作）

>>>第一步：点击菜单栏中的“编辑”，然后点击“首选项”，然后点击“增效工具”，点击“启用生成器”，然后点击“确定”；（快捷键 ctrl +k ）重启PS

>>> 第二步：点击菜单栏中的“文件”，然后点击“生成”，然后点击“图像资源”。

>>> 第三步：首先选中要切的图片所在的图层，然后来到图层面板，双击图层名文字，在图层名后添加.png 或 .jpg；然后回车。

>>> 第四步：来到psd文件所在文件夹，打开以assets结尾的文件，即可看到相应的切图。

 细节：导出之前最好psd文件也重新命名一下

以下是学习记录

---

PS切图设置

去除暂时没有的一些窗口

 

一些设置

 

 存储预设

 选择设置Ctrl

 

 窗口调整

关闭颜色、通道

历史记录和图层放一起

以上是窗口调整

信息面板选项设置

 

 编辑 首选项 单位与标尺

 

可以将工作区保留一下，方便上面设置直接调出

 

 多个选区

一些快捷键

（暂时还不熟悉，以后慢慢熟悉更新吧）

Shift键正方形 圆

Alt 从圆心开始画

M选区快捷键

Shift+M轮流切换选区椭圆还是方形

Shif  加区域  alt 减区域

快速选择工具 大括号放大缩小选择

Ctrl+d删除选区

直接从标尺拖动出来参考线

快捷键新建alt v e

Ctrl+; 隐藏参考线

其他参考链接

ps在psd格式图片里面切图流程_gongxunqiang005的博客-CSDN博客

利用ps在psd图片中抠取我们需要的图片素材_半步浮生的博客-CSDN博客_psd文件提取素材

 PS切图

https://www.jianshu.com/p/b89c50a652fb?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation 主要参考，关键记录

方法1

计算机全自动运算切图（适用于图层较少的psd文件，如果图层较多，内容较复杂，那么就非常耗时）

扩展知识介绍-前端工程师必备技能—PS切图-PHP中文网教程 

1. >>> 点击菜单栏“文件”，然后点击“导出”，然后点击“将图层导出到文件”，然后勾选相应选项（将仅限可见图层、png24 裁剪、透明、交错都勾上），然后点击“运行”；

该方法的特点：会保留图片的阴影，将裁剪的图片命名为图层的名字。

方法2：半自动切图（适用于需求量小的切图操作）

扩展知识介绍-前端工程师必备技能—PS切图-PHP中文网教程

• >>>第一步：点击菜单栏中的“编辑”，然后点击“首选项”，然后点击“增效工具”，点击“启用生成器”，然后点击“确定”；（快捷键 ctrl +k ）

• >>> 第二步：点击菜单栏中的“文件”，然后点击“生成”，然后点击“图像资源”。

• >>> 第三步：首先选中要切的图片所在的图层，然后来到图层面板，双击图层名文字，在图层名后添加.png 或 .jpg；然后回车。

扩展：通过重命名来指定

 宽度高度扩大一倍

百分之百（8的话百分之八十）

SVG格式

 

 

•  >>> 第四步：来到psd文件所在文件夹，打开以assets结尾的文件，即可看到相应的切图。