三、繪制“窗體按鈕”
在“層”面板中點(diǎn)擊“窗體按鈕”圖層，然后用“鋼筆”工具在QQ主窗體的右上角位置畫一個(gè)如圖20般的路徑對(duì)象，然后對(duì)其使用由# 2455A6至# C1CEE6的線性漸變進(jìn)行填充。
圖20
將這個(gè)對(duì)象進(jìn)行復(fù)制，然后把復(fù)制品左邊的節(jié)點(diǎn)向右移動(dòng)1個(gè)像素，而右邊的節(jié)點(diǎn)則向上平移1像素。然后為這個(gè)復(fù)制對(duì)象使用橢圓形的漸變填充，如圖21。
圖21
完成后，把“窗體按鈕”圖層里當(dāng)前這兩個(gè)對(duì)象同時(shí)選中后進(jìn)行組合，然后在該對(duì)象上建立切片并導(dǎo)出成BMP格式的圖片。圖片取名為“標(biāo)題欄按鈕背景”，如圖22。
圖22
窗體上的三個(gè)按鈕都是用水晶球的圖形來(lái)表示的，因此我們只需畫一個(gè)水晶球即可，其它兩個(gè)可以另行復(fù)制來(lái)完成。先用“橢圓形”工具繪制一個(gè)26*26大小的圓形，對(duì)該圓采用由# 185CC3至# 306DC9的線性漸變，如圖23。
接著再畫一個(gè)23*23的圓形，采用由# C6D7F0至# 185CC3的性線漸變進(jìn)行填充，并將這兩個(gè)圓形進(jìn)行水平與垂直對(duì)齊，如圖24。
再畫一個(gè)18*12大小的橢圓，采用由#FFFFFF至#FFFFFF的線性填充，并把右邊的透明度滑塊設(shè)置為0。
圖25
這樣，一個(gè)水晶球就畫好了，我們把這三個(gè)對(duì)象同時(shí)選中后通過(guò)“修改—組合”命令將其組合在一起，然后用“縮放”工具把這個(gè)水晶球縮小至13*13大小。接著再?gòu)?fù)制兩個(gè)相同的水晶球并安放在窗口按鈕的相應(yīng)位置上，如圖26。
圖26
為了標(biāo)明這三個(gè)按鈕的相應(yīng)功能，我們還要在上面畫上“—”、“+”和“X”這三個(gè)符號(hào)。用“直線”工具先在“關(guān)閉”按鈕上畫一條5*5的無(wú)填充1像素描邊斜線，描邊色為全白色。如圖27。
圖27
再將該斜線復(fù)制多三條出來(lái)，通過(guò)移動(dòng)及垂直翻轉(zhuǎn)的方式，最終拼成一個(gè)“X”的交叉符號(hào)。然后把這四條直線同時(shí)選中后進(jìn)行組合，如圖28。
圖28
用相同的方法把“—”和“+”這兩個(gè)符號(hào)出畫出來(lái)，然后放在各自的水晶球按鈕上，如圖29。
圖29
如此一來(lái)這三個(gè)按鈕又都畫好了。然后我們依次為這三個(gè)水晶球建立導(dǎo)出切片，并按其相應(yīng)的按鈕功能將切片取名為“最小化按鈕”、“顏色編輯按鈕”和“關(guān)閉按鈕”，如圖30。
圖30
別忘了，這三個(gè)按鈕在用于QQSkin的時(shí)候是可以有觸發(fā)狀態(tài)的，也就是說(shuō)當(dāng)鼠標(biāo)指向這些按鈕時(shí)，按鈕的狀態(tài)會(huì)有所變化，實(shí)際上也就是換了一種圖像。因此我們把這三個(gè)按鈕中的“—”、“+”和“X”符號(hào)同時(shí)選中后，將其描邊色由白色改為#053585，作為這三個(gè)按鈕在被激發(fā)時(shí)的狀態(tài)，如圖31。
圖31
然后再為這三個(gè)按鈕依次建立導(dǎo)出切片，以BMP格式保存在“藍(lán)色暢想”文件夾中。為了便于辨認(rèn)，我們把這三個(gè)按鈕依次命名為“最小化按鈕（觸發(fā)狀態(tài)）”、“顏色編輯按鈕（觸發(fā)狀態(tài)）”和“關(guān)閉按鈕（觸發(fā)狀態(tài)）”，如圖32。
圖32
出處：太平洋電腦網(wǎng)
責(zé)任編輯：藍(lán)色
上一頁(yè) 繪制主窗體 下一頁(yè) 繪制拉幕式面板
◎進(jìn)入論壇Photoshop、Fireworks版塊參加討論
|
第 1 頁(yè) 
第 3 頁(yè) 繪制窗體按鈕
