教學(xué)目標：計算機以矢量或位圖格式顯示圖形圖像。AdobeFireworksCS3是一款非常優(yōu)秀的網(wǎng)頁圖像制作軟件，使用該軟件可以方便地繪制與編輯矢量圖形，以及為矢量圖形設(shè)置填充圖案、邊線形狀及效果等；此外，使用AdobeFireworksCS3還可以處理位圖圖像，可以對位圖圖像進行選擇、編輯、移動或者刪除等操作。本章要點： 繪制與編輯位圖圖像與矢量圖形 改變圖形顏色 編輯圖形對象

第12章使用FireworksCS3制作網(wǎng)頁效果圖12.1繪制與編輯位圖圖像12.2繪制與編輯矢量圖形12.3改變圖形顏色12.4編輯圖形圖像對象12.5修改和調(diào)整對象12.6創(chuàng)建與編輯文本12.7使用層和蒙版12.8上機實訓(xùn)第12章使用FireworksCS3制作網(wǎng)頁效果圖12.1.1創(chuàng)建選區(qū)工具12.1.2位圖圖像繪制工具12.1.3修改位圖工具12.1繪制與編輯位圖圖像

FireworksCS3【工具】面板的【位圖】工具箱包含位圖選擇和編輯工具。選擇工具包括【選取框】、【橢圓選取框】、【套索】、【多邊形套索】和【魔術(shù)棒】工具，如圖12-1中所示。下面介紹如何使用選擇工具來創(chuàng)建選區(qū)。12.1.1創(chuàng)建選區(qū)工具

圖12-1【位圖】工具箱【選取框】工具用于創(chuàng)建或選取矩形和正方形區(qū)域，使用它可以方便地選出圖像中需要的內(nèi)容。它也是Fireworks中較簡單和常用的創(chuàng)建選區(qū)工具。在【位圖】工具箱中單擊【選取框】按鈕，在圖像上拖拽鼠標，拖出如圖12-2所示的選區(qū)。然后松開鼠標，這樣便可創(chuàng)建一個矩形選區(qū)。12.1.1創(chuàng)建選區(qū)工具

圖1-2

在圖像上拖拽鼠標

與此同時，用戶可以通過【選取框工具】【屬性】面板中的選項來設(shè)置相應(yīng)的參數(shù)，如圖12-3所示。12.1.1創(chuàng)建選區(qū)工具

圖12-3

【選取框】工具的【屬性】板

1.【刷子】工具2.【鉛筆】工具12.1.2位圖圖像繪制工具

在【位圖】工具箱中單擊【刷子】按鈕，然后通過【屬性】面板來設(shè)置筆觸的顏色、描邊類型、紋理以及不透明度等屬性。【刷子】工具的【屬性】面板如圖12-19所示。12.1.2位圖圖像繪制工具

12-19【刷子】工具的【性】面板

A：此處可以設(shè)置刷子在工作區(qū)中刷出的顏色，可以通過單擊【顏色】按鈕來更改顏色的色相等屬性。B：此處可以設(shè)置刷子的大小，單擊滑塊控件按鈕，會彈出一個上下方向的滑塊控件，向上拖動滑塊，筆刷變大，反之變小。C：此處可以設(shè)置筆刷的類型，可以在該下拉列表框中選擇筆刷的類型，以便用戶在工作區(qū)中繪出更多不同的風格。D：此處可以設(shè)置刷子的不透明度。E：此處可以設(shè)置刷子的疊加模式，例如變暗、變亮、色相、飽和度等。F：此處可以設(shè)置刷子邊緣的虛實程度，可以通過單擊滑塊控件按鈕，在彈出的滑塊控件上拖動滑塊完成設(shè)置。G：此處可以設(shè)置刷子的紋理效果，在該下拉列表框中可以選擇垂直線、水平線及網(wǎng)格線等多種紋理效果。其右側(cè)的滑塊控件按鈕用來設(shè)置紋理的不透明度。12.1.2位圖圖像繪制工具

在【位圖】工具箱中單擊【鉛筆】按鈕，通過【屬性】面板來設(shè)置【鉛筆】工具的相應(yīng)屬性，【鉛筆】工具的【屬性】面板如圖12-20所示。12.1.2位圖圖像繪制工具

圖12-20

【鉛筆】工具的屬性】面板

