前端快速切图：PS切图常用快捷键、精准测量尺寸，1px不差

文章比较长，可以根据右侧的目录进行阅读。

规范设计师的设计稿，前端还原后页面后（兼容下，保持风格一致整齐），原比例下1:1，写好的静态切图个图，调下透明度，叠加在设计稿上，是否重合？
本着这个指标，前端本身做到这个精细当前情况下，可以避免不规范导致的返工，可以义正辞严的说是UI问题、客户变动。或者一些图简单图片处理，与UI沟通几个回合时间，都能多码几行代码了。

首先掌握快捷键的成本很低，因为绝大部分办公软件、代码编辑工具、设计工具基于用户习惯，需要统一一些常用的快捷（如复制crtl+c、粘贴crtl+V、打开crtl+o、新建crtl+n，保存crtl+s，关闭当前crtl+w等等），用户不习惯的软件即便好用也会被淘汰（如一个软件把关闭快捷设置为crlt+c，每次习惯性复制却关闭了会不会疯会不会用^_）

言归正传：

一、目标前端样式效果

.
在这里插入图片描述

二、组合快捷切图示范

.
①快捷V ———使用【移动工具】
②crtl+空格+单击 ———放大
③空格+鼠标移动 ———拖动psd设计稿
④ctrl+单击右侧图层 ———选中icon区域
⑤ctrl+C ———复制
⑥ctrl+N +回车 ———创建
⑦ctrl+V ———粘贴，并鼠标取消背景
⑧crtl+shift+alt+s ———保存图片格式

切图过程如下视频：

对应实操视频效果↑

三、前端常用PS快捷

.
快捷键UI设计部分的尽量砍掉了

快捷键	说明
工具一览	工具包的快捷键就不介绍，鼠标【选中】移动上去就能看到，都是单个字母的；没效果，切换成英文输入法，谢谢
ctrl+H	显示/隐藏参考线，规范的设计师会比较多的参考线
crtl+ R	显示/隐藏坐标轴
crtl+Y	颜色模式切换（RGB/CMYK）WEB和移动UI都是RGB，印刷使用CMYK
ctrl+单击	选中图层，选不中图层，得注意左上角这3个地方

crtl+c	复制当前图层的，配合选区工具，选中的图层、选中的区域进行复制，所以常用下个快捷：
crtl+shift+C	复制可见图层，有的是jpg的，不顶用，那是图层被锁定了，需要双击图层解锁如下图：
crtl+空格+单击	放大
crtl+ “+”	放大
crtl+空格+鼠标拖动区域	拖动的区域放大,如1px的边框吸颜色，这个一步到位放大
alt+鼠标滚轮	放大缩小
alt+空格+单击	缩小
crtl+ “-”	缩小
鼠标右双击放大镜	设计稿真实比例1:1，相当于web 100%比例
crlt+T	调整内容范围，配合shift+拖动按比例缩放（有选区则作用域选区，没选区则作用域图层）【回车确认】
crlt+D	取消选框/选区
crtl+delete/alt+delete
crlt+W	关闭当前设计稿
crtl+Q	退出ps，就是关了ps
crtl+E	图层向下合并，如果字体图层在常规图层下方，则需两个选中按crtl+E才生效
crlt+J	复制选中的图层
crtl+alt+C	修改画布大小，针对N个图层（jpg等图片格式是一个图层，就是改图片尺寸）
*	承接上方切图拼成的雪碧图（sprite），图标是2020，要排10个图标，改为20200，如下2图：使用:保存为图片名称（HTTP2.0以上，纯粹通过拼图降低请求数已经过期，只需了解，不需太花功夫折腾这么拼）
ctrl+alt+shift+S	当前整个ps保存为图片格式，大部分设计师常用文件→存储为/导出→选择格式→选择路径后保存，这操作缺点在于操作慢，特别是导出背景图或者海报，大小都超标，2、5、8M的前端就直接用上了。这个快捷方式，图片格式和品质都会保存上一次的

主要精准写出margin 和padding的值，配合计算字体大小，和行高，如：行高50px，字体30px，文字垂直居中，标题距离上一个区块为20px，那标题这样已经有10px的上边距，标题整体只需要头部10px的边距

四、web图标（icon）基本原则：

