话说,以前的前端工程师在入行时都当过切图仔或切图女。曾经,切图作为前端一门基础且必备的技能,不知何时开始已经不再提起。很多面试官在招聘时都忽略了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`
`)()
关注公众号Uzero
,更多前端小干货等着你喔!我是JowayYoung
,喜欢分享前端技术和生活纪事,学习与生活不落下,每天进步一点点,与大家相伴成长