前面的话

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

定义

  css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点:

    【1】减少http请求次数

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

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

应用场景

  前面提到过,并不是所有的图片都可以用来制作雪碧图,只有描述性图片才适合

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

  【2】对于横向和纵向都平铺的图片,也不能合并到雪碧图中。如果是横向平铺,只能将所有横向平铺的图合并成一张大图,只能竖直排列,不能水平排列;如果是纵向平铺,只能将所有纵向平铺的图合并成一张大图,只能水平排列,不能竖直排列

合并

  雪碧图的制作实际上就是零星小图合并成一张大图,但小图合并需要遵循以下规则:

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

  1、如果是小图标,留的空隙可适当小一些,一般20像素左右

  2、如果是大图标,要留的空隙就要大一点,因为大图标在调整的时候,影响到的空间也会比较大

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

  【3】合并分类的原则

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

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

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

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

  【4】合并推荐

    在实际的雪碧图制作中,一般采用两种方法:一种是只本页用到的图片合并;另一种是有状态的图标合并

 

实现

  在以前,我们可能需要手动实现雪碧图,这是一件非常麻烦的且容易出错的事情。现在有了很多方便的工具来制作雪碧图。我经常使用是一个叫做css背景合并工具的小工具。

  使用方法如下图所示:

维护

【放大画布】

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

【减小画布】

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

    1、选择 图像 -> 裁切 选择基于左上角像素颜色,可以实现自动裁切的效果

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

【移动图标】

  1、若图标为独立图层,则用移动工具拖动即可

  2、若图标为非独立图层

    a、先用选区工具选中图标区域,再用移动工具拖动图标,这样可以移动该图层

    b、先用选区工具选中图标区域,再剪切<ctrl+x>,粘贴<ctrl+v>,可以将原来的图层分成两个图层,更有利于操作

// 0){
return;
}
if(select[i].getBoundingClientRect().top 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}

}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);

var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i

前端工程师技能之photoshop巧用系列第五篇——雪碧图的更多相关文章

  1. 前端工程师技能之photoshop巧用系列第四篇——图片格式

    × 目录 [1]图片格式 [2]保存设置 前面的话 对于前端来说,图片格式是需要重要掌握的知识.本文是photoshop巧用系列第四篇——图片格式 图片格式 目前在前端的开发中常用的图片格式有jpg. ...

  2. 前端工程师技能之photoshop巧用系列第三篇——切图篇

    × 目录 [1]切图信息 [2]切图步骤 [3]实战 前面的话 前端工程师除了使用photoshop进行测量之外,更重要的是要使用该软件进行切图.本文是photoshop巧用系列的第三篇——切图篇 切 ...

  3. 前端工程师技能之photoshop巧用系列第一篇——准备篇

    × 目录 [1]作用 [2]初始化 [3]常用工具[4]快捷键 前面的话 photoshop是前端工程师无法回避的一个软件,这个软件本身很强大,但我们仅仅需要通过这个工具来完成基本的切图工作即可.本文 ...

  4. 前端工程师技能之photoshop巧用系列第二篇——测量篇

    × 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要 ...

  5. 前端工程师技能之photoshop巧用系列扩展篇——自动切图

    × 目录 [1]初始设置 [2]自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文 ...

  6. 深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域

    × 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关 ...

  7. 前端工程师技能图谱skill-map

    # 前端工程师技能图谱 ## 浏览器 - IE6/7/8/9/10/11 (Trident) - Firefox (Gecko) - Chrome/Chromium (Blink) - Safari ...

  8. 从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析

    http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样 ...

  9. Photoshop制作雪碧图技巧

    雪碧图,就是将网页制作中使用的多个小图片合并成一个图片,使用css技术将这张合成的图片应用在网页不同的地方. 雪碧图可以减少网页加载时的http请求数,优化网页性能. 步骤: a.使用Photosho ...

随机推荐

  1. [转]silverlight Datagrid 行上增加ToolTip

    有两种办法: 1. 直接在后台处理在数据绑定后 ,注册LoadingRow 事件this.DataGrid.LoadingRow += new EventHandler<DataGridRowE ...

  2. unity, monoDevelop ide 代码提示不起作用的解决方法

    monoDevelop ide 代码提示不起作用,可能是因为ide里索引了一些不存在的文件,检查一下solution窗口里是否有文件变红,如下图中springControlEx.cs.将变红的文件re ...

  3. Android AdapterView.OnItemSelectedListener

    AdapterView.OnItemSelectedListener Summary Public Methods abstract void onItemSelected(AdapterView&l ...

  4. jquery 里面的$(document).ready 和 DOMContentLoaded

    DOMContentLoaded 事件是当页面的初始dom tree加载好了就会执行. 而不会去等待外部的css 渲染完成和 js执行完成,即下图中的DOM Tree阶段 DOMContentLoad ...

  5. ScheduleThreadPoolExecutor源码分析

    ScheduleThreadPoolExecutor源码分析(一) Java中ScheduleThreadPoolExecutor主要用于执行延迟任务或者按照一定的频率执行任务.其中scheduleA ...

  6. JS 闭包问题

    一.什么是闭包?“官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 相信很少有人能直接看懂这句话,因为他描述的太 ...

  7. OSCHina技术导向:开源企业ERP系统Opentaps

    opentaps Open Source ERP + CRM 基于 Apache OFBiz (The Open For Business Project ) 构建, 是一款设计良好, 逐渐流行起来的 ...

  8. DCalendar增加月份选择功能--简单jQuery日期选择器插件改动

    做时间插件的时候,很多都会遇到要做选择月份的插件,但是DCalendar提供的api只支持日期选择,最近遇到这个问题,所以调整了一下源码,话不多说,先看效果吧 点击日期插件,出现上图,再点击月份就直接 ...

  9. [boost][filesystem] 扫描给定目录下所有项

    Intro. Boost的filesystem可以用来扫描给定目录下的所有项. 实现 具体实现代码如下: 需要包含的头文件和使用的命名空间: #include <boost/filesystem ...

  10. c++简单学习

    在c++中我们很容易遇到字符串的分割处理问题,这种问题通常比较容易,但由于我比较菜,花费了一定时间去思考一个和字符串相关的题,该题的大概思路是利用取模运算后,将得到的单个字符进行分析,主要考察到了字符 ...