fireworks制作網(wǎng)頁(yè)按鈕
fireworks制作網(wǎng)頁(yè)按鈕
Fireworks有專門制作動(dòng)態(tài)按鈕。主要通過(guò)矩形工具、線性填充、添加投影等手繪來(lái)完成最終效果。那么下面小編給大家整理了關(guān)于fireworks制作網(wǎng)頁(yè)按鈕的方法，希望大家喜歡。
如圖我們來(lái)看看怎么操作的：
用過(guò)Flash的人一定知道，一個(gè)按鈕應(yīng)該有四種狀態(tài)：未經(jīng)過(guò)時(shí)狀態(tài)、經(jīng)過(guò)時(shí)狀態(tài)、按下時(shí)狀態(tài)和單擊后經(jīng)過(guò)的狀態(tài)。實(shí)現(xiàn)動(dòng)態(tài)按鈕就是將這四個(gè)狀態(tài)的按鈕效果圖片合成，使其產(chǎn)生動(dòng)態(tài)的視覺效果。
fireworks制作網(wǎng)頁(yè)按鈕的方法步驟
制作按鈕步驟1：首先啟動(dòng)Fireworks ，新建一個(gè)大小為80×30像素的文件，背景選擇透明。執(zhí)行菜單 InsertNew Button命令，彈出Button對(duì)話框，我們可以看到五個(gè)分別為Up、Over、Down、Over While Down及Active Area的選項(xiàng)卡，前四個(gè)這就是上述的四個(gè)動(dòng)作，Active Area是為按鈕設(shè)置鏈接的(如圖1)。快捷鍵“Shift+F12”打開幀面板，我們會(huì)看到為其四個(gè)狀態(tài)而設(shè)置的四幀，下面我們分別設(shè)置四幀來(lái)實(shí)現(xiàn)動(dòng)態(tài)變化。
步驟2：未經(jīng)過(guò)時(shí)狀態(tài)(Up狀態(tài))的制作：選取Up選項(xiàng)卡，于工具欄中選取Ellipse Tool工具，在畫布中畫一個(gè)大小合適的橢圓形，將漆桶的顏色設(shè)置為天藍(lán)色，并將其添充?？旖萱I“Alt+F7”打開Effect面板為其添加合適效果，選中圖片，點(diǎn)擊Effect面板下拉框，彈出菜單中執(zhí)行Bevel and EmbossInner Bevel命令，按圖2設(shè)置好各項(xiàng)參數(shù)：對(duì)比度為58%，柔和度為7，角度為151，寬度為33，并使其平滑。
步驟3：經(jīng)過(guò)時(shí)狀態(tài)(Over狀態(tài))的制作：切換至Over選項(xiàng)卡，此時(shí)是空的，需要將Up選項(xiàng)卡中圖片復(fù)制到其中，單擊編輯區(qū)下方的Copy Up Graphic按鈕即可保證兩個(gè)選項(xiàng)卡中圖片位置一致，這里再給該圖片添充一些亮色，使圖片處于未被選中狀態(tài)，并設(shè)置線條顏色為白色，漆桶顏色為藍(lán)色，快捷鍵“Shift+F7”開啟Fill面板，并在下拉框中選擇Rectangle，然后使用漆桶工具填充圖片顏色，同時(shí)拖動(dòng)填充手柄進(jìn)行調(diào)整，并設(shè)置亮度參數(shù)(如圖3)使其達(dá)到合適效果。
制作按鈕步驟步驟4：按下時(shí)狀態(tài)(Down狀態(tài))的制作：同樣將Up選項(xiàng)卡中的圖片復(fù)制到Down選項(xiàng)卡中，設(shè)置Effect面板inner bevel中Sloped和Inverted的傾斜和反轉(zhuǎn)效果;設(shè)置Fill面板的填充方式為Web Dither，即網(wǎng)頁(yè)混色效果，這里可以選擇兩種顏色混合成一個(gè)新顏色，其設(shè)置如圖4所示。為了使單擊按鈕時(shí)到Down狀態(tài)，一定要勾選Down選項(xiàng)卡上的Include Nav Bar Down State復(fù)選框，否則按鈕會(huì)停留在Up狀態(tài)。
步驟5：單擊后經(jīng)過(guò)的狀態(tài)(Over While Down狀態(tài))的制作：該狀態(tài)和未經(jīng)過(guò)時(shí)狀態(tài)Up狀態(tài))稍有不同，表現(xiàn)出該連接被點(diǎn)擊即可，所以可以將Up狀態(tài)圖片復(fù)制過(guò)來(lái)，將Effect面板中的Inner bevel屬性更改為highlighted即可。
在fireworks中制作按鈕步驟步驟6：Active Area設(shè)置：選取Active Area選項(xiàng)卡，我們會(huì)看到已經(jīng)設(shè)置好的熱區(qū)，單擊Link Wizard按鈕，于彈出Link Wizard對(duì)話框中選取Link選項(xiàng)卡，這里可以鍵入U(xiǎn)RL連接，在<alt>欄中輸入鏈接的說(shuō)明文字，并在Status BarText中輸入瀏覽器狀態(tài)欄中的說(shuō)明文字
看過(guò)“fireworks制作網(wǎng)頁(yè)按鈕 “的認(rèn)還看了：