1.【橡皮擦】工具2.【模糊】工具3.【橡皮圖章】工具12.1.3修改位圖工具

使用【橡皮擦】工具可以擦除位圖圖像中的像素。在【位圖】工具箱中單擊【橡皮擦】按鈕，然后在圖像中拖拽鼠標，便可以擦除圖像中不需要的像素，如圖12-21所示。12.1.3修改位圖工具

圖12-21

使用【橡皮擦】工具擦除圖像中不需要的像素

【模糊】工具可以使相近像素之間的對比度降低，產(chǎn)生模糊效果。下面通過實例講解【模糊】工具的使用方法。如圖12-23、24所示。12.1.3修改位圖工具

圖12-23

開的圖像文件

圖12-24

模處理后的圖像效果

12.2繪制與編輯矢量圖形12.2.1繪制矢量圖形工具12.2.2編輯矢量圖形工具Fireworks有許多矢量圖形繪制工具。使用這些工具可以通過逐點來繪制基本形狀、自由變形路徑和復(fù)雜形狀，也可以繪制自動形狀。它們是矢量對象組，具有可用于調(diào)整其屬性的特殊控制點。矢量圖形工具位于【工具】面板的【矢量】工具箱中，如圖12-31所示。下面對矢量工具作一介紹。12.2.1繪制矢量圖形工具

圖12-1

【矢量】工具箱

使用【矢量】工具箱中的【直線】工具，便可以在工作區(qū)中拖動鼠標繪制一條直線，如圖12-32所示。12.2.1繪制矢量圖形工具

圖12-32使用【直線】工具繪制直線除了僅使用直線段連接各個點以外，【鋼筆】工具還可繪制根據(jù)數(shù)學(xué)公式推導(dǎo)的平滑的曲線段，也就是貝賽爾曲線。每個點的類型(角點或曲線點)決定相鄰的曲線是直線還是曲線。如圖12-37所示。12.2.1繪制矢量圖形工具

圖12-37

使用【鋼筆】工具創(chuàng)建其他曲線

圖12-37使用【鋼筆】工具創(chuàng)建其他曲線【矩形】工具的使用方法比較簡單，只需要在【矢量】工具箱中單擊【矩形】按鈕，然后在工作區(qū)中拖拽鼠標，便可以繪制一個矩形。下面對【矩形】工具的【屬性】面板作一簡單介紹，如圖12-38所示。12.2.1繪制矢量圖形工具

圖12-38

【矩】工具的【屬性】面板

在Fireworks中，使用繪圖工具繪制路徑只是創(chuàng)建Web圖形的第一步，還需要對所繪制的圖形進行各種編輯操作。下面介紹如何使用矢量圖形工具編輯路徑。【自由變形】工具是直接對矢量對象執(zhí)行彎曲和變形操作，而不是對路徑上的某個節(jié)點進行修改。它可以直接拉伸或推動路徑中的任何部分，而忽略節(jié)點的位置。如圖12-41所示。12.2.2編輯矢量圖形工具

圖12-41

曲路徑

【刀子】工具使用戶能夠?qū)⒁粋€路徑切成兩個或多個路徑。可以通過下面的實例來具體了解【刀子】工具的使用方法。如圖12-44所示。12.2.2編輯矢量圖形工具

圖12-44

使用刀子】工具分割矩形

12.3改變圖形顏色12.3.1吸取與填充圖形對象顏色12.3.2改變圖形的描邊和填充顏色12.3.3使用面板改變圖形的描邊和填充顏色使用【滴管】工具，可以從圖像中選取顏色來指定一種新的筆觸顏色或填充顏色。可以選取單個像素的顏色、3×3像素區(qū)域內(nèi)的平均顏色值或5×5像素區(qū)域內(nèi)的平均顏色值。在【矢量】工具箱中單擊【滴管】按鈕，然后在文檔窗口中單擊需要的顏色，即可提取該顏色。12.3.1吸取與填充圖形對象顏色使用【油漆桶】工具，可以對圖形進行填充，在【矢量】工具箱中設(shè)置好【填充顏色】屬性后，單擊【油漆桶】按鈕，將鼠標指針拖拽到需要填充顏色的圖形處，單擊便可填充顏色，如圖12-46所示。12.3.1吸取與填充圖形對象顏色圖12-46

使用【油漆桶工具填充顏色

