前端初级技能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中加入许多无语义的容器标签，但相较于页面加载时间的提高，这点损失也是微不足道的。

 

以上。