這裡主要介紹的是Fireworks 8的位圖工具的使用，如果你用過ps的話，會感覺這兩個軟件在位圖處理中有很多相似的地方，本例是一個以女性化妝品為主打產品的企業宣傳網站“北京達美”的形象頁面效果圖設計。達美公司一直致力於結合科技和自然的化妝品產品的研發。由於達美公司主打自然健康的產品理念，因此在整體的頁面設計中以綠色為主要的風格，同時配以女性模特、植物和蝴蝶的素材來體現清新、自然的感覺。如圖1.1所示。
1.1 北京達美公司網站形象頁面效果圖（點擊放大）。
1．新建一個Fireworks文件。
2．在彈出的【新建文檔】對話框中設置畫布的寬度為760像素，高度為430像素，背景顏色為白色。如圖1.2所示。
圖1.2 【新建文檔】對話框
3.選擇繪圖工具欄中的【選取框】工具，在【屬性】面板中進行相應的設置，如圖1.3所示。
圖1.3 【選取框】工具的屬性設置
4.使用【選取框】工具在畫布的右側繪制一個矩形選區，如圖1.4所示。
圖1.4 使用【選取框】工具繪制選區
5.選擇繪圖工具欄中的【漸變】工具 ，這時【屬性】面板會自動變成漸變色的調節屬性。設置漸變的類型為線性漸變，漸變顏色為白色過度到綠色。如圖1.5所示。
圖1.5 【漸變】工具的屬性設置
6.使用【漸變】工具，在畫布右側的選區中單擊鼠標左鍵，漸變色即可填充到當前選區中。如圖1.6所示。填充完畢，按快捷鍵【Ctrl+D】推出位圖編輯模式。
圖1.6 給選區填充漸變色
【說明】使用【漸變】工具在選區單擊，得到的漸變色方向默認為水平方向，如果希望得到不同方向的漸變色，可以使用【漸變】工具在選區中拖拽填充。
7.在Fireworks 8的新窗口中打開事先准備好的圖像素材“花草.jpg”，選擇繪圖工具欄中的【橢圓選取框】工具，在【屬性】面板中進行相應的設置，如圖1.7所示。
圖1.7 【橢圓選取框】工具的屬性設置
8.使用【橢圓選取框】工具在圖像“花草.jpg”中繪制一個正圓的選區。如圖1.8所示。
圖1.8【漸變】工具的屬性設置
9.按住鍵盤的【Shift】鍵，這時在鼠標指針的右下角會顯示一個小【+】號，表示添加選區。使用【橢圓選取框】工具在當前選區的基礎上增加一個新的選區。如圖1.9所示。
圖1.9 使用【橢圓選取框】工具增加選區
10.現在得到的是有點類似於望遠鏡的兩個橢圓連接在一起的選區，如果需要調整選區在圖像中的位置，在【橢圓選取框】工具選中的狀態下，直接用鼠標移動即可。把選擇的像素區域，復制到前面新建立的畫布中來。如圖1.10所示。
圖1.10 把選中的像素區域復制到畫布中
11. 在Fireworks 8的新窗口中打開事先准備好的圖像素材“模特.jpg”，選擇繪圖工具欄中的【多邊形套索】工具，在【屬性】面板中進行相應的設置，如圖1.11所示。
- 上一頁:網站設計稿之切割技術
- 下一頁:利用 Fireworks 營造殘破紋理