灵活运用PS切图技巧

作者： JowayYoung
仓库： Github、 CodePen
博客：掘金、思否、知乎、简书、头条、 CSDN
公众号： IQ前端
联系我：关注公众号后有我的微信哟
特别声明：原创不易，未经授权不得对此文章进行转载或抄袭，否则按侵权处理，如需转载或开通公众号白名单可联系我，希望各位尊重原创的知识产权

系列

灵活运用CSS开发技巧 请戳这里，持续更新
灵活运用JS开发技巧 请戳这里，持续更新
灵活运用PS切图技巧 请戳这里，持续更新

前言

话说，以前的前端工程师在入行时都当过切图仔或切图女。曾经，切图作为前端一门基础且必备的技能，不知何时开始已经不再提起。很多面试官在招聘时都忽略了PS的存在，其实在国外一位优秀的前端工程师是包揽设计工作的，PS玩得可溜呢。

现在大部分的前端工程师都说，这个图让设计师去切吧，这个图标这样这样切，那个背景图抽离出来，要这层不要那层。说多了感觉会被设计师拿刀砍死，就像下面那样。。。

有时候设计师切出来的效果可能是下图左边酱紫的，但是你期望的切图效果可能又是下图右边酱紫的。为什么会存在这种差异呢，我曾经当过大半年的UI设计师，从设计师的角度来看，没有过多考虑代码对切图的加成和代码实现布局的影响。

例如轮廓outline、外边距margin、内边距padding、圆角border-radius、 盒子阴影box-shadow、滤镜filter、行高line-height、文字阴影text-shadow等CSS属性在PS上的表现还是会存在差异的，标准不一，设计师无法理解代码里的规范，开发者无法理解设计里的规范，再加上各种图层叠加效果以及融合变化，所以很难分离出开发者想要的效果。所以只有熟练操作PS才能分离出开发者想要的图层及其效果，为切图规范标准化。

为什么今天我要把这个话题提出来呢，我只想说明有时候自己切出来的图才是自己想要的。如果不想像下面这样，还是赶紧必备下几个常用的切图小技能吧。自己动手，丰衣足食，无可奉告，一边玩去。

热键

贴下切图常用的快捷键，我对这些快捷键操作进行了分类，方便记忆，只需记住以下常用快捷键即可。

文件快捷键

退出程序：ctrl/cmd + q
打开文件：ctrl/cmd + o
关闭文件：ctrl/cmd + w
新建文件：ctrl/cmd + n
保存文件：ctrl/cmd + s
保存副本：ctrl/cmd + alt + s
保存其他：ctrl/cmd + shift + s
保存切图：ctrl/cmd + shift + alt + s

工具快捷键

移动工具：v
选框工具：m
套索工具：l
魔棒工具：w
切片工具：c
吸管工具：i
修复工具：j
画笔工具：b
图章工具：s
历史工具：y
橡皮工具：e
渐变工具：g
减淡工具：o
钢笔工具：p
文字工具：t
路径工具：a
矩形工具：u
抓手工具：h
缩放工具：z

编辑快捷键

复制：ctrl/cmd + c
剪切：ctrl/cmd + x
粘贴：ctrl/cmd + v
撤销：ctrl/cmd + z
向后撤销：ctrl/cmd + alt + z
向前撤销：ctrl/cmd + shift + z
合并复制：ctrl/cmd + shift + c
原位粘贴：ctrl/cmd + shift + v

选择快捷键

全部选择：ctrl/cmd + a
取消选择：ctrl/cmd + d
重新选择：ctrl/cmd + shift + d
反向选择：ctrl/cmd + shift + i
羽化选择：ctrl/cmd + alt + d

视图快捷键

放大视图：ctrl/cmd + +
缩小视图：ctrl/cmd + -
满屏显示：ctrl/cmd + 0
实际显示：ctrl/cmd + 1
显示隐藏标尺：ctrl/cmd + r
显示隐藏网格：ctrl/cmd + "
显示隐藏参考线：ctrl/cmd + :
显示隐藏选择区域：ctrl/cmd + h

图层快捷键

复制图层：ctrl/cmd + j
合并图层：ctrl/cmd + e
变换图层：ctrl/cmd + t
新建图层：ctrl/cmd + shift + n
查找图层：ctrl/cmd + alt + shift + f
选择全部图层：ctrl/cmd + alt + a

备注

每次切图操作开始时，使用ctrl/cmd + +/-缩放到想要的视图大小
每次切图操作执行时，使用c切片工具对目标进行裁剪
每次切图操作结束时，使用ctrl/cmd + shift + alt + s保存切图
很多切图技巧都是靠平时积累，快捷键靠多记多用，用得多自然会顺手
遇到难以分离的图层，最好问问设计师实现原理是怎样的，再一步一步解锁图层
不要老是吐槽设计师切得不好切成自己不想要的，想要规范的切图自己动手来切
切图需要细心，1px都要切好，不要随便切切，细节决定成败，也是体现工作质量的表现
每次切图完成都不要保存，可通过历史记录回到文件打开的最初状态，重新裁剪下一个切片
以下技巧里提到的元素通通指一个切片集合(可由单个图层、多个图层、单个图层部分、多个图层部分组成)

