相信每一个刚上手项目的前端都会被这种七零八碎的PS切图搞得晕头转向，下面就来一篇干货，传授前端切图的每一项必杀技，不多不少，足够你在WD这个领域驰骋天下。
---------------------------------------------------------下面是重点---------------------------------------------------------

涉及方面

1.1前端切图常用快捷键
1.2其他快捷键设置方法
2.1几项原则
2.2结语

1.1 只讲前端最经常用到的快捷键

1.1.1 工具箱基础功能汇总

工具箱（标星号的表内有多个同类工具，你可以按“Shift”键加相应的快捷键来循环切换）
移动工具 - V
选框工具 - M *
套索工具 - L *
裁剪工具 - C *
快速选择/魔术棒 - W *
修复画笔 – J *
橡皮擦 – E *
渐变工具/油漆桶 - G *
钢笔工具 - P *
文字工具 - T *
切换前景色/背景色 - X
默认的前景色/背景色 - D
矩形/圆形/多边形/椭圆工具 - U *
减淡/加深/海绵工具 - O *
历史记录画笔工具 – Y *
旋转视图工具 - R
抓手工具 – H

---------------------------------------------------------下面是重点---------------------------------------------------------

M 选框工具 Shift + M 矩形 椭圆选框工具切换

如果有热键冲突请参照下面进行首选项修改
修改为可直接输入M快捷键来切换矩形选框工具和椭圆选框工具。
操作如下：
photoshop菜单 ----> 编辑 ----> 首选项 ----> 常规 ----> 使用Shift键切换工具
将原来的 √ 去掉
之后就可以直接使用 M进行切换了哦~

C 裁剪工具 (Shift) + C 裁剪工具箱工具切换

遇到设计给的图比较大，用裁剪经常会卡死，所以大图尽量不要裁剪，这种方式很直接但是要比新建拷贝到新文件占用更多的内存。

V 移动工具

键盘空格可以临时控制图层移动

L 套索工具 W 魔棒工具 J 修复画笔工具 B 画笔工具

S 图章工具 Y 历史记录画笔 Shift + Y 历史记录画笔切换
用的很少,不做累述
1.1.2 快捷键介绍

选择功能

Ctrl + A 全部选择
Ctrl + D 取消选择
Ctrl + Shift + D 重新选择
Ctrl + Shift + I 反选

图层功能

Ctrl + N 新建文档
Ctrl + Shift + N 新建图层 - 创建一个新的图层，会有弹框可以修改图层名称
嫌麻烦的朋友使用 Ctrl + Alt + Shift + N直接快速建立新图层，不会弹出框让你设置东西
Ctrl+J 　通过拷贝建立一个图层(无对话框)
ctrl+Alt+J 　从对话框建立一个通过拷贝的图层
Ctrl+Shift+J 　通过剪切建立一个图层(无对话框)
Ctrl + Alt + I 调整图像大小
Ctrl+O 打开文件
Ctrl+W 关闭当前文件
Ctrl+S 保存当前图像
Ctrl+Shift+S　 另存为...
Ctrl+Q 退出photoshop
Ctrl + R 拉出小窗口，在使用标尺线时比较方便
Ctrl+Alt+Shift+S 存储为web所用格式
可以说是前端一定一定要用的快捷键了 ，弹出的对话框中选择保存格式，可以查看生成的图片大小并修改格式，一定注意如果要保留透明背景必须要选择png格式才可以。
一般小的icon使用png格式，否则使用jpeg，对于对像素要求不是特别高的场合，比如二维码，保存质量为中即可，最重要的还是加载速度速度速度~

编辑操作

Ctrl+Z 还原/重做前一步操作
Ctrl+(Alt)+Z 可以一步一步还原之前的操作，无限后退直到最后一步操作
Ctrl+C 　拷贝选取的图像或路径
Ctrl+Shfit+C 合并拷贝
Ctrl+T 自由变换

1.1.2 常用操作

切片工具

一个在工具栏里不起眼的小刀刀，却是切图量尺寸中的必备，一个还原度100%的前端绝对离不开切片

双击查看宽高

ZO1109FF(AKRGKOQJ966TEH.png

将图片划分为多块，防止一张图片加载速度过慢而导致网页空白无内容

选择切片 ----> 在图像区域单击右键 ----> 划分切片 ----> 保存为web所用格式 ----> 存储选项选择html和图片 ---->
![DK6DR_{W}}3Y5J)YJ$]7}M%T.png](https://img.haomeiwen.com/i9357687/0cad786fbef42ed6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
存储选项选择html和图片

image.png
最后就可以得到宽度间隔均匀的图片啦~
image.png

1.2其他快捷键设置方法

Ctrl+Shift+Alt+K 打开键盘快捷键和菜单设置，把你常用的一些操作在此进行自定义

2.1前端切图规范

几项原则

1.能用颜色的用颜色，不能用颜色的用平铺的用平铺，最后才考虑用图片，尽量使用sprite技术，尽可能减少HTTP请求次数。
2.对于色彩比较丰富且没有透明要求的图片使用png格式，对于有透明度要求的图片使用png24格式，并对IE6进行png8退化。对于色彩不是很丰富的图片建议采用png8格式。
可以使用工具对图片进行再次压缩，但前提是不会影响色彩和透明。
建议使用谷歌的 webp
此外，可以遵循此规则： 最终k数原则上不能超过以下公式计算出的结果：k数≤宽高0.4/1024
3.命名要符合适用场景
背景图片以bg_开头来命名，图标以ico_开头来命名，按钮则以btn_开头来命名，雪碧图则以sprite_开头来命名

2.2结语

多切多练多请教。
前端小白献上