作为前端工程师,将设计师的设计稿转化为html页面,其中有一个必不可少的环节就是将psd文件中的一些图片随心所欲的使用,而我们经常用到的就是png图片。
第一部分:基本介绍
首先我们先对比几种图片:
1.jpg
优点:体积比png小,打开速度比png快
缺点:属于有损压缩,每次保存都会产生数据损失(jpeg artifacts), 故不适合用于多次编辑保存。压缩率过高图像会失真。
PS:网络上最最常见的格式,也是静态图片(不只是照片)就常用的保存格式,就算是同一小组开发的jp2(相当于jpg第2代)也无法取代它。一般如果肉眼无法识别与png的差别和没有特殊要求就用jpg格式图片。
2.png
优点:无损压缩,有透明选项,压缩效率高于bmp,小图标用png存储最好
缺点:一般体积比同尺寸的90%压缩率的jpg要大很多(通常是5倍以上),但人眼很难识别其中的区别
PS:最常见的无损压缩图片格式,如果是经常对某图片进行编辑保存,要求图片数据100%完整,或需要透明效果(给PS当素材或用作图标等)则推荐使用
3.gif
一般只作为动态图像格式使用
点击这里查看更多。
第二部分:获取方法
对于这几种图片,如果可以直接获取当然是最好的,但是如果不能就要采取其他的方法了。
如:从psd中获取png图片--打开pdf,找到想要的小图标(这也是png存在的最大意义),然后将其他无关的图层关掉(最重要的是关掉背景层,如果一时找不到,就慢慢尝试吧), 但后在该分组下,单击右键,选择快速导出为png,即可导出png图片。