专栏首页JowayYoung谈前端前端妙用PS切图技巧,助你加薪一把

前端妙用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.png8xxx.png24命名
    • 自动保存SVG:图层/组使用xxx.svg命名
    • 自动保存倍数图:图层/组使用xxx@2x.pngxxx@3x.png命名
快速批量处理图片
  • 场景:「大批量无脑操作图片处理」
  • 准备:首次使用时先记录动作样本
    • 动作面板(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`
`)()

结语

「❤️关注+点赞+收藏+评论+转发❤️」,原创不易,鼓励笔者创作更好的文章

「关注公众号IQ前端,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔」

本文分享自微信公众号 - IQ前端(gh_4593b39979fb),作者:JowayYoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 灵活运用PS切图技巧

    话说,以前的前端工程师在入行时都当过切图仔或切图女。曾经,切图作为前端一门基础且必备的技能,不知何时开始已经不再提起。很多面试官在招聘时都忽略了PS的存在,其实...

    JowayYoung
  • 聊聊NPM镜像那些险象环生的坑

    由于国内网络环境的原因,在执行npm i安装项目依赖过程中,肯定会遇上安装过慢或安装失败的情况。有经验的同学通常会在安装完「Node」时顺便把「NPM镜像」设置...

    JowayYoung
  • 浅谈两种前端截图方式:Canvas截图 vs SVG截图

    如今很多网站都引入截图功能,可用于问题反馈、内容分享等实用需求,而前端截图也不知不觉成为了首选。今天为大家推荐两种前端截图方式,虽然有些局限,但是也能应付大部分...

    JowayYoung
  • 灵活运用PS切图技巧

    话说,以前的前端工程师在入行时都当过切图仔或切图女。曾经,切图作为前端一门基础且必备的技能,不知何时开始已经不再提起。很多面试官在招聘时都忽略了PS的存在,其实...

    JowayYoung
  • 新的AI相机可以彻底改变自动驾驶,更高效地处理图像

    当今自动驾驶汽车和无人机的基础的图像识别技术依赖AI:计算机基本上教自己识别像狗一样的物体,穿过街道的行人或停下来的汽车之类的物体。问题是运行AI算法的计算机目...

    AiTechYun
  • 多家P2P网贷平台因DDOS攻击而倒闭,P2P平台该怎么应对?

    最近这几年,国内P2P网贷平台大规模进入市场,在高速发展的同时,倒闭跑路、投资者信息安全等一系列问题层出不穷。一大波黑客也盯上了P2P平台这一块“肥肉”,黑客通...

    墨者盾
  • Java 响应式关系数据库连接了解一下

    响应式编程已经在 Java 编程领域出现很长一段时间了。具有高性能,事件驱动,充分利用计算资源,更加优雅的异步编程体验,同时它也提供了背压机制来防止系统过载。很...

    码农小胖哥
  • JsonArray和JsonObject遍历方法

    唐怀瑟
  • AAAI Oral 提前看:牛津大学利用注意力机制,实现最优相机定位(视频解读)

    人工智能顶级学术会议 AAAI 2020 (第 34 届 AAAI)已在美国纽约开幕,会议从 2 月 7 日持续到 2 月 12 日。

    AI科技评论
  • 中国互联网银行深度研究报告:互联网+银行前景与数据分析

    4. 互联网+银行:前途不可限量 4.1. 银行业的互联网渗透率仍处于低位 银行业资产规模基数庞大。2014 年银行业金融机构总资产规模达到 134.8 万亿元...

    CDA数据分析师

扫码关注云+社区

领取腾讯云代金券