一、背景介绍
为什么前端工程师要用PS切图？
作为前端，我们需要负责把UI设计的图片，实现成HTML网页，在实现过程中，要用PS把需要的图标切出来。另外，在制作雪碧图的过程中也要用到PS切图。
二、知识剖析
在一张UI图片中，我们需要获取哪些有用信息？
一张图片拿到我们手里，首先要做的就是观察整个布局，思考我们应该用什么方式实现网页的制作。
最基本的，图片中的字体，图标的颜色、大小，图标之间的间距，这些都是我们需要从一张UI图片中获取的信息。
我们可以通过选中图片中的文字，通过字符栏看到文字的字体，文字的大小，字间距，行间距等信息，可以通过吸管工具选中图标，从拾色器中看到颜色的六位编码，可以通过标尺工具测量图标的大小，间距等。
三、常见问题
有哪些切图的方式？怎么切才能又快又好？
四、解决方案
以下，我列出了四种切图的方式。
1、传统切图
2、简单切图
3、自动切图
4、脚本切图
传统切图，即是手动切图，用切片工具框选所需要的图标，保存成web格式的图片。但是这种方式的弊端就是切图比较慢，而且如果图标不是矩形，还会导致切出的图片中带有背景，这并不是我们想要的。另外，如果图标比较多，我们还可以利用参考线来使切图更精准，点击基于参考线切图，还能加快切图的速度。不过这也导致切出很多我们并不需要的图标。所以这种方式并不好。
简单切图。Photoshop CC版本比CS6版本多了一些功能，比如选中所需图标的图层后，右键可以直接快速导出png格式。如果想把多个图层导出到一张图片上，可以选中多个图层，右键转换为智能对象，再次右键，编辑内容，即可在新打开的窗口中保存为png格式。CS6版本上没有右键快捷导出功能，但是可以用智能对象导出，也很方便。这种方法的优点是不带背景，简单。
自动切图。选择编辑>首选项>增效工具>启动生成器，然后文件>生成>图像资源，具体可以看我的视频演示。这种方式只需要重命名图层即可生成jpg或png格式的图片，还可以将图片放大。这种切图方式也很方便，切得也很快。
脚本切图。选择文件>导出>将图层导出到文件。接下来就等着PS自动运行完成，图片也就切完了。这种方式虽然完全不需要手动去切，但是也会产生很多你不需要的图片。
至于哪种方式适合你，就按实际情况自己选择了。
五、编码实战
六、扩展思考
为什么有时候图片切出来有白边和锯齿？
这是因为在转换为web格式时，有时候会默认转换为png8的格式，这是一种质量比较低的图片格式。我自己在做任务的时候也遇到过这个问题，只需要看在转换时把格式选择png24就行了。
七、参考文献
八、更多讨论
1、除此之外还有哪些切图方式？
2、切图中还会遇到哪些问题？
3、在网页中图片很多的情况下选择哪种切图方式更快更方便？
在实际学习工作中，有些人用的是新建一个页面，将图层复制进去，有些人则是用的传统切图。
在切图中，可能会发生某个图片应该用css直接画出来还是用切图来实现的问题。这就需要跟产品进行协商，了解清楚他想实现的效果和要求。有的时候，图片中的效果和制作的网页是有差别的，比如间距，图标的大小等问题。这就需要和UI进行沟通。
网页图片多的情况如何选择，那也是仁者见仁，智者见智的问题，看个人喜好吧。
网友评论