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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java基础篇:什么是hashCode 以及 hashCode()与equals()的联系

    Java基础篇:什么是hashCode 以及 hashCode()与equals()的联系

    2021年4月10日
    150
  • SHFileOperation使用

    SHFileOperation使用总结一下SHFileOperation的用法,希望对大家有用//删除文件或者文件夹boolDeleteFile(char*lpszPath){SHFILEOPSTRUCTFileOp={0};FileOp.fFlags=FOF_ALLOWUNDO|//允许放回回收站FOF_NOCONFIRMATION;//不出现确认对话框…

    2022年7月18日
    13
  • 从华为清理34岁以上老员工想起的二三事

    从华为清理34岁以上老员工想起的二三事最近网上盛传华为清理34岁老员工的消息,不管“我司”辟谣与否,根据最近突然有多名同事跟我咨询招聘消息的情况来看,公司内部确实在进行一轮裁员工作,而且影响面比较大,一代华为人或多或少受到影响。最早看到相关消息是在朋友圈转发的一篇文章上,说到强制退休一名42岁和辞退一名39岁的老员工。从我十几年前刚进华为的时候就一直有45岁内部退休的传言,退休后能够保留股票,但是因为当时华为平均年龄很小,周围几乎

    2022年7月17日
    39
  • 【收藏】神器 Nginx 的学习手册

    【收藏】神器 Nginx 的学习手册点击上方阿拉奇学Java,选择设为星标优质文章,及时送达来源:blog.csdn.net/yujing1314/article/details/107000737Nginx是一个高性…

    2022年9月17日
    2
  • mybatis的逆向工程怎么实现_列举创建连接的方法

    mybatis的逆向工程怎么实现_列举创建连接的方法Mybatis逆向工程创建方法1.首先利用数据库的可视化工具新建一张表。2.打开IDEA新建一个项目。3.导入pom.xml所需要的依赖文件。<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0&quo

    2022年8月21日
    5
  • Python操作CSV格式文件

    Python操作CSV格式文件(一)CSV格式文件1.说明CSV是一种以逗号分隔数值的文件类型,在数据库或电子表格中,常见的导入导出文件格式就是CSV格式,CSV格式存储数据通常以纯文本的方式存数数据表。(二)CSV库操作csv格式文本操作一下表格数据:1.读取表头的2中方式#方式一importcsvwithopen(“D:\\test.csv”)asf:read

    2022年7月21日
    13

发表回复

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

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