1、網(wǎng)頁設(shè)計(jì)與制作（第二版）第二篇 素材篇人民郵電出版社第3章 圖像處理軟件Fireworks 3.1 Fireworks 8基本操作3.2 矢量圖和位圖 3.3 選擇和編輯對(duì)象3.4 使用文本 3.5 特殊效果 3.6 圖像的切片與導(dǎo)出 第3章 圖像處理軟件Fireworks2022/8/93網(wǎng)頁設(shè)計(jì)與制作（第二版）3.1 Fireworks 8基本操作新建與導(dǎo)入文檔 文檔的保存 瀏覽文檔 設(shè)置文檔屬性 2022/8/94網(wǎng)頁設(shè)計(jì)與制作（第二版）Fireworks 8 簡介Fireworks 8是Macromedia 公司推出的最新專業(yè)化的Web圖像處理軟件，它在原有版本的基礎(chǔ)上功能更為增強(qiáng)，用

2、戶界面更為友好。使用 Fireworks，可以在一個(gè)專業(yè)化的環(huán)境中創(chuàng)建和編輯網(wǎng)頁圖形、對(duì)其進(jìn)行動(dòng)畫處理、添加高級(jí)交互功能以及優(yōu)化圖像。在 Fireworks 中，可以在單個(gè)應(yīng)用程序中創(chuàng)建和編輯位圖和矢量兩種圖形。一切都可以隨時(shí)進(jìn)行編輯。除此之外，工作流可以實(shí)現(xiàn)自動(dòng)化，從而滿足耗費(fèi)時(shí)間的更新和更改要求。2022/8/95網(wǎng)頁設(shè)計(jì)與制作（第二版）Fireworks 8 工作界面 2022/8/96網(wǎng)頁設(shè)計(jì)與制作（第二版）新建與導(dǎo)入文檔有三種方式：“文件”菜單下的“新建” 通過剪貼板創(chuàng)建文檔 打開或?qū)胛臋n 2022/8/97網(wǎng)頁設(shè)計(jì)與制作（第二版） 瀏覽文檔 使用標(biāo)尺、網(wǎng)格線、引導(dǎo)線等 選擇“視圖

3、”菜單下的“標(biāo)尺”、“網(wǎng)格線”、“引導(dǎo)線”等即可進(jìn)入左圖所示狀態(tài)。2022/8/98網(wǎng)頁設(shè)計(jì)與制作（第二版）設(shè)置文檔屬性 圖像大小選擇“修改/畫布/圖象大小” 畫布大小 選擇“修改/畫布/畫布大小” 畫布顏色 選擇“修改/畫布/畫布顏色” 旋轉(zhuǎn) 選擇“修改/畫布/旋轉(zhuǎn)” 2022/8/99網(wǎng)頁設(shè)計(jì)與制作（第二版）3.2 矢量圖和位圖 矢量圖和位圖的概念創(chuàng)建位圖對(duì)象 繪制矢量對(duì)象 2022/8/910網(wǎng)頁設(shè)計(jì)與制作（第二版）位圖局部放大時(shí)會(huì)產(chǎn)生較為嚴(yán)重的失真2022/8/911網(wǎng)頁設(shè)計(jì)與制作（第二版）矢量圖矢量圖是以點(diǎn)和路徑構(gòu)成的，矢量圖所記錄的是圖像中每一個(gè)位置的坐標(biāo)以及這些坐標(biāo)之間的相互關(guān)系

4、。一般而言，對(duì)矢量圖進(jìn)行任意尺度的放大時(shí)都不會(huì)有失真現(xiàn)象。 2022/8/912網(wǎng)頁設(shè)計(jì)與制作（第二版）創(chuàng)建位圖對(duì)象 創(chuàng)建新位圖對(duì)象 使用Fireworks MX的位圖繪制和繪畫工具，即可創(chuàng)建位圖圖形對(duì)象。 創(chuàng)建空位圖對(duì)象 單擊“層”面板中的“新建位圖圖象”按鈕，或者選擇“編輯/插入/空位圖”菜單命令 用剪切或復(fù)制的方法 矢量對(duì)象轉(zhuǎn)換成位圖 選中矢量對(duì)象后，使用“修改/平面化所選”菜單命令即可轉(zhuǎn)化成位圖圖像 2022/8/913網(wǎng)頁設(shè)計(jì)與制作（第二版）繪制矢量對(duì)象 “工具”面板的“矢量”部分的工具即是對(duì)矢量進(jìn)行編輯操作的工具，默認(rèn)情況下有“線條”、“鋼筆”、“矩形”、“文本”、“自由變形”、“

