话说,以前的前端工程师在入行时都当过「切图仔」或「切图女」。曾经,「切图」作为前端一门基础且必备的技能,不知何时开始已经不再提起。很多面试官在招聘时都忽略了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
保存切图自动选择
→ 选择图层
alt
+ 左击目标 (「移步到图层视图,此时已选中所需图层」)alt
+ 左击当前图层的显示图标
(「此时已在透明前景色显示目标」)❝首次使用时需配置:同上 ❞
自动选择
→ 选择图层
alt
+ 左击目标 (「移步到图层视图,此时已选中所需图层」)ctrl/cmd
+ 左击图层 (「选中所有需要合并的图层」)ctrl/cmd + e
(「生成新的目标图层」)alt
+ 左击当前图层的显示图标
(「此时已在透明前景色显示目标」)alt
+ 左击切片 (「拖动切片副本到下一个目标上」)shift
+ 方向键划分切片
i
(「点击需要获取颜色的位置」)F6
(「色彩面板已打开可忽略此步骤」)t
F6
(「文字面板已打开可忽略此步骤」)alt
+ 左击两图层中间 (「出现解锁关联图标时点击」)启用生成器
xxx.jpg
命名(调整图片质量需在后缀加上数字,如60%质量的切片命名为xxx.jpg6
)xxx.png8
或xxx.png24
命名xxx.svg
命名xxx@2x.png
、xxx@3x.png
命名F9
) → 新建动作 → 录制动作(「操作一波切图流程」) → 停止记录文件
→ 自动
→ 批处理
「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开发技巧的前端公众号,更多前端小干货等着你喔」