怪異的索引模式透明

是否覺得很奇怪的標(biāo)題，索引模式不就是只支持黑true白false的二進制透明么？至于你是不是這樣想，反正在此之前我是這樣認(rèn)為的。

做這樣一個分享是因為此前和同事們討論到一個問題，需要實現(xiàn)一個純白色透明底的箭頭圖標(biāo)，使用場景如下圖所示，在導(dǎo)出圖片時發(fā)現(xiàn)，用fireworks 居然不能導(dǎo)出這張圖。

1. 更改圖片格式，使用帶alpha的8位png，此方案是展現(xiàn)效果較好的，也算比較暴力的，有可能在項目中因為歷史原因而無法實施
2. 8位圖片支持256色，那就使用近白色來代替純白色，用RGB(250,250,250)也就是#FAFAFA來偷梁換柱

后來發(fā)現(xiàn)我?guī)缀跚饬怂饕Ｊ?，一直以來使用的ps，fw，以及adobe公司的imageready對于索引模式都是默認(rèn)把白色畫布設(shè)為透明（索引false），把黑色畫布設(shè)為不透明（索引true），其他顏色都會被顯示，所以我認(rèn)為布爾透明就是黑true白flase。然而。。。

	There can be multiple transparent colors in index transparency, because every color in the color table has a designation of either opaque (1) or transparent (0). Most graphics programs assume that the canvas color (often white, but it could be any color) is the default transparent color, but you can specify any color (or any number of colors) as transparent or not.
索引透明可以有多個布爾透明的顏色，因為顏色表中的每一個顏色都有指定的不透明（1）或透明（0）。大多數(shù)圖形程序假定在畫布上的顏色（通常是白色的，但它可以是任何顏色）是默認(rèn)的透明顏色，但您可以指定某種(或者任意多種顏色)為透明或者不透明

在Fireworks中，要想做出含有純白內(nèi)容的索引圖，導(dǎo)出步驟：優(yōu)化面板-索引模式，然后通過面板下方的3個按鈕為不同的顏色進行布爾開關(guān)

按照上面的設(shè)置應(yīng)該可以做出一張純白色透明底的索引圖片了，可是事兒還沒說完。

在后續(xù)的測試過程中，發(fā)現(xiàn)同為索引圖片，PS導(dǎo)出的圖片卻能顯示白色的內(nèi)容，對于web圖片處理，我一直是比較相信Fireworks的，于是把PS導(dǎo)出的索引圖拉進Fireworks，居然是帶Alpha的索引模式，我只能說這是一個奇跡。原來gif也是支持Alpha的，可是放到頁面發(fā)現(xiàn)原來是一種怪異的Alpha透明(Pre-multiplied alpha)

In this case the colors of the foreground are blended with the colors of the background. At the same time the alpha blends from opaque to transparent.

一種類似png的Alpha模式，透明度依舊是0或者1，半透明的地方與背景色進行了合并。如此怪異，非常不推薦使用，可是Photoshop存為索引圖的時候偏偏默認(rèn)是這種模式，所以呼吁戰(zhàn)斗一線的重構(gòu)們，珍惜生命，切圖時候遠(yuǎn)離PS。

最后想對圖片格式更多了解的還可以看看這篇介紹

1. http://www.idux.com/2011/02/27/what-are-index-and-alpha-transparency/
2. http://www.icongalore.com/xp-icon-articles/alpha-channel-explained.htm
3. http://morris-photographics.com/photoshop/articles/png-format.html