前言：当设计师通过photoshop工具设计完设计稿导出psd文件时，我们前端工程师该如何进行切图转换成网页的所需的图片呢，接下来讲讲如何利用photoshop工具快速简洁的切图，因为ps工具用到的行业很多，涉及到的各个行业，所以有一些快捷的面板可以隐藏掉。前端工程师只显示适合面板和元素就可以了。
目标：自己能够使用photoshop从设计师提供的psd中获取网页前端开发过程中所需要的资源
一：首先：先了解大致了解一下，当前流行的设计稿尺寸以及工具，如下对应表
渠道UI 设计工具 基础尺寸
app（安卓） sketch 720px
微信，IOS sketch,ps 640px
pc ps 1920px,1600px.，1024px..
基于Photoshop设计，会输出psd文件，用ps进行切图 。
二：ps切图原则
前端网页切图应用尺寸单位一般px像素，RGB的颜色模式,屏幕显示一般是RGB
三：ps合适的预设
- 文件-新建--：初始化预设设置1920x2000，72分辨率，8位色图，背景透明色 然后保存起来。后续可以选择新建模版
- 视图/显示/智能参考线以及视图/字符，这两个都要选上；
- 编辑/首选项/单位与标尺【标尺：像素；文字：像素，其他默认不用改动】
-
ps界面中有菜单栏、属性栏、工具栏、面板、工作区：
-
面板选择：图层、历史记录、信息、字符. 这四个，点击信息面板那一个小三角，打开面板选项/标尺单位：像素；两个像素模式：RGB颜色；文档尺寸选上，然后确定信息面板：坐标改为像素，颜色改为RGB。比如面板显示信息，当我们点击该图片时，对应的信息高宽等都可以直接显示。很方便
-
加上辅助智能参考线标尺等；首选项设置为像素
四：前端切图快捷工具
1:ctrl +； 隐藏参考线 显示参考线
2:导出切片：alt+shift+ctrl+s（文件-存储为web所用格式）
3:移动工具，任何时候按v，就可以回到移动工具
4:移动工具快捷键（v）
5:选框工具快捷键（m）
五：推荐的压缩图片网站 png 图片推荐用tinypng压缩，超级无损。
- https://tinypng.com/
?，结束。thx.若有不懂可以联系本文作者我啦。
