PS教程：PNG格式种类及应用实例使用详解.doc

清新教育提供 1.办公 2.平面 3.网页 4.室内 5.模具 6.淘宝 7.UI8. 动漫 9.SEO 培训 10.程序（PHP，JAVA，IOS，安卓）等 10 大课程培训 1PS 教程：PNG 格式种类及应用实例使用详解【PConline 教程】PNG 是图像文件存储格式，在网页设计中已经不是一个陌生的名词，在前端开发中经常使用到它，如常用 CSS 雪碧图而 PNG 的使用不仅仅如此，PNG 有多少种格式，有哪些特点，PC 端中常用的 PNG 格式是哪些，端最合适的 PNG 格式是什么呢？如果你对这些问题有疑问，那么很开心的告诉你，这里有你需要的答案PNG 的格式和透明度这个 Fireworks 会比较清楚，打开 Fireworkd 优化面板，可以清楚看到PNG 有 3 种不同深度的格式：PNG8、PNG24 、PNG32 图 01其中，在优化面板选择 PNG8，可发现 PNG8 包括不透明、索引色透明、alpha 透明 3 种格式图 02PNG8____________________________________________________________________________________________清新教育提供 1.办公 2.平面 3.网页 4.室内 5.模具 6.淘宝 7.UI8. 动漫 9.SEO 培训 10.程序（PHP，JAVA，IOS，安卓）等 10 大课程培训 28 位的 PNG 最多支持 256（2 的 8 次方）种颜色， 8 位的 PNG 其实 8 支持不透明、索引透明、alpha 透明。

PNG24支持 2 的 24 次方种颜色，表现为不透明PNG32支持 2 的 32 次方种颜色，32 位是我们最常使用的格式，它是在 PNG 在24 位的 PNG 基础上增加了 8 位的透明信息，支持不同程度的半透效果其实 PNG8 的 3 种格式不透明、索引透明、alpha 透明，正好把 PNG 的所有格式都归类好了：『PNG 不透明』格式『PNG 索引透明』格式『PNG alpha 透明』格式『PNG 不透明』格式说到不透明，就像 jpg 格式一样，『PNG 不透明』只能为不透明，代表格式有：『PNG8 不透明』和 『PNG24』 ，导出软件有：Photoshop、Fireworks不推荐使用『PNG 不透明』格式，建议用 jpg 图片来代替它可能会有同学会问为什么 PNG24 是不透明的，我使用 Photoshop 导出来的就是 PNG24 啊？PNG24 实际为不透明图片打开 Photoshop，任意打开一个带透明的 psd 文件，存储为 web 所有格式(ctrl+shift+alt+s)，如下面板所示：图 03不勾选透明度单选框，图片的透明背景会被默认的白色填充____________________________________________________________________________________________清新教育提供 1.办公 2.平面 3.网页 4.室内 5.模具 6.淘宝 7.UI8. 动漫 9.SEO 培训 10.程序（PHP，JAVA，IOS，安卓）等 10 大课程培训 3图 04导出来的 PNG 图片深度为 24 位，图片为不透明，表现跟 jpg 图片相似图 05如果勾选了透明度(alpha 通道)，导出深度为 32 位的透明图片图 06『PNG8 索引透明』产生杂边锯齿原因从 Photoshop 存储为 web 所有格式面板中这样理解，PNG24 深度其实为 24 位，再勾选上 8 位的 alhpa 通道，24+8=32，即『PNG32』 = 『PNG24+alpha』，这也许是 Photoshop 软件开发者不添加 PNG32 位格式的原因，下图为 Photoshop 存储为 web 所有格式界面的图片格式选择，并没有 PNG32 位的选项~____________________________________________________________________________________________清新教育提供 1.办公 2.平面 3.网页 4.室内 5.模具 6.淘宝 7.UI8. 动漫 9.SEO 培训 10.程序（PHP，JAVA，IOS，安卓）等 10 大课程培训 4图 07『PNG 索引透明』格式说到索引颜色透明，我们可以了解下什么是索引颜色，『PNG 索引透明』代表格式有『PNG8 索引透明 』, 导出软件有：Photoshop、Fireworks，它的特点总结如下：挑选一副图片中最有代表性的若干种颜色（通常不超过 256 种）只能为不透明或全透明文件体积小带有杂边锯齿支持 IE6如何使用 Photoshop 导出『PNG8 索引透明』图 08使用 Photoshop，存储为 web 所有格式，按照如下图片的红色边框配置，可导出 PNG8 索引透明注：使用 Photoshop 导出『PNG8 索引透明』的效果比 Fireworks 导出的效果良好，这里不介绍使用 Fireworks 导出『PNG8 索引透明』『PNG8 索引透明』只有透明索引颜色，没有半透明索引颜色，下图左侧为带半透明像素的图片，在浏览器中打开不会有锯齿，而右侧图片为全透明或不透明的像素，在浏览器打开后有锯齿。

