黄锦诚的个人博客--有志者是锦诚!

给ADOBE公司的一封信——关于PS和FW输出的PNG24和PNG32

这个是去年在使用ADOBE MASTER CS5过程中Photoshop和Firework中遇到的PNG32的问题而写给ADOBE公司的信,信当时是用英文写要求他们找人来翻译阅读的,但没有回应,所以这个问题也就得不到ADOBE公司的答复了。

附上发给ADOBE公司的英文邮件的原文:

Dear ADOBE’s Engineers:

Good day! This is my first mail to you. My name is Jincheng Huang and there are some questions about ADOBE software(Photoshop and Fireworks)’s PNG’s photo format. My english is poor, so I wrote some words about the questions in Chinese, hope there are some people who knows Chinese well and help you to read this article.

All the questions in my Blog’s page, you can read it online. Here is the URL:http://www.aqy106.com/wp-content/uploads/demo/2011/png/png32.html

The PNG photos for test attached, you can try and test them.

At last, I hope you can reply A.S.A.P. It is very important for me! Thank you very much!

Please mail to me if you have any questions.

Have fun!

下面是我用中文写的关于Photoshop和Firework中关于输出png24和png32的详文

尊敬的ADOBE公司:

我是你们产品的一名中国用户,在使用过程中,遇到了一个关于PNG24和PNG32的问题和软件的问题,搜索过多方面的资料,各有各的说法,无法得出一个权威的结论,所以才想到来给你们ADOBE发EMIAL,寻求一个权威的答案。

一、关于PNG24、PNG32和Photoshop、Firework的问题

设计师、前端工程师们很多都将PNG24和PNG32混淆了(其实我自己也是混淆了),很多人是认为PNG32是不存在的,只有PNG8和PNG24,国内著名的淘宝UED也认为PNG只有PNG8和PNG24,详见 《图片格式与设计那点事儿》,截图如下:

淘宝UED关于PNG的说法

但是我又从不同的地方看到有不同的介绍说有PNG32,不说别的,就单单在谷歌中搜索一下,就有N条的PNG32的信息

google的“png32”关键字搜索

无论是国内还是国外的都大有文章说PNG32是存在的。

但PNG24和PNG32是什么关系?这个就基本各执一词,弄得我也是搞不清楚两者是什么关系了。

查阅了一下业界算是比较有名气一点的博客,觉得其说法也是说不清楚。具体请看CSS88的这篇文章介绍: 《png那些事儿》

淘宝对于png24还是png32的说法不予讨论

作者说:“其实这个问题根本就不用回答,这个可能跟每个人使用切图软件有关”,但我觉得很有必要弄清楚,所以今天就是为这个问题而来。

本来Photoshop和Firework都是你们ADOBE公司的产品(虽然Firework是后来才收购过来),所以你们应该在PNG图片输出的规格上应该统一。因为我经常会交叉使用这两个软件,因为你们的软件在输出格式上的不统一,造成了我的一些疑惑,经多方查找资料后仍无法弄清楚PNG24和PNG32两者和Photoshop、Firework这三者之间的的关系,所以只好先设疑问再作分析再得出结论,最后向你们求证。

现本人的困惑有如下几点:

1、是否存在PNG32?
2、PNG24是不是支持透明?
3、PNG24和PNG32的区别是什么?
4、Photoshop中输出的PNG24+透明是不是PNG24?

以下是我对这几个困惑作过的一些试验和比较

1、是否存在PNG32?

我尝试用Photoshop和Firework分别输出不同规格的图片。具体可见附件中的图片文件

以下分别是Photoshop中输出的不带透明选项的PNG24和Firework中输出的PNG24,查看的效果都是不透明的

firework中输出的png24

以下分别是Photoshop中输出的带透明选项的PNG24和Firework中输出的PNG32,查看的效果都是透明的(请不要在IE6中查看,IE6只支持PNG8的全透明)

photoshop中输出的png24带透明选项 firework中输出的png32

Photoshop中输出的PNG24在别的看图软件中(包括Firework)查看是24bpp,输出的PNG24带透明在别的看图软件中查看是32bpp(包括Firework),正常情况下,不可能所有的软件都出错,所以个人判断:PNG32是存在的。具体截图如下:

photoshop中输出的png24不带透明选项 photoshop中输出的png24不带透明选项

photoshop中输出的png24不带透明选项外部工具浏览是png24photoshop中输出的png24带透明选项外部工具浏览是png32

2、PNG24是不是支持透明?

