雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方。

雪碧图可以减少网页加载时的http请求数，优化网页性能。

步骤：

　　a、使用Photoshop新建一张背景透明的图片。

　　b、将小图片复制到此图片中，排列好每个图像的位置，图片幅面不够的话，可以用画布大小调整大小。

　　c、按照所有小图片的范围裁剪图片，存为透明背景的png图片。

Photoshop制作雪碧图技巧的更多相关文章

  1. 使用Compass制作雪碧图

    遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...

  2. 利用compass制作雪碧图

    compass是什么?是sass一款神奇插件,具体教程,我还是推荐阮一峰sass,compass教程,简单清晰明了. 用ps制作雪碧图,工作效率太低了.用compass来制作,方便很多.下图的用com ...

  3. Sass和Compass制作雪碧图

    1.安装好了sass与compass之后设置一个配置文件 2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹 3.@import命令引用 .Compass看到@import指令的参数为 ...

  4. gulp 制作雪碧图

    雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任 ...

  5. sass制作雪碧图

    1.配置文件config.rb http_path = "../../../" css_dir = "Content/css" sass_dir = " ...

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

    × 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...

  7. compass做雪碧图

    由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when dep ...

  8. compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

  9. Css雪碧图

    Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...

随机推荐

  1. Basic Sort Algorithms

    1. Bubble Sort public void bubbleSort(int[] arr) { boolean swapped = true; int j = 0; int tmp; while ...

  2. xcode实用快捷键

    command + R 快速编译并运行项目 command + . 停止正在运行的项目 command + shift + O 快速打开xcode文件搜索功能 command + 0 关闭左边的侧边栏 ...

  3. Linux中重定向

    转:http://blog.csdn.net/songyang516/article/details/6758256 1重定向 1.1      重定向符号 >               输出 ...

  4. spring mvc 存取值

    (转) 1,使用HttpServletRequest获取 @RequestMapping("/login.do") public String login(HttpServletR ...

  5. 目前微信 微博 新浪 豆瓣等所有分享的js插件

    原理 功能 集成微信.微博.开心.豆瓣.人人.qq微博.搜狐.qq空间等分享 即时分享: 默认加载插件,即启动全部分享 定制分享:通过参数配置.静态数据配置 由你决定何时分享,如何分享 扩展: 通过数 ...

  6. 在windows环境下利用virtualenv搭建Python虚拟环境

    安装Python 安装时只有一点需要注意,一定一定要将Python添加到系统环境变量那一项勾选. 安装 virtualenv 加入系统目录之后,命令行(CMD)下就多了一条命令:pip.用pip可以自 ...

  7. pythion 第二弹

    ################################第二节################################################python中数据类型的常见的方法 ...

  8. 图表（Chart & Graph）你真的用对了吗？

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 工作中,我们常常会遇到各式各样的数据,例如网站性能,销售业绩,客户服务 .营销活动等数据.对于这些数据,有哪些行之有效的方法来形 ...

  9. FLAnimatedImageView处理gif过程

    FLAnimatedImageView处理gif过程 时间控制原理 GIF图片每一帧的delayTime可能都不一样: 在展示下一帧的时间控制机制,不能根据以第一帧为准: 或总动画时长除以帧数来简单做 ...

  10. 用 Hexo + Github 搭建自己的博客

    扯在前面 在很久很久以前,一直就想搭建属于自己的一个博客,但由于各种原因,最终都不了了之,恰好最近突然有了兴趣,于是就自己参照网上的教程,搭建了属于自己的博客. 至于为什么要搭建自己的博客了?哈哈,大 ...