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


相关推荐

  • fvwm 4_FV7144TFATG

    fvwm 4_FV7144TFATG31.2.MiscellaneousCommands31.2.1.BugOptsBugOpts[option[bool]],…Thiscommandcontrolsseveralworkaroundsforbugsinthirdpartyprograms.Theindividualoptionsareseparated

    2022年10月3日
    4
  • 二叉树层序遍历Java版

    二叉树层序遍历Java版publicList<List<Integer>>levelOrder(TreeNoderoot){List<List<Integer>>result=newArrayList<>();if(root==null)returnresult;List<TreeNode>queue=newArrayList<>();queue.add(root);

    2022年5月21日
    39
  • UFT自动化测试

    UFT自动化测试自动化测试静态自动化:代码检测,类似于编译工具的编译系统动态自动化:基于浏览器和DOM对象的自动化:selemnium,Selenium测试直接运行在浏览器中,就像真正的用户在操作一样。支持的浏览器包括IE(7、8、9)、MozillaFirefox、MozillaSuite等。这个工具的主要功能包括:测试与浏览器的兼容性–测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能–创建回归测试检验软件功能和用户需求。支持自动录制动作和自动生成Net、J…

    2022年5月28日
    64
  • 一步一步写算法(洗牌算法)[建议收藏]

    一步一步写算法(洗牌算法)

    2021年12月17日
    50
  • Hadoop生态系统常用组件导图

    Hadoop生态系统常用组件导图Hadoop生态系统主要组件导图:看大图

    2022年5月19日
    37
  • ps怎么导出图片形式_ps导出图片变色

    ps怎么导出图片形式_ps导出图片变色在PS中做好图之后,我们会有下面几种导出图片的需求,下面分别介绍一下将每个图层分别存储为一个文件文件——脚本——将图层导出到文件其中可以仅仅导出可见图层,这样,我们就能够通过控制图层窗口中个图层

    2022年8月5日
    6

发表回复

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

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