photoshop中输出的png24不带透明选项 photoshop中输出的png24带透明选项

photoshop中输出的png24不带透明选项外部工具浏览是png24photoshop中输出的png24带透明选项外部工具浏览是png32

firework中输出的png24firework中输出的png32

firework中输出的png24外部工具浏览是png24firework中输出的png32外部工具浏览是png32

基于以上的比较,Photoshop和Firework中输出的PNG24都是不透明的,且Firework输出的默认保存就是PNG格式,对PNG的支持更专业些,Firework输出的PNG24也没有透明的选项,所以个人断定:PNG24不支持透明

3、PNG24和PNG32的区别是什么?

其实上面的比较可以得出一些其他的结论,同样的,从PNG24不支持透明和到PNG32支持透明的对比中,尽管Fiewwork中输出PNG32的时候也没有透明的选项可以设置,但是从其对默认对PNG图片格式的支持中可以理解默认就是输出PNG32,省略了图片的透明的选项,由此可以得出一个比较表面的结论就是:PNG32比PNG24多了一个透明的通道信息,可以支持全透明或半透明的效果。但其中的具体的原理和数据分析,因小弟能力有限,无法再作进一步的分析和说明,或请你告诉我。

4、Photoshop中输出的PNG24+透明是不是PNG24?

有人还会问:如果PNG24支持透明,为什么Firework中输出的PNG24没有透明的选项?如果PNG24不支持透明,为什么Photoshop中输出的PNG24有透明选项?当初我也是被这个问题弄得有点摸不着北了,请看下面的对比,应该就能明白个大概,当然,这个只是我的个人推论,现在向ADOBE你们求证一下我的推论是否正确的。

photoshop和firework输出的png24对比photoshop和firework输出的png32对比

所以个人推断,Photoshop中输出的PNG24+透明其实不是PNG24,其实是PNG32,只不过是被Photoshop表面的输出选项的文字蒙蔽了。

基于以上测试和实验,可以初步解答出上面问题:

1、存在PNG32
2、PNG24不支持透明
3、PNG24和PNG32的区别是:PNG32比PNG24多了存储透明的通道(也就是可以实现全透明或半透明)[或许我的这个说法不准确,但表面的对比就是PNG32支持透明而PNG24不支持透明]
4、Photoshop中输出的PNG24+透明不是PNG24,而是PNG32,这个只能输出PNG24+透明的选项只是Photoshop软件本身的一个文字BUG,误导了许多用户。

以上是我的结论,但没有权威的说法给予证实,现向你们求证实。希望你能给我们这些忠实的用户一个解答。

二、关于PNG8和Photoshop、Firework的问题

另外关于PNG8的也有一些疑惑,就是输出一个PNG8+Alpha的图片后,再重新用Photoshop或Firework打开的时候,对边角的处理的效果也不一样。请问一下这些软件算法的原因吗?

就是以下这张图片,在浏览器中的表现效果是基本一致的(IE6除外,IE6不在讨论之列)

png8格式的图片

在Photoshop和Firework中加了一个背景色黑色放大后你会看到如下的效果。

png8格式的图片在photoshop和firework中打开的效果不同

个人推断:因为Firework输出的默认图片是PNG,所以对PNG8有着更好的支持,所以在软件中显示的是准确的柔化的效果,而Firework中的效果与在除IE6以外的浏览器表现效果一致。

当然,以上所有的结论都是个人在进行一些比较和测试后的得出的,如果万幸是正确的,那将会把前面的业界前辈的一些结论推翻,当然,我的目的并不是这个,而是求真务实而已,再次感谢你的阅读,恳请一个确切的回复,谢谢!

注:以上使用软件均为CS5。

祝你快乐!

黄锦诚

2011-11-02



4条评论

  1. 落地飘羽说道:

    学习啦。

  2. weixinepai说道:

    :oops: PNG8没用过,也因此全部PNG图片在IE6下显示半透明状态,还是蓝色的半透明,难看死。试试PNG8的效果咋样。因为都用PS对于博主说的PNG32真没见过。

  3. STEVEN说道:

    PNG32 我也暂时没接触到

  4. 一丝说道:

    骚年,至于这样吗?看一下源文件才是准确和最具说服力的,看看《png 的秘密》吧:http://www.iyunlu.com/view/Front-end/60.html



发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

黄锦诚 腾讯微博
黄锦诚,专注前端、分享生活、记录工作、关于一切,这里有不一样的惊喜!

分类

Wopus主机优惠码

无觅相关文章插件,快速提升流量