PS制作CSS精灵图

PS制作CSS精灵图精灵图简介1.精灵图(雪碧图)(1)问题:精灵图就是将很多的小图标合并到一张较大的图片中,那精灵是啥意思呢?(为此笑了一下午的我)。(2)精灵图也称雪碧图,由于大型网页首次加载需要时间,如果再加之加载小图标的时间,则会严重影响到用户体验。所以,考虑到在同一时间内,服务器拥堵的情况,使用精灵图来解决这一问题。那么怎么制作精灵图呢2.使用ps制作精灵图的详细步骤示例:将如下图图片中的四个图…

大家好,又见面了,我是你们的朋友全栈君。

精灵图简介

1.精灵图(雪碧图)

(1)问题:精灵图就是将很多的小图标合并到一张较大的图片中,那精灵是啥意思呢?(为此笑了一下午的我) 。
(2)精灵图也称雪碧图,由于大型网页首次加载需要时间,如果再加之加载小图标的时间,则会严重影响到用户体验。所以,考虑到在同一时间内,服务器拥堵的情况,使用精灵图来解决这一问题。那么怎么制作精灵图呢

2.使用ps制作精灵图的详细步骤
示例:将如下图图片中的四个图标合并为一张精灵图。
在这里插入图片描述
(1)将四个小图标拖入ps(亦可以打开),当前显示四个小图标已成功打开在这里插入图片描述
(2)选择一张图标,添加画布,并确定画布大小
在这里插入图片描述
画布大小为小图标合并之后的图片大小,并选择延伸方向(即需要加入其他图片的位置),最好后边可以留出位置,以备后后续添加其他小图标
在这里插入图片描述
(3)拖动参考线,固定需要拖入的图标的位置
在这里插入图片描述
(4)根据下图将其他图标拖入上图中指定位置(以mobile1.png为例)
在这里插入图片描述
拖动完成效果
在这里插入图片描述

将其他小图标也拖入,如下完成
在这里插入图片描述
(5)导出:文件–导出–存储为web所用格式(选择png-24格式)
在这里插入图片描述

至此精灵图的制作步骤已经完成。

ALT

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/134040.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 3G网络结构[通俗易懂]

    3G网络结构[通俗易懂]在2G(GSM)技术之后,为了适应数据流业务的发展,2.5G(GPRS)技术日益兴起。但是速率很低,随后才发展到3G(UMTS)通信系统。3G网络结构图如下所示:更详细一些的架构图:MSC/VLR和GMSC属于电路域,GGSN和SGSN属于分组域。1,UE(UserEquipment)UE是用户终端设备,它主要包括射频处理单元、基带处理单元、协议栈模

    2022年9月21日
  • javascript 数组复制「建议收藏」

    javascript 数组复制「建议收藏」javascript数组复制数组不能直接等于一个数组例如vararr=arr1数组是内置对象,存储的是数组的地址,这样复制就等于复制了地址,更改一个数组的值,另一个也会更改复制方法slice()数组截取vararr=[1,2,3]vararr2=arr.splice();…

    2022年7月14日
  • Java volatile关键字作用[通俗易懂]

    Java volatile关键字作用[通俗易懂]当一个共享变量被volatile修饰时,它会保证修改的值立即被更新到主存“,这里的”保证“是如何做到的?和JIT的具体编译后的CPU指令相关吧?  volatile特性  内存可见性:通俗来说就是,线程A对一个volatile变量的修改,对于其它线程来说是可见的,即线程每次获取volatile变量的值都是最新的。  volatile的使用场景  通过关键字sychronize…

    2022年6月1日
  • 香农编码的matlab实现实验总结_香农编码C语言

    香农编码的matlab实现实验总结_香农编码C语言信息论与编码实验报告院系:哈尔滨理工大学荣成校区专业:电子信息工程学号:姓名:日期:2015年6月16日香农编码信息论与编码第三次实验报告一……四、实验环境MicrosoftWindows7Matlab6.5五、编码程序计算如下信源进行香农编码,并计算编码效率:XPa00.2a10.19a20.18a30.17a40……

    2022年9月10日
  • pycharm入门教程(非常详细)_pycharm的用法

    pycharm入门教程(非常详细)_pycharm的用法PyCharmv2018.2最新版本下载 在PyCharm中使用IPython/JupyterNotebook在你开始之前在执行本教程的任务之前,请确保满足以下先决条件:您已经创建了一个Python项目。在本教程中,使用项目C:/SampleProjects/py/JupyterNotebookExample。 在Settings/Preferences对…

    2022年8月26日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号