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


相关推荐

  • 介绍几个能下载中英文双语字幕电影的网站

    介绍几个能下载中英文双语字幕电影的网站一,飞鸟影苑地址:bbs.wofei.net下载方式:BT中英文双语字幕电影下载具体地址是此论坛的原创区:[url]http://bbs.wofei.net/forum-30-1.html[/url]此论坛的中英文双语字幕电影和单中文字幕电影混在一起所以请看好发布帖子的主题的“[中英字幕]”字样,和国家再下载。–有不少中国电影和韩国片也是中英双语字幕。…

    2022年7月27日
    4
  • 怎么升级node版本(node版本管理)

    今天安装了vuecli3,使用命令时报:YouareusingNodev8.4.0,butthisversionofvue-clirequiresNode>=8.9.PleaseupgradeyourNodeversion.然后再用node-v,发现在本地的node版本是v8.4.0,有点老了,要升级了。可是,node怎么升级呢?有点慌…

    2022年4月18日
    1.9K
  • 【ios客户端渗透测试】测试机越狱和屏蔽越狱检测

    【ios客户端渗透测试】测试机越狱和屏蔽越狱检测文章目录概述安装越狱工具爱思助手一键越狱(未成功)xx概述测试机版本:iPhone8/14.3。越狱工具:unc0ver8.0.2据说unc0ver重启后需要重新越狱。(仅需在手机上操作)安装越狱工具访问unc0ver官网,下载最新版本8.0.2。ios不能安装没有进行安全签名的应用,所以尝试使用爱思助手直接安装unc0ver8.0.2失败,提示“设备未安装AppSync越狱补丁”。爱思助手一键越狱(未成功)使用爱思助手一键越狱,根据提示登录AppleID进行签

    2022年5月4日
    495
  • python-opencv图像处理:sobel算子

    python-opencv图像处理:sobel算子Sobel原理:https://blog.csdn.net/zfjBIT/article/details/86655444函数原型:”’Sobel算子Sobel算子依然是一种过滤器,只是其是带有方向的。在OpenCV-Python中,使用Sobel的算子的函数原型如下:dst=cv2.Sobel(src,ddepth,dx,dy[,dst[,ksize[,s…

    2022年7月14日
    14
  • UDP攻击实战及其简略防御方法[通俗易懂]

    UDP攻击实战及其简略防御方法[通俗易懂]UDP攻击实战及其简略防御方法

    2022年10月2日
    0
  • Eclipse中使用SVN Eclipse配置SVN[通俗易懂]

    Eclipse中使用SVN Eclipse配置SVN[通俗易懂]Eclipse集成SVN文章目录Eclipse集成SVN一、安装SVN二、导入Eclipse中的项目到SVN三、检出Checkout项目到Eclipse中四、提交Commit修改后的内容到服务器五、在Eclipse中执行update更新代码六、在Eclipse中解决冲突七、在Eclipse中恢复历史版本一、安装SVN二、导入Eclipse中的项目到SVN三、检出Checkout项目到Eclipse中四、提交Commit修改后的内容到服务器五、在Ec

    2022年9月26日
    0

发表回复

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

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