5、刀子”工具等。 2022/8/914網(wǎng)頁設(shè)計(jì)與制作（第二版）3.3 選擇和編輯對(duì)象 在 Macromedia Fireworks 8中工作時(shí)，將需要處理矢量對(duì)象、位圖對(duì)象、文本塊、切片和熱點(diǎn)以及象素區(qū)域。使用選擇工具和變形工具，可以移動(dòng)、復(fù)制、刪除、旋轉(zhuǎn)、縮放或傾斜對(duì)象。在具有多個(gè)對(duì)象的文檔中，可以通過對(duì)對(duì)象執(zhí)行堆疊、組合和對(duì)齊操作來組織它們。2022/8/915網(wǎng)頁設(shè)計(jì)與制作（第二版）選擇對(duì)象 在畫布上對(duì)任何對(duì)象執(zhí)行任何操作之前，必須首先選擇該對(duì)象。 當(dāng)“層”面板已打開并且層處于擴(kuò)展?fàn)顟B(tài)時(shí)，在該面板中單擊一個(gè)對(duì)象即可選中該對(duì)象。“工具”面板“選擇”部分中有“指針工具”、“選擇后方對(duì)象工具”和

6、“部分選定工具”可進(jìn)行選擇對(duì)象。 選擇“選擇”菜單下的“選擇全部”，可將活動(dòng)文檔窗口內(nèi)的全部對(duì)象一起選中。 2022/8/916網(wǎng)頁設(shè)計(jì)與制作（第二版）2022/8/917網(wǎng)頁設(shè)計(jì)與制作（第二版）選擇象素 創(chuàng)建選區(qū)選取框 2022/8/918網(wǎng)頁設(shè)計(jì)與制作（第二版）調(diào)整選區(qū)選取框 向選區(qū)添加象素：按住Shift鍵使用任何位圖選擇工具繪制要添加到選區(qū)中的區(qū)域。從選區(qū)中去除象素：按住Alt鍵并使用位圖選擇工具繪制不再屬于選區(qū)的象素區(qū)域。通過交叉選取框創(chuàng)建選取框：使用任何位圖選擇工具創(chuàng)建一選取框，再按住Alt+Shift鍵創(chuàng)建重疊原選取框的新選取框，則只有兩個(gè)選取框的交叉區(qū)域內(nèi)的象素被選定。羽化象素

7、選區(qū) 創(chuàng)建和移動(dòng)浮動(dòng)象素選區(qū) 2022/8/919網(wǎng)頁設(shè)計(jì)與制作（第二版）變形和扭曲 縮放對(duì)象旋轉(zhuǎn)對(duì)象 翻轉(zhuǎn)對(duì)象 傾斜對(duì)象 扭曲對(duì)象 2022/8/920網(wǎng)頁設(shè)計(jì)與制作（第二版）拖動(dòng)變形手柄旋轉(zhuǎn)軸中心點(diǎn)2022/8/921網(wǎng)頁設(shè)計(jì)與制作（第二版）2022/8/922網(wǎng)頁設(shè)計(jì)與制作（第二版）組織對(duì)象 2022/8/923網(wǎng)頁設(shè)計(jì)與制作（第二版）修飾位圖 克隆象素 模糊和銳化象素 減淡和加深象素 調(diào)整位圖亮度和對(duì)比度 調(diào)整色相和飽和度 裁剪所選位圖2022/8/924網(wǎng)頁設(shè)計(jì)與制作（第二版）克隆象素選擇“工具”面板“位圖”部分的“橡皮圖章”工具，單擊飛機(jī)中間指定為源（即要克隆的區(qū)域），這時(shí)取樣指針

