DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> 用Fireworks 8的位圖工具打造精美網頁效果圖 (1)
用Fireworks 8的位圖工具打造精美網頁效果圖 (1)
編輯:Fireworks基礎     

這裡主要介紹的是Fireworks 8的位圖工具的使用,如果你用過ps的話,會感覺這兩個軟件在位圖處理中有很多相似的地方,本例是一個以女性化妝品為主打產品的企業宣傳網站“北京達美”的形象頁面效果圖設計。達美公司一直致力於結合科技和自然的化妝品產品的研發。由於達美公司主打自然健康的產品理念,因此在整體的頁面設計中以綠色為主要的風格,同時配以女性模特、植物和蝴蝶的素材來體現清新、自然的感覺。如圖1.1所示。


1.新建一個Fireworks文件。

2.在彈出的【新建文檔】對話框中設置畫布的寬度為760像素,高度為430像素,背景顏色為白色。如圖1.2所示。

Fireworks 8制作精美網頁效果圖
圖1.2 【新建文檔】對話框

3.選擇繪圖工具欄中的【選取框】工具,在【屬性】面板中進行相應的設置,如圖1.3所示。

Fireworks 8制作精美網頁效果圖
圖1.3 【選取框】工具的屬性設置

4.使用【選取框】工具在畫布的右側繪制一個矩形選區,如圖1.4所示。

Fireworks 8制作精美網頁效果圖
圖1.4 使用【選取框】工具繪制選區

5.選擇繪圖工具欄中的【漸變】工具 ,這時【屬性】面板會自動變成漸變色的調節屬性。設置漸變的類型為線性漸變,漸變顏色為白色過度到綠色。如圖1.5所示。


Fireworks 8制作精美網頁效果圖
圖1.5 【漸變】工具的屬性設置

6.使用【漸變】工具,在畫布右側的選區中單擊鼠標左鍵,漸變色即可填充到當前選區中。如圖1.6所示。填充完畢,按快捷鍵【Ctrl+D】推出位圖編輯模式。

Fireworks 8制作精美網頁效果圖
圖1.6 給選區填充漸變色

【說明】使用【漸變】工具在選區單擊,得到的漸變色方向默認為水平方向,如果希望得到不同方向的漸變色,可以使用【漸變】工具在選區中拖拽填充。

7.在Fireworks 8的新窗口中打開事先准備好的圖像素材“花草.jpg”,選擇繪圖工具欄中的【橢圓選取框】工具,在【屬性】面板中進行相應的設置,如圖1.7所示。

Fireworks 8制作精美網頁效果圖
圖1.7 【橢圓選取框】工具的屬性設置

8.使用【橢圓選取框】工具在圖像“花草.jpg”中繪制一個正圓的選區。如圖1.8所示。

Fireworks 8制作精美網頁效果圖
圖1.8【漸變】工具的屬性設置

9.按住鍵盤的【Shift】鍵,這時在鼠標指針的右下角會顯示一個小【+】號,表示添加選區。使用【橢圓選取框】工具在當前選區的基礎上增加一個新的選區。如圖1.9所示。

Fireworks 8制作精美網頁效果圖
圖1.9 使用【橢圓選取框】工具增加選區

10.現在得到的是有點類似於望遠鏡的兩個橢圓連接在一起的選區,如果需要調整選區在圖像中的位置,在【橢圓選取框】工具選中的狀態下,直接用鼠標移動即可。把選擇的像素區域,復制到前面新建立的畫布中來。如圖1.10所示。

Fireworks 8制作精美網頁效果圖
圖1.10 把選中的像素區域復制到畫布中

11. 在Fireworks 8的新窗口中打開事先准備好的圖像素材“模特.jpg”,選擇繪圖工具欄中的【多邊形套索】工具,在【屬性】面板中進行相應的設置,如圖1.11所示。

Fireworks 8制作精美網頁效果圖
圖1.11 【多邊形套索】工具的屬性設置

12.使用【多邊形套索】工具,把圖像素材“模特.jpg”的人物區域選中,如圖1.12所示。在選擇的過程中,不需要完全的壓邊,因為有羽化的設置。同時如果不小心選擇錯誤的話,必須重新繪制選區。

Fireworks 8制作精美網頁效果圖

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved