灵活运用PS切图技巧
系列
前言
话说，之前的前端工程师在入行时都当过切图仔或切图女。曾经，切图做为前端一门基础且必备的技能，不知什么时候开始已经再也不提起。不少面试官在招聘时都忽略了PS的存在，其实在国外一位优秀的前端工程师是包揽设计工做的，PS玩得可溜呢。html
如今大部分的前端工程师都说，这个图让设计师去切吧，这个图标这样这样切，那个背景图抽离出来，要这层不要那层。说多了感受会被设计师拿刀砍死，就像下面那样。。。前端
有时候设计师切出来的效果多是下图左边酱紫的，可是你指望的切图效果可能又是下图右边酱紫的。为何会存在这种差别呢，我曾经当过大半年的UI设计师，从设计师的角度来看，没有过多考虑代码对切图的加成和代码实现布局的影响。node
例如轮廓outline、外边距margin、内边距padding、圆角border-radius、 盒子阴影box-shadow、滤镜filter、行高line-height、文字阴影text-shadow等CSS属性在PS上的表现仍是会存在差别的，标准不一，设计师没法理解代码里的规范，开发者没法理解设计里的规范，再加上各类图层叠加效果以及融合变化，因此很难分离出开发者想要的效果。因此只有熟练操做PS才能分离出开发者想要的图层及其效果，为切图规范标准化。git
为何今天我要把这个话题提出来呢，我只想说明有时候本身切出来的图才是本身想要的。若是不想像下面这样，仍是赶忙必备下几个经常使用的切图小技能吧。本身动手，丰衣足食，无可奉告，一边玩去。github
热键
贴下切图经常使用的快捷键，我对这些快捷键操做进行了分类，方便记忆，只需记住如下经常使用快捷键便可。面试
文件快捷键segmentfault
- 退出程序：
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) → 勾选
自动选择→ 选择图层
- 移动工具(v) → 勾选
- 步骤
- 选择目标：
alt+ 左击目标 (移步到图层视图，此时已选中所需图层) - 隐层图层：
alt+ 左击当前图层的显示图标(此时已在透明前景色显示目标)
- 选择目标：
快速选择复合图层
首次使用时需配置：同上
- 场景：复合元素选择(多图层组成的图标、按钮、背景图)
- 准备：首次使用时先配置
- 移动工具(v) → 勾选
自动选择→ 选择图层
- 移动工具(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命名 - 自动保存倍数图：图层/组使用
xxx@2x.png、xxx@3x.png命名
- 自动保存JPG：图层/组使用
快速批量处理图片
- 场景：大批量无脑操做图片处理
- 准备：首次使用时先记录动做样本
- 动做面板(
F9) → 新建动做 → 录制动做(操做一波切图流程) → 中止记录
- 动做面板(
- 步骤
- 选择批处理：
文件→自动→批处理 - 选择处理动做：1
- 选择源文件：2
- 选择输出文件：3
- 选择批处理：
快速扣取毛发背景
- 场景：包含毛发的背景分离
- 步骤：稍微复杂，直接贴教程
注意
Photoshop尽可能使用CC版本才能享受以上所有技巧，新版本可经过Adobe Creative Cloud来进行管理(安装和更新)，还能够配合其余Adobe软件一块儿使用。安装和破解的教程就不出了，网上一搜一大堆，都是傻瓜式的安装和破解。
在这里推荐一个PS第三方加强工具：像素大厨(必须下载了PS才能使用)，若是不须要切图只须要量取一些标注信息，使用它更快更方便，轻量级的应用，值得一用！
结语
写到最后总结得差很少了，后续若是我想起还有哪些PS切图技巧遗漏的，会继续在这篇文章上补全，同时也但愿各位朋友对文章里的要点进行补充或者提出本身的看法。欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。
最后送你们一个键盘！
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["Bs","Tab","Caps","Enter"][p++]||'Shift',p])}\\|`,m+=y+(x+' ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join` `)()
复制代码
专栏文章
原文：请戳这里
做者：JowayYoung
仓库：Github
博客：掘金、思否、知乎
公众号：Uzero
联系我：关注公众号后有个人微信哟
《灵活运用》系列
- 灵活运用CSS开发技巧 强烈推荐收藏👍
- 灵活运用JS开发技巧 强烈推荐收藏👍
- 灵活运用PS切图技巧 强烈推荐收藏👍
《依赖汇总》系列
- NPM依赖：构建编译 强烈推荐收藏👍
- NPM依赖：框架平台 强烈推荐收藏👍
- NPM依赖：类库工具 强烈推荐收藏👍
《必备工具》系列
- Cmder&iTerm美化你的终端 强烈推荐收藏👍
《随笔》系列
- 一个零配置开箱即用的React&Vue应用自动化构建脚手架 强烈推荐收藏👍
- 前端性能优化指南 强烈推荐收藏👍
- 详细判断浏览器运行环境 强烈推荐收藏👍
- H5与App的通信方式 强烈推荐收藏👍
- 1.5万字归纳ES6所有特性 强烈推荐收藏👍
关注公众号Uzero，更多前端小干货等着你喔！我是JowayYoung，喜欢分享前端技术和生活纪事，学习与生活不落下，天天进步一点点，与你们相伴成长
- 1. 灵活运用PS切图技巧
- 2. ps切图技巧
- 3. PS切图技巧
- 4. 灵活运用JS开发技巧
- 5. 灵活运用CSS开发技巧
- 6. 灵活运用JavaScript开发技巧
- 7. 前端PS切图技巧（一）
- 8. 灵活运用CSS开发技巧(66个实用技巧，值得收藏)
- 9. PS 抠图技巧
- 10. 切图技巧
- 更多相关文章...
- • Markdown 高级技巧 - Markdown 教程
- • Docker ps 命令 - Docker命令大全
- • Composer 安装与使用
- • Docker容器实战(一) - 封神Server端技术
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 灵活运用PS切图技巧
- 2. ps切图技巧
- 3. PS切图技巧
- 4. 灵活运用JS开发技巧
- 5. 灵活运用CSS开发技巧
- 6. 灵活运用JavaScript开发技巧
- 7. 前端PS切图技巧（一）
- 8. 灵活运用CSS开发技巧(66个实用技巧，值得收藏)
- 9. PS 抠图技巧
- 10. 切图技巧