前端人员必定要掌握的PS技巧

1、PS与前端知多少

通常咱们会认为PS是用来修改图片的，这些工做是美工人员作的事不是前端人员作的，其实这样想你就错了，由于在前端人员也是要学会一些简单的关于PS的技巧的，这样就不会应为一点点小小的需求总是要麻烦负责美工的同事来帮你改动一点点，再者这样也会对你的工做效率有所提升。在我看来其实前端人员须要掌握的PS知识大体上有这样一些：切图这个是必须的，也是本文的重中之重，而后是相应的对图片进行修改，大体上前端也就须要掌握这些PS内容就够了。除非你家公司没有美工人员或者是老板想省钱不招美工，所有的东西都由你作这个除外。

 

2、切图

 切图这个相信你们都应该知道是什么意思吧，这里就很少作解释。若是是对图片要求比较宽松的人员来讲，直接使用faststone这个工具就好了。可是这样切出来的图片通常十分的不精准，并且你们有没有注意到这样切出的图片背景不是透明的。做为一个完美主义者的我。是必定不会使用这个方法的下面咱们就来学习一下哪些方法能够精确的将图片切出。

2.1 自动化切图

 自动化顾名思义就是不用咱们人工去操做的，经过计算机脚本帮助咱们进行切图，这样作的好处是十分精准和方便。可是若是切去的图片较多的时候是十分适宜的，可是若是只切去一小部分的图片。建议你仍是使用下面的手工切图

 一、步骤以下：首先打开一张PSD文件，这里强调必定要是PSD文件。由于脚本的运行依据是图层，只有PSD文件才存在图层这种说法

 我使用的是下面的这张图片，图片素材在下面

PS:博主绝非广告狗，有谁但愿本人写博文顺便对其产品进行宣传的也可私聊哈

素材milk.psd下载地址：http://pan.baidu.com/s/1kVzYy5h

一、第一步选择以下说是：

 

二、第二步参数以下所示：

这里特别要注意的一点是第一个红色的方框必定要是英文，由于博主使用的是CS5版本，这样设置会发生错误，其余的版本就不清楚了。为了不出错，咱们统一使用英文命名，第二个方框我建议选择PNG，由于png支持背景透明，这个有利于咱们作自动切图

 

最终咱们在运行后的test文件夹下面打开效果以下，同时图片背景也是透明的

是否是这样切出来的图片既美观又方便呢？可是这样切图算是对计算机运算能力的考验，有时候PS软件还会出现假死的现象，因此在作切图的时候咱们须要在人工时间和计算机时间上面作一个权衡，毕竟不是什么都是自动化就是好的。对了，文件前缀名也不能为汉字，这个博主却是给忘了，你们将就一下吧。

 

2.2 手工切图

这里的手工切图是基于PS软件来实现的，即便是手工切图，PS软件仍是有不少地方优于直接使用如faststone之类的工具，因为PS软件有图层的区分，因此会捕获图层的边界，从而达到自动捕获的功能(有时候也是不能进行自动捕获的)

仍是以上述的图片为例：

首先咱们应该从标尺中拉去参考线，若是是没有标尺的话咱们能够在试图下面勾选标尺

拉完标尺参考线后，咱们选择切片工具（不知道的本身百度），选择上方的，效果图以下

 这个时候咱们会发现像中间的那个字体和牛奶都被分红了几部分，可是咱们是想要保持一个总体的，这个怎么办呢？咱们能够在相应要合成一个总体的切片上面右击，选择删除切片。这样就合成了一个总体

PS:因为中间的字体太太小，咱们能够经过ctrl+"+"/ctrl+"-"来控制放大或者缩小

咱们按下图所示进行选择

       

点击存储为，这样你的工做就行了，剩下的就是计算机的事了，坐等结果就能够了。

 

3、总结

 本来想着将一些相关的美化什么的也写一写，可是感受这样跑题了，今天咱们是要谈论前端对PS的应用，若是美化什么的都作了，那么不是抢了美工的饭碗吗，因此掌握切图对于一个前端工程师已经就够了，并且不少公司的切图都是由美工人员完成的，总的一句话，前端工程师代码写的溜什么毛线事都没有