使用【筆觸顏色】工具修改圖形的描邊顏色比較簡單，首先打開一幅需要改變描邊顏色的圖形文件，如圖12-47所示。然后在【層】面板中將所有的路徑層選中，此時，工作區(qū)中的所有路徑為選中狀態(tài)，如圖12-48所示。最后在【矢量】工具箱中單擊【筆觸顏色】按鈕，在彈出的調(diào)色板中選擇需要的顏色，這樣便可以改變所有圖形的描邊顏色，如圖12-49所示。12.3.2改變圖形的描邊和填充顏色圖12-47打開圖形文件圖12-48選中所有路徑圖12-49修改后的描邊顏色【混色器】面板可用于創(chuàng)建要添加至當前文檔的調(diào)色板或要應(yīng)用到選定對象的顏色。在菜單欄中選擇【窗口】→【混色器】命令，打開【混色器】面板，如圖12-50所示。如果想改變圖形的描邊顏色，便可以單擊【筆觸顏色】按鈕，然后在其下方的顏色條中選擇所需要的顏色或在其面板右側(cè)的R、G和B下拉列表框中輸入數(shù)值，這樣便可以改變圖形的描邊顏色；如果想改變圖形的填充顏色，則需要選擇【填充顏色】工具，然后再更改顏色。12.3.3使用面板改變圖形的描邊和填充顏色圖12-5

【混色器】面板

【樣本】面板用于管理當前文檔的調(diào)色板，如圖12-51所示。使用【樣本】面板來修改圖形的描邊顏色和填充顏色的方式比使用【混色器】面板來修改圖形的描邊顏色和填充顏色簡單，但是顏色的種類相對較少。12.3.3使用面板改變圖形的描邊和填充顏色圖12-5

【樣本】面板

在工作區(qū)中選擇一個圖形，這樣便可以在【屬性】面板中設(shè)置其描邊顏色和填充顏色，如圖12-52所示。12.3.3使用面板改變圖形的描邊和填充顏色圖12-52

【屬】面板

12.4編輯圖形圖像對象12.4.1選擇圖形圖像12.4.2縮放和裁剪圖形圖像12.4.3移動、復(fù)制、再制和刪除圖形圖像對象12.4.4排列、組合和對齊圖形圖像對象使用【指針】工具選擇對象時，只需要單擊對象即可。如果想選擇多個對象，可以在選擇完一個對象后，按<Shift>鍵，再選擇其他對象。使用【部分選定】工具可以選擇、移動或修改矢量路徑上的點或者屬于組的對象。12.4.1選擇圖形圖像圖8-6【安裝選項】對話框使用【縮放】工具可以在水平、垂直方向或同時在兩個方向放大或縮小圖形圖像。在工作區(qū)中選擇一個對象后，可以使用【縮放】工具對其大小進行調(diào)整。移動鼠標到工作區(qū)，當鼠標指針變?yōu)樾螤顣r，表示可以進行左右縮放；當鼠標指針變?yōu)樾螤顣r，表示可以上下縮放；當鼠標變?yōu)樾螤顣r，表示可以上下左右同時縮放；當鼠標指針變?yōu)樾螤顣r，表示可以旋轉(zhuǎn)被選中的對象。12.4.2縮放和裁剪圖形圖像圖8-6【安裝選項】對話框

【裁剪】工具就像剪刀一樣，只是服務(wù)的對象不一樣。使用【裁剪】工具可以將圖形圖像中不需要的像素剪掉。例如：打開一個圖像文件如圖12-53所示，然后單擊【裁剪】按鈕，拖拽鼠標創(chuàng)建裁剪區(qū)域，如圖12-54所示，按<Enter>鍵得到裁剪后的圖像，如圖12-55所示。12.4.2縮放和裁剪圖形圖像圖8-6【安裝選項】對話框圖12-53打開圖像文件圖12-54創(chuàng)建裁剪區(qū)域在工作區(qū)中選擇需要移動的圖形圖像對象，單擊【選擇】工具箱中的【指針】按鈕，將鼠標移到工作區(qū)中便可以拖拽對象到指定的位置，移動前后對象分別如圖12-56和圖12-57所示。12.4.3移動、復(fù)制、再制和刪除圖形圖像對象圖8-6【安裝選項】對話框圖12-56移動對象前圖12-57移動對象后在工作區(qū)中選擇需要復(fù)制的圖形圖像，在菜單欄中選擇【編輯】→【復(fù)制】命令，再次在菜單欄中選擇【編輯】→【粘貼】命令，便完成了圖像的復(fù)制工作。也可以使用工作區(qū)中的選擇類工具，在按<Alt>鍵的同時拖拽鼠標便可以完成復(fù)制工作，如圖12-58所示。12.4.3移動、復(fù)制、再制和刪除圖形圖像對象圖8-6【安裝選項】對話框

