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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • PyCharm汉化之后,点击设置没反应,完美解决方法[通俗易懂]

    PyCharm汉化之后,点击设置没反应,完美解决方法[通俗易懂]请先检查下pycharm的安装目录lib下是不是有中文汉化包resources_cn.jar有过有的话建议:1.更换一个汉化包或者将原来的resources_en.jar也放进lib目录下2.将中文汉化包resources_cn.jar删除,只留下原版的resources_en.jar…

  • python库之_thread

    官方参考文档:https://docs.python.org/3.7/library/_thread.html_thread库方法(1)_thread.error(2)_thread.Lock

    2021年12月29日
  • 范围管理_范围管理的获取方法

    范围管理_范围管理的获取方法一、范围管理的基本理解(1)包括确保项目做且只做所需的全部工作,已成功完成项目的各个过程。(2)项目范围管理需要做的工作》明确项目边界。》对项目执行工作进行监控。》防止项目范围发生蔓延。指对时间、成本和资源做相应调整,未经控制的产品或项目范围的扩大。(3)产品范围和项目范围》产品范围:产品、服务或结果的特性和功能。》项目范围:是否完成以项目管理计划、项目范围说明书、WBS、以及WBS字典作为衡量标准。产品范围是否完成以产品需求说明书作为衡量标准。二、规划范围管理1、项目范围管理计划的内

  • js中ajax写法_ajax原生写法

    js中ajax写法_ajax原生写法//JavaScriptDocumentvarXHR;//定义一个全局对象functioncreateXHR(){//首先我们得创建一个XMLHttpRequest对象if(window.ActiveXObject){//IE的低版本系类XHR=newActiveXObject(‘Microsoft.XMLHTTP’);//之前IE垄断了整个浏览器市场,没遵循W3C标准…

  • 2023年北京理工大学理论力学考研上岸前辈备考经验指导

    2023年北京理工大学理论力学考研上岸前辈备考经验指导2021年我400分+考研成功上岸北京理工大学,回顾2020一年的辛苦蹒跚,觉得值得。一、考研择校及报考因素考量关于考研择校方面,我主要考虑到未来从事行业、地域、学校实力和名气这几个方面,排列顺序按照重要度先后。首先是最为关键的未来从事行业方面,考研之前其实就应该大体思考一下未来的发展方向,这相当于给自己以后好几年定一个基调。比如我本科是航空航天类,这个专业看似和其它工科脱节了,成了大国工酱,实际上万物可转航空航天方面,我去年拿到过北京航天科工某所的offer,基本上不管是工科什么专业都招的。航空航

  • Operators in MXNet-BatchNorm

    Operators in MXNet-BatchNormOperatorsinMXNet-BatchNorm

发表回复

您的电子邮箱地址不会被公开。

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