8、變成十字型指針。再將指針移到其他位置并拖動(dòng)指針，這時(shí)可以看到兩個(gè)指針，第一個(gè)是克隆源，為一十字型。不斷在目標(biāo)區(qū)域拖動(dòng)即可克隆出一架飛機(jī)。 2022/8/925網(wǎng)頁設(shè)計(jì)與制作（第二版）編輯矢量對(duì)象路徑 通過矢量路徑上的點(diǎn)來編輯路徑 拉伸或推動(dòng)所選路徑 扭曲路徑 將路徑剪切為多個(gè)對(duì)象 合并路徑對(duì)象刪除路徑對(duì)象的部分收縮或擴(kuò)展路徑2022/8/926網(wǎng)頁設(shè)計(jì)與制作（第二版）通過矢量路徑上的點(diǎn)來編輯路徑 2022/8/927網(wǎng)頁設(shè)計(jì)與制作（第二版）推動(dòng)路徑 2022/8/928網(wǎng)頁設(shè)計(jì)與制作（第二版）扭曲路徑 2022/8/929網(wǎng)頁設(shè)計(jì)與制作（第二版）顏色和填充 顏色也是網(wǎng)頁設(shè)計(jì)及制作中需要著重考慮

9、的因素之一，可以說顏色應(yīng)用得好壞將直接影響到最終的網(wǎng)站。真彩色網(wǎng)頁安全色 Macromedia Fireworks MX 包含各種面板、工具和選項(xiàng)，用于組織和選擇顏色并將顏色應(yīng)用到位圖圖象和矢量對(duì)象。2022/8/930網(wǎng)頁設(shè)計(jì)與制作（第二版）選擇顏色 2022/8/931網(wǎng)頁設(shè)計(jì)與制作（第二版）使用顏色樣本 添加顏色 刪除顏色 保存樣本 “選項(xiàng)”菜單 2022/8/932網(wǎng)頁設(shè)計(jì)與制作（第二版）使用混色器 2022/8/933網(wǎng)頁設(shè)計(jì)與制作（第二版）填充 實(shí)心填充 圖案填充 漸變填充 2022/8/934網(wǎng)頁設(shè)計(jì)與制作（第二版）填充屬性選中“工具”面板中的“油漆桶”工具后，可在屬性面板設(shè)置填

10、充屬性 2022/8/935網(wǎng)頁設(shè)計(jì)與制作（第二版）漸變填充2022/8/936網(wǎng)頁設(shè)計(jì)與制作（第二版）3.4 使用文本文本在網(wǎng)頁中有兩種存在形式，一種是純文本，一種是圖形文字。圖形文字實(shí)際上就是圖像，它構(gòu)成了圖像的一部分。 Fireworks中輸入的文字是作為單獨(dú)的文本對(duì)象存儲(chǔ)在文檔中的，而不是直接作為象素保存起來，因此，即使對(duì)文字應(yīng)用筆觸、填充、特效后仍然可以編輯文本。 2022/8/937網(wǎng)頁設(shè)計(jì)與制作（第二版）輸入文本 2022/8/938網(wǎng)頁設(shè)計(jì)與制作（第二版）編輯文本2022/8/939網(wǎng)頁設(shè)計(jì)與制作（第二版）對(duì)文本應(yīng)用不同效果 將筆觸、填充和效果應(yīng)用到文本 將文本附加到路徑 變形

11、文本 2022/8/940網(wǎng)頁設(shè)計(jì)與制作（第二版）2022/8/941網(wǎng)頁設(shè)計(jì)與制作（第二版）3.5 特殊效果 Fireworks提供了許多處理圖像得到特殊效果的工具，來豐富圖像的顯示效果。很多工具在處理圖形、圖像顯示效果方面起著至關(guān)重要的作用，如動(dòng)態(tài)效果、濾鏡、樣式等。 動(dòng)態(tài)效果層蒙版 樣式2022/8/942網(wǎng)頁設(shè)計(jì)與制作（第二版）動(dòng)態(tài)效果 2022/8/943網(wǎng)頁設(shè)計(jì)與制作（第二版）層面板2022/8/944網(wǎng)頁設(shè)計(jì)與制作（第二版）蒙版 2022/8/945網(wǎng)頁設(shè)計(jì)與制作（第二版）利用文本創(chuàng)建蒙版 編輯好文字并選中該文字，調(diào)整邊緣、填充等屬性選擇“編輯”菜單下的“剪切”打開一位圖圖片選擇