圖12-58

復(fù)制并移動對象

圖12-58復(fù)制并移動對象再制對象的意思就是重復(fù)粘貼，它的粘貼次數(shù)在兩次以上。在菜單欄中選擇【編輯】→【重復(fù)粘貼】命令便可以完成此操作，如圖12-59所示。12.4.3移動、復(fù)制、再制和刪除圖形圖像對象圖8-6【安裝選項】對話框

圖12-58

復(fù)制并移動對象

圖12-9

再制對象

在工作區(qū)中繪圖時，系統(tǒng)會自動安排圖形的順序，先繪制的圖形位于最下層，后繪制的圖形位于上層，依次類推。如果想重新排列對象，需要在選中對象后在菜單欄中選擇【修改】→【排列】命令，在其子菜單中選擇【移到前面】、【上移一層】、【下移一層】或【移到最后】等命令，這樣便可完成排列對象的操作。12.4.4排列、組合和對齊圖形圖像對象圖8-6【安裝選項】對話框

圖12-58

復(fù)制并移動對象

組合對象可以將各個所選對象組合起來，然后將其作為單個對象處理。例如，在工作區(qū)中繪制多個圖形，如圖12-60所示。使用選擇工具將其全部框選后，在菜單欄中選擇【修改】→【組合】命令，就將其變成了單個對象，如圖12-61所示。12.4.4排列、組合和對齊圖形圖像對象圖8-6【安裝選項】對話框

圖12-58

復(fù)制并移動對象

圖12-60繪制好的多個圖形圖12-61組合后的圖形想要對齊工作區(qū)中的多個對象，需要在菜單欄中選擇【修改】→【對齊】命令，再在其子菜單中選擇相應(yīng)的選項即可，子菜單如圖12-62所示。下面對其子菜單中的各個命令作一簡單介紹。12.4.4排列、組合和對齊圖形圖像對象圖8-6【安裝選項】對話框

圖12-58

復(fù)制并移動對象

圖12-62【對齊】命令的子菜單12.5修改和調(diào)整對象12.5.1調(diào)整畫布與圖像的大小12.5.2旋轉(zhuǎn)與裁剪畫布在菜單欄中選擇【修改】→【畫布】命令，會彈出其子菜單，如圖12-63所示。選擇【畫布大小】命令，彈出【圖像大小】對話框，如圖12-64所示。12.5.1調(diào)整畫布與圖像的大小圖8-6【安裝選項】對話框圖12-63【畫布】子菜單圖12-64【圖像大小】對話框在【畫布】子菜單中選擇【畫布大小】命令，彈出【畫布大小】對話框如圖12-66所示。下面對【畫布大小】對話框中主要選項的意義作一簡單介紹：12.5.1調(diào)整畫布與圖像的大小圖8-6【安裝選項】對話框圖12-66【畫布大小】對話框

圖12-66【畫布大小】對話框用戶可以通過在【畫布】子菜單中選擇【旋轉(zhuǎn)180°】、【旋轉(zhuǎn)90°順時針】、【旋轉(zhuǎn)90°逆時針】命令，對畫布進行旋轉(zhuǎn)操作。12.5.2旋轉(zhuǎn)與裁剪畫布圖8-6【安裝選項】對話框圖12-67旋轉(zhuǎn)畫布180°前后對比

圖12-67旋轉(zhuǎn)畫布180°前后對比12.6創(chuàng)建與編輯文本12.6.1創(chuàng)建文本12.6.2編輯文本使用工具箱中的【文本】工具可以輸入、格式化并編輯圖形中的文本，還可以通過其【屬性】面板設(shè)置字體、尺寸、顏色、字間距、排列方向及段落對齊特性等參數(shù)，如圖12-70所示。12.6.1創(chuàng)建文本圖8-6【安裝選項】對話框圖12-70【文本】工具的【屬性】面板文本和其他矢量圖形對象一樣，也可以對其進行描邊、填充漸變顏色以及其他效果的調(diào)整，如圖12-71所示。12.6.2編輯文本圖8-6【安裝選項】對話框圖12-71為文本設(shè)置不同的效果12.7使用層和蒙版12.7.1使用層12.7.2蒙版