1、优先使用UI框架（如uView、iView、color-UI、element-ui、bootstrap、vant、WE-UI等等）的图标，（提前与UI或业主沟通），加载效率、清晰美观度、修改维护都满足；
2、图标不多一般10-20个数量的，可以使用雪碧图
3、图标数量多的，上传iconfonts，应用字体图标
4、图片数量少10个内，散装就行
5、图片追求加载速用gif
6、图片追求清晰，用svg格式

base64、雪碧图的性能分析：https://blog.csdn.net/weixin_39921970/article/details/113741457

五、切图原则

1、图片清晰的情况下，尽可能的小
这里的“小”指尺寸和内存，有时我们需要的海报只需要1920px500px，设计师或业主给的可能是4800px↑*3200px↑（手机端也可能给这个尺寸，只要前端直接用，那就是前端对性能没追求了，得压缩下尺寸拉到PS->对应上面ctrl+alt+shift+S的快捷设置图片）
2、杜绝模糊、变形
3、同类图标应范围一致，如下图，虽然图片都是100px × 100px的，但是图标并不一样。
在这里插入图片描述

六、推荐图片尺寸

手机端：

开屏全屏海报：100kb-200kb
常规海报：100K以内
配图：50k内
图标：50k内，优先字体图标，超过15个以上，可上传在线图标库，再使用字体图标，如svg格式上传iconfont，无论尺寸定义大还是小，就没有模糊了情况了

PC端：

锚定全屏海报：200Kb内
常规海报：1920×500至800的，200Kb内
配图：50k内
图标：50k内
整页海报：可background的repeat的方式做全屏，一般不搞，除非说服我这个全屏能让浏览者或业主方不跑掉的理由，那值得牺性能或者氪金服务器云存储
①背景用background颜色
②其他背景上的图片素材独立为图片
③有必要则一层写背景，一层用background放多图

七、切图演示：

要求：切下图图标，和鼠标事件所需背景
在这里插入图片描述
1、分析
①只需要图标，文字用调用的，只需要切图标
②鼠标hover时，4边有角的效果，可以用切图或者用div直接写
③鼠标hover时，有背景圆
④ 如果是img的情况，只能用单个保存，如果是background可以用雪碧拼图

最终定下：
图标和背景的圆
2、切图
在这里插入图片描述
①快捷V
②左上角确定下是否图层
③【crtl+单击】直接出现‘蚂蚁线’选区（如果没有查看上一步）
④【ctrl+shift+C】 //复制可见图层，这一步只是为了拿图片的范围
⑤【ctrl+ALT+N 】 //创建上一步范围的图片范围

在这里插入图片描述
⑥弹窗回车
⑦crlt+v，去掉背景

⑧ctrl+alt+shift+s保存，查看下大小和背景正常即可
在这里插入图片描述
以上，单个图片、海报切图就够用了

下面是图标是否模糊，是否雪碧图的处理：
继续以上图为例，图标宽度为78px × 116px，我设置为100px × 120px：
优点：
①UI的图标尺寸不一样，img情况，就是100px × 120px，图片绝对居中，
②background的情况或雪碧图方便计算，不管是左排还是下排，只需要-100 还是-120的问题

上①的图例：
在这里插入图片描述
上②效果：

八、精准尺寸测量，1px不差

作为职业前端，是专业的，心中有一把尺子。如果UI质疑你的布局，产品质疑你的布局，客户质疑你的布局，你是没有尺子的前端，是还不够专业，也必定耗费心力在的html css上的调整。

总结一句话：ps可以精确到1px，但布局中，不需要盲目追求1px。

情况1：以下布局，边框如果是每个div写了border1px，除了丑之外，布局都会被打乱
1px，边框不处理情况
在这里插入图片描述
1px边框处理后：

1px不较真情况：
下图背景png，上下相差1px，甚至相差100px 都不影响UI美感，可以不较真。

情况2：UI设计偏差
手机端常用设计稿宽度标准尺寸：
750px
PC端常用宽度标准尺寸
1920px
在宽度上，UI可能是99px，29px，9px 这个是在设计过程中，有1px的偏差，这个不是因为处女座，强迫症，一定要整数，按设备的正常分辨率情况，它都应该是整数，特别是移动端

情况3：
字体行高，或字体类别影响的字间距（letter-space）和行间距（line-height）
蓝湖和PC的测量会有些差异：
如果不写line-height,下图，只写了文字div，顶部20px，就会少了（30px-22px）/2=4px的顶部距离
如果包文字的标签，不能有padding-bottom属性。
在这里插入图片描述