前端菜鸟起飞之学会ps切图

由于之前只顾着追求效率，没有学习过PS，但其实这是前端开发人员需要学会的技能之一，曾经看过一个大佬的前端经验分享说他在招聘时遇到不会切图的会直接pass掉，可见前端开发人员学会切图是多么重要。通过观看慕课网上的相关视频，觉得讲的很好，对前端人员需要掌握的一些ps技术有了大概了解，同时也突然领悟到，之前总是烦恼找不到静态页面去练习，只能找有现成素材的，但素材却挺难找。学会ps切图后，可以在网上直接找网页psd效果图，进行切图和静态页面效果实现练习。想要学习的朋友，可以直接慕课网上观看视频学习（https://www.imooc.com/coursescore/506)，找几张类似的图跟着练习就能有一定收获。

我用的是photoshopCC2014完整版,中文绿色版有些功能没有，可在网上下载软件，但这个软件是收费的，有钱的朋友可以支持下正版，但我比较穷。。。就只能根据网上教程下载注册机.

---

作为前端开发人员，主要需要掌握的是利用PS切图，下面根据视频总结几种切图方法。

传统切图

打开要切的psd图，选取切片工具，根据自己的需要切取自己想要的图片，如果psd图有参考线，点击基于参考线的切片，会出现很多切片，可以根据自己需求增减参考线生成切片，并删除自己不想要的切片。

切片导出方法，点击文件->存储为web所用格式，预设一栏可设置导出图片格式，一般选择png-24,会生成一个名为images的文件夹。

精准切图

练习过传统切图方法会觉得比较麻烦，但是pscc有一个可以精确切图的脚本。单击脚本-> 将图层导出到文件 ，可选择导出位置及类型,但是据我测验，如果图层切片太多，导出过程会非常非常缓慢。

在切图速度方面，有个解决办法是可以先对图进行裁剪后再来单独手动或自动切片，或许可以解决速率问题

扩展

除了上面所说的自动化切图方式，还有些好用的方法可获得图片。

单击编辑->首选项->增效工具->启用生成器，文件->生成->图像资源。
然后在图层中选择你想要的图片，重命名，文件后缀修改成你想要的格式，会自动生成一个文件夹，与源psd图在头一个文件夹中。

还可以通过修改文件名来控制切图其它属性

1.要导出不同的格式，只需把图层名称的后缀改成相应的格式后缀就可以了。默认jpg格式以90%品质生成，png格式以32为图像生成，gif以alpha透明度生成
2.要导出不同的大小：设置大小参数，大小要和名称之间加一个空格
百分比单位加上百分号
例：50% 88.png   150% 88.jpg
像素单位需要设置长度和宽度，不用加单位
例：300*200 88.png
3.改变图像的压缩比例
Jpg格式在后缀后面加上1-10或者1-100%.
例：150% 88.jpg5/80%
png格式输出品质设置分别为8，24，32.
例：150% 88.png24
4.如果想要删除图片可恢复名称不要后缀

---

今天学到了用ps做基本的切图，以后可以自己用psd图创建素材，切图是一件极其需要耐心的事，我们要坚持住，守得云开见月明，日常鸡汤来一段,加油！

“你现在的努力，辛苦，压力，承受的一切，都是为了攒够能力和本钱，去做自己更喜欢的事，去为自己争取选择的权利。”