【層】面板顯示文檔的當前幀中所有層的當前狀態(tài)。若要查看其他幀，可以使用【幀】面板或者單擊【層】面板底部的【幀】按鈕，在彈出菜單中選擇一個命令。活動層的名稱在【層】面板中高亮顯示。可以展開層查看它上面所有對象的列表，對象以縮略圖的形式顯示。不透明度和混合模式控件位于【層】面板的頂部。蒙版也顯示在【層】面板中。單擊蒙版縮略圖可以編輯蒙版。還可以使用【層】面板創(chuàng)建新的位圖蒙版。【層】面板中各個選項的名稱如圖12-76所示。12.7.1使用層圖8-6【安裝選項】對話框圖12-76【層】面板在默認情況下，創(chuàng)建一個新的文檔時，【層】面板中只有兩個圖層，一個是【層1】；一個是【網(wǎng)頁層】，如圖12-77所示。12.7.1使用層圖8-6【安裝選項】對話框圖12-77默認狀態(tài)下的【層】面板在Fireworks中，有兩種蒙版，一種是位圖蒙版；另一種是路徑蒙版，也稱矢量蒙版。所以用戶可以從位圖對象創(chuàng)建蒙版對象(位圖蒙版)，或者從矢量對象創(chuàng)建蒙版對象(矢量蒙版)。還可以使用多個對象或組合對象來創(chuàng)建蒙版。可以用多種方式修改蒙版。通過修改蒙版的位置、形狀和顏色，可以更改被遮罩對象的可見度。可以更改蒙版的類型及其應(yīng)用方式，替換、禁用或刪除蒙版，修改被遮罩的對象，重新排列被遮罩的對象而不必移動蒙版，以及向現(xiàn)有蒙版組中添加其他被遮罩的對象。使用【層】面板中的縮略圖，可以很容易地標識和選擇蒙版和被遮罩的對象。縮略圖使用戶可以很容易地只選擇和編輯蒙版或被應(yīng)用蒙版的對象，而不影響其他對象。選擇蒙版縮略圖時，蒙版圖標會出現(xiàn)在【層】面板中的縮略圖旁邊，而蒙版的屬性顯示在【屬性】面板中(如果需要可以在此更改這些屬性)。12.7.2蒙版圖8-6【安裝選項】對話框12.8上機實訓(xùn)1.實訓(xùn)目的下面依據(jù)上述講解，設(shè)計并繪制如圖12-83所示的網(wǎng)頁效果圖。通過實例制作，使讀者進一步熟悉在Fireworks中進行繪制、編輯、修改圖形圖像以及在Fireworks中使用蒙版等方法。實例最終)。圖12效果文件見“站點實例”(WebDemo\ch12-83網(wǎng)頁效果圖12.8上機實訓(xùn)2.實訓(xùn)步驟(1)在菜單欄中選擇【文件】→【新建】命令，彈出【新建文檔】對話框，設(shè)置如圖12-84所示。然后單擊【確定】按鈕，關(guān)閉對話框。圖12-84【新建文檔】對話框12.8上機實訓(xùn)(2)在菜單欄中選擇【文件】→【保存】命令，在彈出的【另存為】對話框中將其命名為“樂安亭網(wǎng)頁.png”，并保存到“ch12”文件夾中。(3)在【矢量】工具箱中單擊【矩形】按鈕，然后在其【屬性】面板中對其屬性進行修改，如圖12-85所示。圖12-85【矩形】工具的【屬性】面板12.8上機實訓(xùn)(4)在工作區(qū)中創(chuàng)建兩個矩形，如圖12-86所示。(5)單擊【矢量】工具箱中的【矩形】按鈕，在【屬性】面板的【填充類別】下拉列表框中選擇“漸變”選項，在已繪制好的兩個矩形中間創(chuàng)建矩形如圖12-87所示。

圖12-86繪制矩形圖12-87創(chuàng)建矩形

12.8上機實訓(xùn)(6)在菜單欄中選擇【文件】→【導(dǎo)入】