《PS教程：PNG格式种类及应用实例使用详解》由会员分享，可在线阅读，更多相关《PS教程：PNG格式种类及应用实例使用详解（10页珍藏版）》请在金锄头文库上搜索。
1、PS教程：PG格式种类及应用实例使用详解【PCnine 教程】PN是图像文件存储格式，在网页设计中已经不是一个陌生的名词,在前端开发中经常使用到它，如常用S 雪碧图.而PN的使用不仅仅如此,PG有多少种格式，有哪些特点，C端中常用的PNG格式是哪些,手机端最合适的PNG格式是什么呢？如果你对这些问题有疑问，那么很开心的告诉你,这里有你需要的答案. PG的格式和透明度 这个Freworks会比较清楚，打开Fird优化面板,可以清楚看到G有3种不同深度的格式：PN8、NG24、PNG32。图01 其中,在优化面板选择PG8,可发现PG包括不透明、索引色透明、alha透明3种格式。图02 PN8 8
2、位的NG最多支持256（2的8次方）种颜色,8位的PN其实8支持不透明、索引透明、lpha透明。 PG24 支持2的24次方种颜色，表现为不透明. PG 支持2的3次方种颜色，2位是我们最常使用的格式，它是在PNG在24位的PN基础上增加了位的透明信息,支持不同程度的半透效果。 其实PNG的3种格式不透明、索引透明、alpha透明，正好把NG的所有格式都归类好了： PG 不透明格式 PNG索引透明格式 NGapa透明格式 G不透明格式说到不透明，就像jpg格式一样，PNG不透明只能为不透明，代表格式有:PNG8 不透明和PN2,导出软件有：hotsop、Frewors.不推荐使用PNG 不透明
3、格式,建议用jpg图片来代替它。 可能会有同学会问为什么PNG4是不透明的,我使用Phoop导出来的就是P4啊？ PNG24实际为不透明图片 打开Photohp，任意打开一个带透明的pd文件，存储为web所有格式（ctr+shitalt+），如下面板所示:图03 不勾选透明度单选框,图片的透明背景会被默认的白色填充图04 导出来的PG图片深度为24位,图片为不透明，表现跟jpg图片相似图0如果勾选了透明度(alpha通道),导出深度为32位的透明图片图06NG 索引透明产生杂边锯齿原因 从Photosho存储为web所有格式面板中这样理解，PNG24深度其实为4位，再勾选上8位的al通道,24
4、+=2，即PG32 PG2+alpha，这也许是Phtos软件开发者不添加P2位格式的原因,下图为Phooso存储为b所有格式界面的图片格式选择，并没有PNG32位的选项图07 P 索引透明格式 说到索引颜色透明，我们可以了解下什么是索引颜色，PNG 索引透明代表格式有N8 索引透明,导出软件有：Phohop、Fiorks，它的特点总结如下:挑选一副图片中最有代表性的若干种颜色（通常不超过256种） 只能为不透明或全透明 文件体积小 带有杂边锯齿 支持IE6 如何使用Photshp导出P索引透明图08 使用Photoh,存储为b所有格式,按照如下图片的红色边框配置，可导出PG8索引透明 注：使
5、用Potoshop导出NG索引透明的效果比irewrks导出的效果良好，这里不介绍使用Firworks导出PNG 索引透明 PN索引透明只有透明索引颜色，没有半透明索引颜色，下图左侧为带半透明像素的图片,在浏览器中打开不会有锯齿,而右侧图片为全透明或不透明的像素，在浏览器打开后有锯齿.图09由于PG8索引透明没有半透明索引颜色，使用Photohop导出时，原有的半透明转化为不透明，从而产生锯齿.图10 如何避免PNG8 索引透明的杂边锯齿 方法:设置杂边与背景色颜色一致可达到视觉上透明。相信不难理解，利用杂边与背景色一致，可以来满足视觉上的透明,缺点是只能适应一种背景色,在其它背景色下同样会产
6、生杂边.图1图2怎么设置呢，打开htoshp，在存储为we格式面板中进行如下操作，在杂边选项中选择与背景色一致的颜色。图13 NGAlpha透明格式 说到alph透明，我们可以了解下什么是alpha通道,G alha透明代表格式有PN8alpha透明和NG，导出软件有Fireworks，它的特点总结如下： 一个8位的灰度通道，该通道用256级灰度来记录图像中的透明度信息，定义透明、不透明和半透明区域 支持全透明和半透明 N8alph透明文件体积小 N8alph透明在IE6下有毛边 如何使用Fireok导出PNG8 alpha透明 Firewo中，在优化面板，按照如下图片的红色边框配置,可导出N
7、G8 alha透明。 注：ires支持导出PG lpa透明,hotoshop不支持导出PNG8alp透明图1图15 手机端选择哪种PNG 说到手机,考虑流量的问题是必不可少的，所选PN需要满足体积小和视觉效果良好，那么哪种P格式符合这个要求呢？做个实验吧不同PNG格式测试 测试平台:ioanrod ekit浏览器测试图片:彩种雪碧图130*2图16 测试内容：同一张雪碧图导出不同G格式的大小、透明度、杂边以及在reina显示屏和普通显示屏下的对比 测试结果：图17从上图可见PNG32和PNG24体积太大了，十分消耗手机用户流量，不是我们选择的范围,那么可以锁定目标在PNG8 apha透明和NG
8、8 索引透明中,者对比,可以看出G8alpha在手机端的支持是良好,可能有童鞋会认为，单凭一张图片也不能下结论 而经过笔者使用多张雪碧图测试后使用Firworks导出的PNG lpha，在手机端的支持是比较好的不仅文件体积小，节省流量,而且半透明效果良好 于是，移动端采用PNG8 lph透明，相信PN8 alpha透明是未来的一种趋势 PC端选择哪种PN PC端使用哪种PNG，其实这个话题很早就有结论了，这里简单介绍下。 使用PG8的方案 使用Photsop打开雪碧图，分别导出一张PNG32和一张NG8 索引透明的图片,高级浏览器使用PNG2位图片，针对IE6使用N 索引透明,并设置NG8 索
9、引透明杂边与背景色颜色一致可达到视觉上透明注：为啥使用NG3而不使用G8 alph透明？因为c端的网速大多良好，建议使用表现更佳的N图片，显然NG2是最合适的，当然你也可以使用PNG8 apha透明,但是在高清显示器下的质量不如NG32图18 .bg bckgrund:u（globalPNG?=201300）norepeat; _ackgroun：ur(gobaG.N？201330) noepeat;/IE6使用的背景图 使用IE滤镜的方案 比较耗性能，而且存在不支持背景平铺,导致链接失效等缺点,不推荐该方案，不要为了IE而把自己搞得像IE bgfilr：progid:DmageTansform。Micosf。AlphaageLoader（r=im。 PG，siingMet=”scale”）; 另外还有s和打补丁的办法，这里不做介绍，大家有兴趣可以百度下：IE6支持P4G的格式、颜色种类、位数、透明度、浏览器支持一览图19文中如有不足，请您指教！ /
