前端开发技巧-Photoshop


2018/5/27 ui photoshop

快捷键

文件快捷键

  • 退出程序: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

快速扣取毛发背景

场景:包含毛发的背景分离

步骤:操作较为复杂,这里是教程

上次更新: 10/24/2019, 12:39:39 AM