前端工程师技能之photoshop巧用系列第五篇——雪碧图

 

显示目录

目录

[1]定义 [2]应用场景 [3]合并[4]实现[5]维护

前面的话

　　前面已经介绍过，描述性图片最终要合并为雪碧图。本文是photoshop巧用系列第五篇——雪碧图

 

定义

　　css雪碧图(sprite)是一种网页图片应用处理方式，它容许将一个页面涉及到的全部零星图片都包含到一张大图中。使用雪碧图的处理方式能够实现两个优势：

　　　　【1】减小http请求次数

　　　　【2】减小图片大小，提高网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度)

　　凡事都不完美，实现优势的同时也带来了缺点，即提升了网页的开发和维护成本。

 

应用场景

　　前面提到过，并非全部的图片均可以用来制做雪碧图，只有描述性图片才适合

　　【1】对于img标签设置的内容性图片，是不能合并到雪碧图的，若是合并这些图片会影响页面可读性，语义化下降且可调整的范围小

　　【2】对于横向和纵向都平铺的图片，也不能合并到雪碧图中。若是是横向平铺，只能将全部横向平铺的图合并成一张大图，只能竖直排列，不能水平排列；若是是纵向平铺，只能将全部纵向平铺的图合并成一张大图，只能水平排列，不能竖直排列

合并

　　雪碧图的制做实际上就是零星小图合并成一张大图，但小图合并须要遵循如下规则：

　　【1】图片在合并以前必须保留空隙

　　一、若是是小图标，留的空隙可适当小一些，通常20像素左右

　　二、若是是大图标，要留的空隙就要大一点，由于大图标在调整的时候，影响到的空间也会比较大

　　【2】图片排列方式有横向和纵向

　　【3】合并分类的原则

　　　　有三种合并分类的原则，分别是基于模块、基于大小和基于色彩

　　　　a、把同属一个模块的图片进行合并

　　　　b、把大小相近的图片进行合并

　　　　c、把色彩相近的图片进行合并

　　【4】合并推荐

　　　　在实际的雪碧图制做中，通常采用两种方法：一种是只本页用到的图片合并；另外一种是有状态的图标合并

 

实现

　　在之前，咱们可能须要手动实现雪碧图，这是一件很是麻烦的且容易出错的事情。如今有了不少方便的工具来制做雪碧图。我常常使用是一个叫作css背景合并工具的小工具。

　　使用方法以下图所示：

 

维护

【放大画布】

　　图像 -> 画布大小<alt+ctrl+c> -> 选择定位位置(通常为左上角)

【减少画布】

　　  [注意]PNG8的颜色模式默认为索引颜色模式，在修改png8图片时须要更改其颜色模式为RGB模式，步骤为图像 -> 模式 -> RGB颜色

　　　　一、选择 图像 -> 裁切 选择基于左上角像素颜色，能够实现自动裁切的效果

　　　　二、先选定要保留的区域，而后选择 图像 -> 裁剪或者选择工具栏中的裁剪工具按钮进行裁剪

【移动图标】

　　一、若图标为独立图层，则用移动工具拖动便可

　　二、若图标为非独立图层

　　　　a、先用选区工具选中图标区域，再用移动工具拖动图标，这样能够移动该图层

　　　　b、先用选区工具选中图标区域，再剪切<ctrl+x>，粘贴<ctrl+v>，能够将原来的图层分红两个图层，更有利于操做

好的代码像粥同样，都是用时间熬出来的转发自： ：http://www.cnblogs.com/xiaohuochai/