五、
我們點(diǎn)擊“工具欄”圖層，開始在該層中繪制這7個(gè)按鈕。先用“鋼筆”工具在QQ主窗體的右下角位置上繪制出如圖36般的路徑。
圖36 對(duì)該路徑使用由# 2F54AB至# FFFFFF的線性漸變填充。然后將該路徑再?gòu)?fù)制一份，并在“工具欄”圖層中將這一復(fù)制品重命名為“主菜單按鈕背景”，一會(huì)我們將會(huì)用到它。
我們把從“qq2004 icon.psd”文件里框選出來的“QQ主菜單”圖標(biāo)放到“主菜單按鈕背景”對(duì)象上面。再用“文字”工具以26號(hào)的“Smudger LET”字體在圖標(biāo)的旁邊輸入“menu”的字樣，顏色為#F2F200，采用“強(qiáng)力消除鋸齒”功能。然后用“縮放”工具對(duì)該文字對(duì)象旋轉(zhuǎn)至一定角度，如圖37。
圖37 選中“主菜單按鈕背景”對(duì)象，并把它拉到“工具欄”圖層內(nèi)的最上層來。用“部分選擇”工具使該路徑左邊的節(jié)點(diǎn)向右移動(dòng)1像素，而右邊的節(jié)點(diǎn)側(cè)向左平移1像素。然后還要把頂部的節(jié)點(diǎn)向下平移1像素。完成后對(duì)該路徑使用由#FFFFFF至#FFFFFF的線性漸變，如圖38。
圖38 這了使這個(gè)主菜單按鈕更具透明質(zhì)感，我們用“鋼筆”工具再畫一個(gè)如圖39般的對(duì)象。對(duì)其采用線性填充，由#FFFFFF至#FFFFFF，而透明度側(cè)由100至0。
圖39 完成主菜單的繪制后，我們把畫布改成#113A80，然后將該按鈕建立切片并以“QQ主菜單（觸發(fā)狀態(tài)）”為名導(dǎo)出。如圖40。
圖40 接下來我們?cè)賮砝L制QQ主菜單在普通狀態(tài)時(shí)的的圖形。我們?cè)凇肮ぞ邫凇钡膱D層里將QQ主菜單的位圖圖標(biāo)選中，然后在屬性框里把它的不透明度降到50%，如圖41。然后再將這一處于普通狀態(tài)時(shí)的QQ主菜單按鈕建立切片并導(dǎo)出。
圖41 我們接著來畫其它6個(gè)按鈕。這6個(gè)按鈕都是由水晶球所包裹著，所不同的是，這次的水晶球是凹陷在QQ主窗口里的。先來畫一個(gè)25*25大小的圓形，使用由#575757至#FFFFFF的線性漸變，如圖42。接著再畫一個(gè)21*21的圓形，采用由# D7D7D7至# BABABA的橢圓形漸變填充，描邊色為1像素柔化的# 000000。然后將這兩個(gè)圓形進(jìn)行水平與垂直對(duì)齊，如圖43。
我們把從“qq2004 icon.psd”文件里框選出來的“查找用戶”圖標(biāo)放到這兩個(gè)圓的上面來，如圖44。
為了使水晶按鈕有反光的質(zhì)感，我們?cè)趤懋嬕粋�(gè)14*9的橢圓，使用由#FFFFFF至#FFFFFF的線性漸變，不透明度從100至0。如圖45。然后還要在水晶球的下方畫一個(gè)13*8的橢圓，同樣使用#FFFFFF至#FFFFFF的線性漸變，不透明度則從0至90，羽化值為2。如圖46。
就這樣，一個(gè)具有水晶質(zhì)感的“查找用戶”按鈕就完成了。用相同的方法把其它的5個(gè)位于工具欄中的按鈕也一一繪制出來，然后把它們按圖47般移到QQ主窗體的下方。
圖47 再為這些按鈕逐一建立導(dǎo)出切片，由于這里的按鈕比較密集，需要注意的是，切片與切片之間不能相互重疊，否則將不能將按鈕完整的進(jìn)行導(dǎo)出。另外，在給導(dǎo)出的切片命名時(shí)，可以按照按鈕所對(duì)應(yīng)的功能來命名。而且我們這次所導(dǎo)出的按鈕全是處于觸發(fā)狀態(tài)的，因此也別忘了在文件名的后面加個(gè)括號(hào)并注明“觸發(fā)狀態(tài)”。
圖48 接著我們?cè)賮砝L制這6個(gè)按鈕的普通狀態(tài)。在“工具欄”圖層中我們把這6個(gè)按鈕的位圖圖標(biāo)同時(shí)選中，然后在屬性框中一次性的把它的的不透明度降到50%，如圖49。
圖49 然后為這6個(gè)處于普通狀態(tài)下的工具欄按鈕建立切片后進(jìn)行導(dǎo)出。工具欄按鈕的繪制就完成了。
出處：太平洋電腦網(wǎng)
責(zé)任編輯：藍(lán)色
上一頁(yè) 繪制拉幕式面板 下一頁(yè) 排列側(cè)邊條按鈕、狀態(tài)按鈕
◎進(jìn)入論壇Photoshop、Fireworks版塊參加討論
|
第 1 頁(yè) 
第 5 頁(yè) 繪制工具欄按鈕