清新教育提供 1.办公 2.平面 3.网页 4.室内 5.模具 6.淘宝 7.UI8. 动漫 9.SEO 培训 10.程序（PHP，JAVA，IOS，安卓）等 10 大课程培训 5图 09由于『PNG8 索引透明 』没有半透明索引颜色，使用 Photoshop 导出时，原有的半透明转化为不透明，从而产生锯齿图 10如何避免『PNG8 索引透明 』的杂边锯齿方法：设置杂边与背景色颜色一致可达到视觉上透明相信不难理解，利用杂边与背景色一致，可以来满足视觉上的透明，缺点是只能适应一种背景色，在其它背景色下同样会产生杂边图 11____________________________________________________________________________________________清新教育提供 1.办公 2.平面 3.网页 4.室内 5.模具 6.淘宝 7.UI8. 动漫 9.SEO 培训 10.程序（PHP，JAVA，IOS，安卓）等 10 大课程培训 6图 12怎么设置呢，打开 Photoshop，在存储为 web 格式面板中进行如下操作，在杂边选项中选择与背景色一致的颜色。

图 13『PNG Alpha 透明』格式说到 alpha 透明，我们可以了解下什么是 alpha 通道，『PNG alpha 透明』代表格式有『PNG8 alpha 透明』和『PNG32』，导出软件有 Fireworks，它的特点总结如下：一个 8 位的灰度通道，该通道用 256 级灰度来记录图像中的透明度信息，定义透明、不透明和半透明区域支持全透明和半透明『PNG8 alpha 透明 』文件体积小『PNG8 alpha 透明 』在 IE6 下有毛边如何使用 Fireworks 导出『PNG8 alpha 透明』Firewoks 中，在优化面板，按照如下图片的红色边框配置，可导出 PNG8 alpha 透明注：Firewoks 支持导出『PNG8 alpha 透明 』，Photoshop 不支持导出____________________________________________________________________________________________清新教育提供 1.办公 2.平面 3.网页 4.室内 5.模具 6.淘宝 7.UI8. 动漫 9.SEO 培训 10.程序（PHP，JAVA，IOS，安卓）等 10 大课程培训 7『PNG8 alpha 透明』图 14图 15端选择哪种 PNG说到，考虑流量的问题是必不可少的，所选 PNG 需要满足体积小和视觉效果良好，那么哪种 PNG 格式符合这 2 个要求呢？做个实验吧 ~不同 PNG 格式测试测试平台：ios&android webkit 浏览器测试图片：彩种雪碧图 1230*82图 16测试内容：同一张雪碧图导出不同 PNG 格式的大小、透明度、杂边以及在 retina 显示屏和普通显示屏下的对比测试结果：____________________________________________________________________________________________清新教育提供 1.办公 2.平面 3.网页 4.室内 5.模具 6.淘宝 7.UI8. 动漫 9.SEO 培训 10.程序（PHP，JAVA，IOS，安卓）等 10 大课程培训 8图 17从上图可见 PNG32 和 PNG24 体积太大了，十分消耗用户流量，不是我们选择的范围，那么可以锁定目标在『PNG8 alpha 透明』和『PNG8 索引透明』中，2 者对比，可以看出『PNG8 alpha』在端的支持是良好，可能有童鞋会认为，单凭一张图片也不能下结论~而经过笔者使用多张雪碧图测试后使用 Fireworks 导出的『PNG8 alpha』，在端的支持是比较好的~ 不仅文件体积小，节省流量，而且半透明效果良好于是，移动端采用『PNG8 alpha 透明』，相信『PNG8 alpha 透明』是未来的一种趋势~PC 端选择哪种 PNGPC 端使用哪种 PNG，其实这个话题很早就有结论了，这里简单介绍下。

使用 PNG8 的方案使用 Photoshop 打开雪碧图，分别导出一张 PNG32 和一张『PNG8 索引透明』的图片，高级浏览器使用 PNG32 位图片，针对 IE6 使用『PNG8 索引透明』，并设置『PNG8 索引透明』杂边与背景色颜色一致可达到视觉上透明注：为啥使用 PNG32 而不使用『PNG8 alpha 透明』？因为 pc 端的网速大多良好，建议使用表现更佳的 PNG 图片，显然 PNG32 是最合适的，当然你也可以使用『PNG8 alpha 透明』，但是在高清显示器下的质量不如 PNG32图 18.bg{ background:url(global.PNG?v=20130530) no-repeat; _background:url(global_PNG8.PNG?v=20130530) no-repeat;//IE6 使用的背景图 }____________________________________________________________________________________________清新教育提供 1.办公 2.平面 3.网页 4.室内 5.模具 6.淘宝 7.UI8. 动漫 9.SEO 培训 10.程序（PHP，JAVA，IOS，安卓）等 10 大课程培训 9使用 IE 滤镜的方案比较耗性能，。