技巧

快速选择单个图层

场景：单个元素选择(单图层组成的图标、按钮、背景图)
准备：首次使用时先配置
- 移动工具(v) → 勾选自动选择 → 选择图层
步骤
- 选择目标：alt + 左击目标 (移步到图层视图，此时已选中所需图层)
- 隐层图层：alt + 左击当前图层的显示图标 (此时已在透明前景色显示目标)

快速选择复合图层

首次使用时需配置：同上

场景：复合元素选择(多图层组成的图标、按钮、背景图)
准备：首次使用时先配置
- 移动工具(v) → 勾选自动选择 → 选择图层
步骤
- 选择目标：alt + 左击目标 (移步到图层视图，此时已选中所需图层)
- 选择图层：ctrl/cmd + 左击图层 (选中所有需要合并的图层)
- 合并图层：ctrl/cmd + e (生成新的目标图层)
- 隐层图层：alt + 左击当前图层的显示图标 (此时已在透明前景色显示目标)

快速复制切片副本

场景：同尺寸元素收集
步骤
- 复制切片：alt + 左击切片 (拖动切片副本到下一个目标上)

快速微调切片位置

场景：切片位置错位需纠正
步骤
- 1px微调：方向键
- 10px微调：shift + 方向键

快速均分等量切片

场景：精灵图均分、大尺寸图片均分
步骤
- 划分切片：右击切片 → 选择划分切片
- 调整网格：输入水平/垂直划分数量

快速读取样本颜色

场景：颜色获取
步骤
- 打开吸管工具：i (点击需要获取颜色的位置)
- 切换色彩面板：F6 (色彩面板已打开可忽略此步骤)
- 获取颜色：左击前景色 (直接复制粘贴)

快速读取文字信息

场景：文字信息获取
步骤
- 打开文字工具：t
- 定位文字：左击文字 (点击时需要点中文字中间的位置，否则可能生成新的文字图层)
- 切换文字面板：F6 (文字面板已打开可忽略此步骤)

快速取消图层关联

场景：图层关联起来无法单独分离
步骤
- 定位图层：鼠标挪到目标图层和关联图层的中间 (移步到图层视图中处理)
- 取消关联：alt + 左击两图层中间 (出现解锁关联图标时点击)

快速自动切取图标

场景：大量图标分离
准备：首次使用时先配置
- 编辑 → 首选项 → 增效工具 → 勾选启用生成器
- 重启PS
- 文件 → 生成 → 图像资源
- 以后步骤命名图层/组后自动生成切片(无需理会)
步骤
- 自动保存JPG：图层/组使用xxx.jpg命名(调整图片质量需在后缀加上数字，如60%质量的切片命名为xxx.jpg6)
- 自动保存PNG：图层/组使用xxx.png8或xxx.png24命名
- 自动保存SVG：图层/组使用xxx.svg命名
- 自动保存倍数图：图层/组使用[email protected]、[email protected]命名

快速批量处理图片

场景：大批量无脑操作图片处理
准备：首次使用时先记录动作样本
- 动作面板(F9) → 新建动作 → 录制动作(操作一波切图流程) → 停止记录
步骤
- 选择批处理：文件 → 自动 → 批处理
- 选择处理动作：1
- 选择源文件：2
- 选择输出文件：3

快速扣取毛发背景

场景：包含毛发的背景分离
步骤：稍微复杂，直接贴教程

注意

Photoshop尽量使用CC版本才能享受以上全部技巧，新版本可通过Adobe Creative Cloud来进行管理(安装和更新)，还可以配合其他Adobe软件一起使用。安装和破解的教程就不出了，网上一搜一大堆，都是傻瓜式的安装和破解。

在这里推荐一个PS第三方增强工具：像素大厨(必须下载了PS才能使用)，如果不需要切图只需要量取一些标注信息，使用它更快更方便，轻量级的应用，值得一用！

总结

写到最后总结得差不多了，如果后续我想起还有哪些遗漏的PS切图技巧，会继续在这篇文章上补全。

最后送大家一个键盘！

(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x

 
 结语 
 ❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创作更好的文章 
 关注公众号IQ前端，一个专注于CSS/JS开发技巧的前端公众号，更多前端小干货等着你喔 
  
  关注后回复关键词免费领取视频教程 
  关注后添加我微信拉你进技术交流群 
  欢迎关注IQ前端，更多CSS/JS开发技巧只在公众号推送