網站首頁網站地圖google地圖百度地圖學習庫RSS在線PSPS聯盟素材下載  PS視頻教程專題 PS愛好者教程網www.479042.live PS教程自學網QQ群

Fireworks制作漂亮的網頁水晶按扭圖標,動態元件的創建。

時間:2020-01-02 15:33 來源:藍色理想 作者:WaveF 閱讀:
Fireworks制作漂亮的網頁水晶按扭圖標,動態元件的創建。教程從介紹動態元件的概念、創建一個基本的Fireworks動態元件到運用JSF代碼的高級運用均有講解,希望能給朋友們帶來幫助~~

首先講一下什么是動態元件,在Fireworks中,我們可以創建“圖形”、“按鈕”、和“動畫”三種元件,但往往我們只是直接從文檔庫里面直接把元件拖出來用,我們把這種元件成為靜態元件。

舉個例子:我繪畫了一顆“OK“按鈕并轉換為按鈕類的元件,當我要再做一個“Cancel”按鈕時,我就要把剛才那個“OK”按鈕從文檔庫拖進畫布,打散,然后把文本“OK”改為“Cancel”,再轉成元件。像這樣子的操作也許我們壓根就沒必要將它們轉成元件,因為如果我們要做很多按鈕,那文檔庫就會有很多這樣子的元件。

而動態元件是什么概念呢?就是我只需要從庫里面把這按鈕拖出來,然后就可以在“元件定義”面板里面改變這個按鈕上的文字、長和寬、以及鼠標移入、按下等屬性,但這個元件在庫里面只存在一個,這就是我所說的動態元件。如果你對此還不太理解,那你可以點擊“Window”菜單下的“Common Library”開啟公用庫,里面就放著一些這種類型的元件。

了解動態元件用來做什么以后,我們就可以開始制作了。

一、創建一個基本的動態元件

1.首先我們繪制一顆按鈕的四種狀態:“正常狀態”、“鼠標移入狀態”、“鼠標按下狀態” 和 “禁用狀態”

Fireworks制作漂亮的網頁水晶按扭圖標,動態元件的創建。

2.然后我們把這些按鈕背景圖的坐標設為統一,讓它們重疊在一起,再將它們全部選中,按F8鍵轉為一個圖形類元件,進入這個元件的編輯狀態,加入按鈕文本,并給每張狀態圖進行命名(如下圖)

Fireworks制作漂亮的網頁水晶按扭圖標,動態元件的創建。

3.第2步操作要注意幾點:

- 開啟“九宮智能縮放”,將拉伸區域設定在文本框外部;

- 文本框的寬度要等于按鈕背景圖寬度減去縮放區域寬度,并設置文本居中顯示;

- 按鈕背景圖最好平面化為位圖,避免在縮放時出現路徑開拆(但不平面化也可以保持圖形縮放時的質量不會損失);

- 將不需要顯示的狀態圖進行隱藏(去掉圖層前面的眼睛圖標);

Fireworks制作漂亮的網頁水晶按扭圖標,動態元件的創建。

PS筆刷下載 PS濾鏡下載 PS形狀下載 PS樣式下載 PS動作下載 PS圖案下載
相關教程
伊利股票涨跌