最近，许多小伙伴出去找工作，有的面试官给了一份psd图，让面试人员当场花一个小时还原静态页面等。拿到psd图，却不知道如何下手。因此失去工作的机会，这时候一定要怪自己了！

    UI设计师给前端开发的一般是原稿psd文件，有的UI设计师会把图标给切好，或许挺好的了。但是有的时候可能需要的东西UI设计师没有切出来，你就要去找UI设计师切好了再发给我们，这样一来，耗时又麻烦，所以不如自己学一些简单切图方法~

前端小白：什么是切图？

PS大牛：简单点说：将UI设计师给的psd图文件切出前端可用的图片/图标。比如说logo、小图标，背景图等

前端小白：你可以给我讲讲如何切图吗？

PS大牛：好！今天，给大家来点干货！让你快速掌握切图的技能~

PS界面常用工具

移动工具

勾选自动选择，后面默认是选择组。改成“图层”，设置好后，单击图层就能选中图层中的图像进行移动（会自动定位到相应的图层）。

智能参考线

可以从“标尺”拉出参考线到画布中

操作过程的知识点：

1、如果没有上边和左边的“标尺”，按ctrl+R键，显示/隐藏标尺

2、隐藏/显示参考线，快捷键是：ctrl+；（ctrl加分号）

3、单击标尺栏，选择“像素”

4、垂直拉出参考线后按住Alt可切换水平竖直参考线

5、若删除参考线，将参考线拖回标尺即可

矩形选框工具

若想快速P掉“前端”2个字，可以使用选框工具来实现

操作步骤：

1、点击选框工具

2、框选“前”字

3、点击“前景色”，出现一个吸管

4、吸取“黄颜色”或者附近“白颜色”

5、点击确认，然后按住Alt+Delete键，就可覆盖字了。

编辑文字

1、点击“T”字的图标，进行文字编辑

2、写完文字，按【Ctrl】+【Enter】键退出编辑

3、若要改变文字大小，可按【Ctrl】+【T】自由变换，出现变换的小黑框，再按住【Shift】键，以1:1不变形来拖动快速调整大小。

导出png图片

方法一：在图层上单击右键，快速导出。

方法二：点击：文件-导出-储存为Web所用格式-存储。

PS实用快捷键

新建图形文件 【Ctrl】+【N】 

保存当前图像 【Ctrl】+【S】

自由变换 【Ctrl】+【T】

放大视图 【Ctrl】+【+】 

缩小视图 【Ctrl】+【-】

合并可见图层 【Ctrl】+【Shift】+【E】

对于前端来说，PS可不用精通，了解学习一些简单的操作即可~今天的教程你学会了吗？

作者：小精灵

原文链接： http://mp.weixin.qq.com/s/qmc7Jb5YMKcSCC8SyiObPg

欢迎关注微信公众号【前端体系】，回复【礼物】即可获得“微信小程序”学习资料~ “领干货” 一起提升技能！

未经授权，不得转载。