前端初级技能No.1 [切图]

“切图”是指通过测量设计稿，从设计稿中提取图片等方式为页面开发提供支持的过程。

整个“切图”过程主要分为以下五个主要步骤：

1. 分析设计图；
2. 测量元素；
3. 提取图片；
4. 保存图片；
5. 图片优化与合并；

1.分析设计图

以前我做练习时，往往是拿起一份PSD设计稿，大致看上两眼就开始边敲代码边切了，后来踩了一些坑才意识到这样的做法效率低下。有时代码敲着敲着会突然发现，哎？这里有一个下拉菜单？或者有时发现，哎？这里是不是可以重用之前的代码？通常这样的后知后觉都令人追悔莫及，所以慢慢也要求自己事先要留个心眼。所以第一步“分析设计图”我认为还可以分为以下三个部分：

• • 仔细浏览设计图，考虑网页的整体结构（在这里心中就可以预想页面将来的编辑方式，划分为几个区域？大体如何实现？）；
  • 仔细查找页面各部分是否有隐藏下拉菜单，hover效果等隐藏设计（好的设计师应对此提前在说明文档中注明）；
  • 观察页面结构，考虑代码重用的可能；

2.测量元素

切图主要测量的对象有：文字大小，图片，间距与颜色；这里以PS工具为例，基本上前三者都可以使用矩形工具（M）完成，后者主要使用吸管工具（I）。一般来说，在参考线，标尺具备的前提下，图片越放大，测量精度越高。

3.提取图片

所提取的图片大致可以分为直接在页面上呈现的内容型图片，和作为背景使用的修饰性图片，对于前者直接切下来保存就好，而对于后者则需要分离其前景图案，文字，之后再切下保存。对于比较特别的修饰性图片，可以只切其一部分，使用CSS的repeat属性进行重复以节约存储空间，提高页面加载速度；具体步骤如下：

• • 隐藏文字只留背景；这里又分为两种情况，第一种是文字为独立图层，那么只需使该图层不可见即可，第二种为图片与文字融为一体，这种情况下基本的思路是平铺遮盖，但是根据背景性质不同分为可拉伸与不可拉伸两种状况，前者需使用矩形选框+自由变换拉伸遮盖，后者使用矩形选框+Alt+移动工具移动遮盖；
  • 使用移动工具（V）选中所需图层（若有多个图层则复选后右键合并图层Ctrl+E）；
  • 在所选图层上右键“复制图层到新文件”；
  • 裁切新文件画布大小；

这种方法的缺陷在于步骤太多，操作不便，而且所切图像新建画布有时太大，因此我通常使用另外一种方法，这种方法对视设计稿大小对机器性能有一定要求：

• • 矩形选框选好目标对象；
  • 合并可见图层（Ctrl+Shift+E）；
  • 复制所选对象（Ctrl+C），新建图层（Ctrl+N），粘贴所选对象（Ctrl+V）；

这种方法的优点在于图片要多大切多大，省去了裁切画布的麻烦，而且快捷键操作效率高，缺点则在于要用矩形选框框住目标对象，而且文件较大时，合并所有可见图层较慢。

4.图片保存

保存需要考虑保存方式，图片格式，图片命名三个部分。

保存方式是指页面图片选定后如何选择图层保存的问题，是逐一保存？还是使用Sprite技术进行合并？，需要提前规划好，可以省去后面很多合并图片的时间；

图片格式则主要指要根据所需保存图片的类型选择相应的图片格式，我们通常用PNG格式用来保存有透明图像，用JPG格式保存颜色丰满图像，用GIF格式保存动图；

搞定前两步，最后一步便是对图片的命名，不要小看图像的命名，使用清晰，准确，描述性的名称命名图像（例如：“.header__banner”）可以节省后期图片变更时查找图片所耗费的时间。

5.图片优化与合并

图片优化与合并是两回事，优化是指对图片进行压缩，使其既满足用户视觉需要，文件大小又尽可能的小；而图片合并是指，使用“图片精灵”技术，将多张图片（通常是图标）合并为一张图片，以节省加载次数。

但这样做的则弊端在于，为了使用CSS背景定位，必须要在HTML中加入许多无语义的容器标签，但相较于页面加载时间的提升，这点损失也是微不足道的。

以上。