day10.photoshop基础

1.link:favicon

2.5.网页所支持的图片格式

1.jpg

24位压缩格式的图片，压缩率越大的图片，显示的内容越模糊，文件会越小

2).png

是一种无损压缩的位图图形格式，背景为透明效果，使彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘

3).gif

分为GIF格式的动画和静态图像也是高压缩的图像文件,静态图像也是高压缩的图像文件。
​ 4) .svg
​ HTML5新增的矢量图，一般用作图标字符。
​ 5) base64（图像编码）
​ 设计时把图像文件解析成字符编码，浏览器会自动将其再还原为图像。很少使用这种用法，图像越大代码量就越多

网站：

​ base64图片编码网站: https://tool.oschina.net/

6） .ico或.cur
​ 图标文件，一般用作网站的logo

3.svg矢量图的使用方法：

1）进入到官网https://icomoon.io/

2）将svg图导入到icomoon网站中，选中，下载

3）用类名引入图标，并在图标前加上icron-前缀

<span class="icon-huapiting"></span>

然后把它当做文字

3.PS操作

栅格化文字

4.雪碧图

精灵图，是把多张小图放在一张大图，目的是为了减少服务器请求次数，达到优化的母的。

1. 优点
   减少http请求次数
   减少图片数量，提升网页加载速度
   减少网络带宽占用

2. 缺点
   提高了网页开发和维护成本。
   合并内容性图片会影响页面的可读性，语义化降低

3. 应用场景
   一般只有描述性图片用来制作雪碧图，比如页面中使用的各种小图标
   按钮背景图及其各种效果的图片，适合做成雪碧图
   对于img标签设置的内容性图片，是不能合成到雪碧图的
   开发游戏使用的素材图片

4. 制作规范
   图片在合并之前必须保留空隙
   图片排列方式有横向和纵向
   合并分类的原则
   把同属一个模块的图片进行合并
   把大小相近的图片进行合并
   把色彩相近的图片进行合并

保存必须保存为.png格式