12、“編輯”菜單下的“粘貼為蒙版”2022/8/946網(wǎng)頁設(shè)計(jì)與制作（第二版）樣式 應(yīng)用樣式 創(chuàng)建樣式 刪除樣式 編輯樣式 2022/8/947網(wǎng)頁設(shè)計(jì)與制作（第二版）GIF動(dòng)畫 2022/8/948網(wǎng)頁設(shè)計(jì)與制作（第二版）3.6 圖像的切片與導(dǎo)出 切片技術(shù)就是將一個(gè)大的圖像分割成若干色深較淺的小的圖像，即切片，每一個(gè)切片都是一個(gè)獨(dú)立的文件。每個(gè)切片對(duì)于大圖來說都是一個(gè)對(duì)象，我們可以像操作其他對(duì)象一樣對(duì)切片進(jìn)行相應(yīng)的操作，可分別對(duì)每個(gè)切片進(jìn)行優(yōu)化操作，每一個(gè)切片下載到用戶瀏覽器端后的拼接是通過HTML代碼實(shí)現(xiàn)的。 切片可以賦于圖像交互性和替換局部圖像。 2022/8/949網(wǎng)頁設(shè)計(jì)與制作（第二版）

13、使用切片 繪制矩形切片 多邊形切片 編輯切片 使切片交互 使用熱點(diǎn)命名切片 2022/8/950網(wǎng)頁設(shè)計(jì)與制作（第二版）優(yōu)化圖像 2022/8/951網(wǎng)頁設(shè)計(jì)與制作（第二版）預(yù)覽結(jié)果 2022/8/952網(wǎng)頁設(shè)計(jì)與制作（第二版）選擇合適的圖像格式 GIF格式 JPEG格式 PNG格式 WBMP格式 2022/8/953網(wǎng)頁設(shè)計(jì)與制作（第二版）GIF格式GIF格式圖像是目前網(wǎng)絡(luò)中應(yīng)用最為廣泛的圖像壓縮格式，采用LZW無損失壓縮算法，不會(huì)出現(xiàn)圖像效果的失真。GIF格式的圖像最多只能顯示256種顏色。對(duì)于包含顏色數(shù)目較少的圖像，可選用GIF格式，如卡通、徽標(biāo)、包含透明區(qū)域的圖形以及動(dòng)畫等。2022/

14、8/954網(wǎng)頁設(shè)計(jì)與制作（第二版）JPEG格式JPEG是聯(lián)合圖像專家組開發(fā)出來的一種圖形標(biāo)準(zhǔn)，通過減少像素的方法進(jìn)行壓縮圖像，是一種有損壓縮算法，但壓縮程度是可控制的。JPEG支持24位真彩色，因此JPEG格式顯示圖像色彩豐富。對(duì)于使用的顏色數(shù)較多，含有大量過渡顏色區(qū)域，而且追求圖像質(zhì)量的圖像應(yīng)選用JPEG格式，如掃描的照片、使用紋理的圖像和任何需要256種以上顏色的圖像等。2022/8/955網(wǎng)頁設(shè)計(jì)與制作（第二版）PNG格式PNG格式采用的也是一種無損壓縮算法，能真實(shí)再現(xiàn)圖像原貌，最多可以支持32位的顏色，因此它同時(shí)具有GIF格式和JPEG格式的優(yōu)點(diǎn)。PNG格式的圖像在不同的計(jì)算機(jī)平臺(tái)上可以顯示完全相同的效果，避免了不少網(wǎng)頁測試時(shí)的繁復(fù)的工作。PNG格式是Fireworks的默認(rèn)標(biāo)準(zhǔn)格式，對(duì)于網(wǎng)頁上傳后發(fā)現(xiàn)的圖像錯(cuò)誤、不妥