雪碧图,就是将网页制作中使用的多个小图片合并成一个图片,使用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. New Adventure----GUI Design Studio

    新建项目工程    File->New Project 新建设计文件    Project->New Design 单个设计文件的页面,F9运当前设计页面   页面控件中有绿色包围的控件为 ...

  2. jdbc驱动的类加载过程

    这段时间跟类加载机制是干上了. 这一篇来分析一下jdbc工作过程中涉及到的类加载流程,重点是想看看在双亲委派模型不适用的时候,如何解决. 第一步,加载数据库的驱动 Class.forName(&quo ...

  3. (高级篇 Netty多协议开发和应用)第十章-Http协议开发应用(基于Netty的HttpServer和HttpClient的简单实现)

    1.HttpServer package nettyHttpTest; import io.netty.bootstrap.ServerBootstrap; import io.netty.chann ...

  4. ES6核心内容精讲--快速实践ES6(二)

    Iterator和for...of 是什么: Iterator(遍历器)是专门用来控制如何遍历的对象,具有特殊的接口. 怎么用: Iterator(遍历器)对象带有next方法,每一次调用next方法 ...

  5. 【Netty】EventLoop和线程模型

    一.前言 在学习了ChannelHandler和ChannelPipeline的有关细节后,接着学习Netty的EventLoop和线程模型. 二.EventLoop和线程模型 2.1. 线程模型 线 ...

  6. 关于laravel5.2仓库的建立,以及简单调用

    laravel个人比较喜欢,就是控制器里面逻辑代码的分离,这样结构很清晰,有利于后期的维护,现在就把平时工作中运用的仓库模式,分享一下,望指正. *************************** ...

  7. .net 非对称加密

    后台   public class RSAHelper     {         /// <summary>         /// RSA加密         /// </sum ...

  8. 项目管理之 Git 管理软件 SourceTree for Mac

    Git 项目管理: Mac Terminal 生成 Git 秘钥流程: git config --global user.name "yourname" git config -- ...

  9. Python教程(1.1)——配置Python环境

    在正式开始学习Python之前我们需要先配置好Python环境. Python Python可以从Python官方网站上,选择适合你的操作系统的版本下载.下载完之后,运行下载的可执行文件进行安装. 这 ...

  10. PHP初体验

    PHP初体验 提笔写初体验总不知道从何说起,直接聊PHP中的函数.PHP网络技术.数据库操作.PHP模板等感觉又不是初体验.最后还是决定从PHP的面向对象.PHP的魔术方法.PHP的反射.PHP中的异 ...