本篇講述如何進行界面調色。界面調色一般有兩種方法，調色板和HSL色彩變換。調色板侷限於256色，這裏不採用，因此用HSL色彩變換實現。首先要了解一下什麼是HSL色彩空間，完整且詳盡的知識請到維基百科去看，鏈接地址：http://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4，這裏簡單講一下（摘自維基百科）：
HSL 和 HSV（也叫做 HSB）是對RGB 色彩空間中點的兩種有關係的表示，它們嘗試描述比 RGB 更準確的感知顏色聯繫，並仍保持在計算上簡單。HSL 表示 hue（色相）、saturation（飽和度）、lightness（亮度），HSV 表示 hue、 saturation、value 而 HSB 表示 hue、saturation、brightness（明度）。如下圖：
HSL 和 HSV 二者都把顏色描述在圓柱體內的點，這個圓柱的中心軸取值爲自底部的黑色到頂部的白色而在它們中間是的灰色，繞這個軸的角度對應於“色相”，到這個軸的距離對應於“飽和度”，而沿着這個軸的距離對應於“亮度”，“value”或“明度”。
把RGB顏色轉換到HSL色系，進行調色就很簡單了，改變色彩只要轉個角度，改變亮度就是沿軸升降進行“切片”，飽和度就是改變到中心軸的距離，3點定位到一個顏色，再轉回RGB顏色就完成了界面調色。對需要調色的貼圖進行這麼一個變換，再重新貼圖刷新一下界面就完成了調色功能。
並不是所有圖片都需要調色，象標題欄右邊的沙灘圖案，如果調色就很難看了，會象照片的負片效果，因此用戶頭像，底紋圖案，文字，圖標都不需要調色，只需要把背景圖案，按鈕的高亮和按下狀態圖片，菜單背景和高亮圖案進行色彩變換就行了。系統按鈕需要局部調色，把最小化和最大化，還原按鈕的高亮和按下狀態的背景進行調色，因此準備了另外一張圖片，一共5張圖片需要調色：
最後一張圖片是調色後透明繪製到系統按鈕源圖象上，實現了局部調色。
HSL色彩變換的實現是通過掛接圖象庫的濾鏡插件類實現，實現原理請看RingSDK的幫助文檔，調用代碼極其簡單，m_dibBkg.GETFILTER(dibFilterEFFECT)->AdjustHSL(h,s,l);就完成了背景的調色。圖象庫實現了兩個濾鏡插件類，dibFilterALPHA和dibFilterEFFECT，實現圖象的各種ALPHA混合效果和亮度對比度，色度調整等。這裏把關鍵的調色代碼貼出來，其中m_rdib->Data()爲已加載的32位色圖象數據：
實現了界面調色功能，接下來就得實現調色的設置界面，QQ2009的調色設置是預置了8種基色，可以選擇一種基色，也可以對HSL分別調色，但是這8種基色是隨着底紋和皮膚的選擇變動的，皮膚的選擇影響可選擇的底紋和基色，一開始沒怎麼搞懂，後來下了一個QQ2009的主題包，結果是一個自定義格式的打包文件，沒辦法解開看裏面圖片，就沒研究了，再下了一個2008版的主題包，可以看到所用的圖片，大致清楚其爲什麼這麼做了，裏面的底紋圖片是BMP格式，用紫紅做透明色，由於沒有ALPHA混合通道，這樣的圖片透明繪製到背景，邊緣是有鋸齒的，除非背景顏色跟圖象邊緣顏色相近才看不出來，因此選擇的皮膚會限定底紋圖片和背景顏色，選擇底紋會同時變動背景顏色，再調色則對背景和底紋一起調色，底紋圖案儘量採用RGB色差不大的圖案，使調色效果不會太明顯，這樣整個界面調色底紋圖案就沒有了鋸齒，變化也不怎麼看得出來，是一種比較巧妙的做法。當然這是QQ以前版本的做法，2009應該已經改進了。這裏演示的界面調色功能由於底紋圖案是採用了帶ALPHA通道的PNG格式圖片，因此不存在這樣的限制，同時爲了簡單起見，代碼易於理解，就不學QQ的做法了，取消皮膚的設定，調色和底紋的選擇互不影響，不做聯動。在資源裏預置了5張底紋圖片可供選擇，有興趣的可以自己加。這裏只是爲簡單起見而將底紋加到了資源裏面，實際爲了實現換膚並可擴展應該是自己實現一個換膚的配置文件和資源包，這裏就不演示了。
現在實現調色的設置界面，首先響應“更改外觀”按鈕的彈起事件（WM_LBUTTONUP消息裏面），彈出設置窗口，這個窗口是資源裏面調色和底紋對話框的大小，不可拖動和調整大小，需要在失去焦點時自動隱藏，因此需要在其WM_ACTIVATE消息裏面判斷一下，如果是WA_INACTIVE狀態就發送一個退出消息把自己關閉。加載調色和底紋兩個對話框，顯示一個，把另一個隱藏，調色和底紋的選擇看起來應該是TAB控件，不過得自繪，這裏用圖片控件模擬TAB反而簡單，反正只有兩個選擇，判斷一下鼠標位置，換個圖片，切換一下兩個對話框的顯示狀態，看代碼就知道了。
這裏主要講解一下調色對話框上4個Slider控件的自繪。控件自繪需要先子類化，RingSDK界面庫已經封裝好了，繼承相應的控件類，子類化是自動的，可以重載其RingdowProc函數，即控件的窗口過程，想做什麼都可以，給了你最大的自由度，未處理的消息返回DefaultProc或基類的RingdowProc就可以。自繪的Slider控件是繼承自RingTrackBar，只要響應其WM_PRINTCLIENT和WM_PAINT消息，把背景圖案和滑塊圖案畫上去就OK了，代碼很簡單：
因爲調色函數AdjustHSL的參數關係，設置調整色調的控件調整範圍值爲-180 ~ 180，初始值爲0，飽和度和亮度的範圍都是0 ~ 200，初始值爲100。關於透明度的調整，怎麼使窗口半透明網上介紹文章有很多，這裏就不羅嗦了，界面庫對此做了封裝，調用SetLayeredAlpha就可以了，不過範圍值是設成了25 ~ 255，不能0 ~ 255，全透明的話窗口就不能操作了。
調整色調的圖片是展開的HSL色環，如下圖：
注意因爲默認的背景是蘭色，因此蘭色是在圖案的中間，如果默認背景是別的顏色，就需要循環平移這些色彩，使背景色處在中間位置，否則拖動滑塊調色，實際的效果跟滑塊所在的顏色就對不上號了。
底紋圖案的選擇很簡單，重新加載選擇的圖案就OK，看代碼就知道了。
至此完成了界面調色功能，界面中間部分因爲以後會有控件遮蓋，因此不需要調色。現在看看程序的截圖：
最後說一下怎麼做帶ALPHA通道的PNG圖片和加到程序裏面：
首先找一張自己滿意的圖片，調整到高度95，QQ標題欄的高度，寬度隨意，只要圖案不怎麼變形就可以，然後加一個蒙板，如圖，按一下圖中的按紐：
要使圖片透明，需要去除背景，如果是新建圖片並複製了圖象過來，把背景層刪掉，如果是直接打開的圖片，需要複製一層然後把背景層刪掉。加了蒙板後選擇漸變工具，從右往左一拉，然後把圖片保存爲PNG格式就可以了，如圖：
做完PNG圖片還要做一張31*31的預覽BMP圖片，按資源裏的格式做就可以了，把PNG加入爲“PNG”類型的資源，ID值必須與resource.h裏IDP_SEA等5張預置圖片的ID值連續，預覽圖片的ID值必須與IDB_TATOO1~IDB_TATOO5的值連續，在wnduioption.cpp裏面找到gszTatooInfo的初始化代碼，把圖片說明加到裏面，編譯一下程序就OK了。
現在這個仿QQ界面的程序已經完成了標題欄部分的功能，接下來要完成客戶區和底欄部分的功能，留待下一篇再講了。
程序代碼下載地址：http://download.csdn.net/source/1995651