ps 切图

前端开发人员在开发一些比较炫的网页时，经常需要进行切图。这个时候，怎样切图，需要切哪些图，决定了开发的效率。本文简单讲解下，我在实践过程中的总结。

1.怎样切图？

用哪个软件切图取决于设计给你哪种格式的设计图，一般来说为psd图或者sketch图，psd图用photoshop切取，而sketch图用sketch软件进行截取。本文简单介绍如何用ps进行切图。首先应该明白一个概念，psd图是由图层构成的，图层是什么，可以自行了解。我们首先需要找到需要截取的图层，之后，利用ps中的切片工具，将需要截取的范围划分出来。之后，选择文件－－存储为web所用格式。在弹出的对话框中，选择需要保存的图片类型，一般来说为jpg或者png。这里需要注意一下，如果我们想截取透明背景的图片，需要保存为png格式，如果没有这个要求，则对格式的要求就没有严格限制了。

切片工具

2.截取哪些图

学会了ps切图，还应该明白，我们需要切取哪些图。一般来说有以下原则，背景图单独切出；需要用户看到的内容单独切出；在需要用户看到的内容中，有特殊动态的、需要用户交互的单独切出。之所以这样切取，是考虑到浏览器的兼容问题，不同屏宽的电脑，在显示同一个页面时，是不相同的。屏幕窄的页面自然会显示的窄一些。这个时候如果内容过宽，会出现屏幕窄的电脑显示不全的情况。在这个情况下，需要我们将内容固定在一个宽度内，这个宽度要比最窄的电脑屏幕窄。之后，我们在这个内容区域内进行布局。这样就避免了网页内容显示不全的情况。