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)


相关推荐

  • hive 修改字段类型和增加字段表

    hive 修改字段类型和增加字段表Hive表修改字段类型Altertable表名 changecolumn原字段名称 现字段名称 数据类型 新增字段表altertable表名addcolumns(字段名数据类型)  

  • 牛客网–字符串排序

    牛客网–字符串排序

  • React框架开发使用部分常见问题

    React框架开发使用部分常见问题

  • 电脑显示已连接网络但是无internet访问

    电脑显示已连接网络但是无internet访问电脑显示已连接网络但是无internet访问自己电脑不知道出什么问题了,连接到无限网络但是无法访问,一开始以为是自己双系统的问题,然后自己在ubuntu那边是可以正常上网的。下面是自己的解决方法方法一:首先打开这个网络的状态,在属性这里,点击进入:打开这个ipv4进行配置,把所有的ip,dns都设置为自动获取地址:如果此时还没有用,在此基础上,再进一步进…

  • js最简单的几个特效_js编程

    js最简单的几个特效_js编程fabricjs-全面基础掌握-1.1.Fabricjs介绍1.背景2.用途3.基本对象完整课程目录1.背景官方文档:http://fabricjs.com/docs/Fabric.js是一个完全开源的JavascriptHTML5(画布库)项目,于2010年左右开始创建,降低了开发Canvas的过程中,各种类型的交互与>变更的复杂度Fabric在画布元素之上提供交互式对象模型,Fabric也有SVG-to-canvas(和canvas-to-SVG)解析器2.用途通过Fab

    2022年10月28日
  • origin如何绘制双y轴柱状图_Graphpad柱状图双Y轴

    origin如何绘制双y轴柱状图_Graphpad柱状图双Y轴origin横坐标的标注如何修改成双行显示呢?shift+enter,可以换行思路:在两个图层上分别绘制两个柱状图,然后将两个图层合并。第一步:建立一个X列,四个Y列。其中,两列数据中间加上两个空列第二步:绘制第一个柱状图第三步:绘制第二个柱状图第四步:两图层合并点击合并按钮第五步:接下来就是坐标轴的显示基本上就完成了…

发表回复

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

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