網(wǎng)頁(yè)設(shè)計(jì)與制作 (3).ppt

1、第4章 圖像處理軟件Fireworks,網(wǎng)頁(yè)設(shè)計(jì)與制作,網(wǎng)頁(yè)設(shè)計(jì)與制作,2,4.1 Fireworks MX簡(jiǎn)介 4.2 Fireworks MX文檔的基本操作 4.3 矢量圖和位圖 4.4 選擇和編輯對(duì)象 4.5 顏色和填充 4.6 使用文本 4.7 特殊效果 4.8 GIF動(dòng)畫 4.9 圖像的切片與導(dǎo)出,網(wǎng)頁(yè)設(shè)計(jì)與制作,3,4.1 Fireworks MX簡(jiǎn)介,Fireworks MX是Macromedia 公司推出的最新專業(yè)化的Web圖像處理軟件，它在原有版本的基礎(chǔ)上功能更為增強(qiáng)，用戶界面更為友好。 使用 Fireworks，您可以在一個(gè)專業(yè)化的環(huán)境中創(chuàng)建和編輯網(wǎng)頁(yè)圖形、對(duì)其進(jìn)行動(dòng)畫處理

2、、添加高級(jí)交互功能以及優(yōu)化圖像。在 Fireworks 中，可以在單個(gè)應(yīng)用程序中創(chuàng)建和編輯位圖和矢量?jī)煞N圖形。一切都可以隨時(shí)進(jìn)行編輯。除此之外，工作流可以實(shí)現(xiàn)自動(dòng)化，從而滿足耗費(fèi)時(shí)間的更新和更改要求,網(wǎng)頁(yè)設(shè)計(jì)與制作,4,Fireworks MX的功能特點(diǎn),良好的的用戶界面 無(wú)模式位圖和矢量編輯 切片表布局控件 實(shí)例級(jí)按鈕元件編輯 快速導(dǎo)出 開(kāi)放的工作流程特性,網(wǎng)頁(yè)設(shè)計(jì)與制作,5,Fireworks MX工作界面,網(wǎng)頁(yè)設(shè)計(jì)與制作,6,4.2 Fireworks MX文檔的基本操作,新建與導(dǎo)入文檔 文檔的保存 瀏覽文檔 設(shè)置文檔屬性,網(wǎng)頁(yè)設(shè)計(jì)與制作,7,新建與導(dǎo)入文檔,“文件”菜單下的“新建” 通

3、過(guò)剪貼板創(chuàng)建文檔 打開(kāi)或?qū)胛臋n,瀏覽文檔,使用標(biāo)尺、網(wǎng)格線、引導(dǎo)線等,網(wǎng)頁(yè)設(shè)計(jì)與制作,9,設(shè)置文檔屬性,圖像大小 選擇“修改/畫布/圖象大小” 畫布大小 選擇“修改/畫布/畫布大小” 畫布顏色 選擇“修改/畫布/畫布顏色” 旋轉(zhuǎn) 選擇“修改/畫布/旋轉(zhuǎn)”,網(wǎng)頁(yè)設(shè)計(jì)與制作,10,4.3 矢量圖和位圖,矢量圖和位圖的概念 創(chuàng)建位圖對(duì)象 繪制矢量對(duì)象,網(wǎng)頁(yè)設(shè)計(jì)與制作,11,位圖,局部放大時(shí)會(huì)產(chǎn)生較為嚴(yán)重的失真,網(wǎng)頁(yè)設(shè)計(jì)與制作,12,矢量圖,矢量圖是以點(diǎn)和路徑構(gòu)成的，矢量圖所記錄的是圖像中每一個(gè)位置的坐標(biāo)以及這些坐標(biāo)之間的相互關(guān)系。一般而言，對(duì)矢量圖進(jìn)行任意尺度的放大時(shí)都不會(huì)有失真現(xiàn)象。,網(wǎng)頁(yè)設(shè)計(jì)與

4、制作,13,創(chuàng)建位圖對(duì)象,創(chuàng)建新位圖對(duì)象 使用Fireworks MX的位圖繪制和繪畫工具，即可創(chuàng)建位圖圖形對(duì)象。 創(chuàng)建空位圖對(duì)象 單擊“層”面板中的“新建位圖圖象”按鈕，或者選擇“編輯/插入/空位圖”菜單命令 用剪切或復(fù)制的方法 矢量對(duì)象轉(zhuǎn)換成位圖 選中矢量對(duì)象后，使用“修改/平面化所選”菜單命令即可轉(zhuǎn)化成位圖圖像,網(wǎng)頁(yè)設(shè)計(jì)與制作,14,繪制矢量對(duì)象,“工具”面板的“矢量”部分的工具即是對(duì)矢量進(jìn)行編輯操作的工具，默認(rèn)情況下有“線條”、“鋼筆”、“矩形”、“文本”、“自由變形”、“刀子”工具等。,網(wǎng)頁(yè)設(shè)計(jì)與制作,15,4.4 選擇和編輯對(duì)象,在 Macromedia Fireworks MX

5、中工作時(shí)，將需要處理矢量對(duì)象、位圖對(duì)象、文本塊、切片和熱點(diǎn)以及象素區(qū)域。使用選擇工具和變形工具，可以移動(dòng)、復(fù)制、刪除、旋轉(zhuǎn)、縮放或傾斜對(duì)象。在具有多個(gè)對(duì)象的文檔中，可以通過(guò)對(duì)對(duì)象執(zhí)行堆疊、組合和對(duì)齊操作來(lái)組織它們。,網(wǎng)頁(yè)設(shè)計(jì)與制作,16,選擇對(duì)象,在畫布上對(duì)任何對(duì)象執(zhí)行任何操作之前，必須首先選擇該對(duì)象。 當(dāng)“層”面板已打開(kāi)并且層處于擴(kuò)展?fàn)顟B(tài)時(shí)，在該面板中單擊一個(gè)對(duì)象即可選中該對(duì)象。 “工具”面板“選擇”部分中有“指針工具”、“選擇后方對(duì)象工具”和“部分選定工具”可進(jìn)行選擇對(duì)象。 選擇“選擇”菜單下的“選擇全部”，可將活動(dòng)文檔窗口內(nèi)的全部對(duì)象一起選中。,網(wǎng)頁(yè)設(shè)計(jì)與制作,17,網(wǎng)頁(yè)設(shè)計(jì)與制作,18

6、,選擇象素,創(chuàng)建選區(qū)選取框,網(wǎng)頁(yè)設(shè)計(jì)與制作,19,調(diào)整選區(qū)選取框 向選區(qū)添加象素：按住Shift鍵使用任何位圖選擇工具繪制要添加到選區(qū)中的區(qū)域。 從選區(qū)中去除象素：按住Alt鍵并使用位圖選擇工具繪制不再屬于選區(qū)的象素區(qū)域。 通過(guò)交叉選取框創(chuàng)建選取框：使用任何位圖選擇工具創(chuàng)建一選取框，再按住Alt+Shift鍵創(chuàng)建重疊原選取框的新選取框，則只有兩個(gè)選取框的交叉區(qū)域內(nèi)的象素被選定。 羽化象素選區(qū) 創(chuàng)建和移動(dòng)浮動(dòng)象素選區(qū),網(wǎng)頁(yè)設(shè)計(jì)與制作,20,變形和扭曲,縮放對(duì)象 旋轉(zhuǎn)對(duì)象 翻轉(zhuǎn)對(duì)象 傾斜對(duì)象 扭曲對(duì)象,網(wǎng)頁(yè)設(shè)計(jì)與制作,21,網(wǎng)頁(yè)設(shè)計(jì)與制作,22,網(wǎng)頁(yè)設(shè)計(jì)與制作,23,組織對(duì)象,網(wǎng)頁(yè)設(shè)計(jì)與制作,24

7、,修飾位圖,克隆象素 模糊和銳化象素 減淡和加深象素 調(diào)整位圖亮度和對(duì)比度 調(diào)整色相和飽和度 裁剪所選位圖,網(wǎng)頁(yè)設(shè)計(jì)與制作,25,編輯矢量對(duì)象路徑,通過(guò)矢量路徑上的點(diǎn)來(lái)編輯路徑 拉伸或推動(dòng)所選路徑 扭曲路徑 將路徑剪切為多個(gè)對(duì)象 合并路徑對(duì)象 刪除路徑對(duì)象的部分 收縮或擴(kuò)展路徑,網(wǎng)頁(yè)設(shè)計(jì)與制作,26,4.5 顏色和填充,顏色也是網(wǎng)頁(yè)設(shè)計(jì)及制作中需要著重考慮的因素之一，可以說(shuō)顏色應(yīng)用得好壞將直接影響到最終的網(wǎng)站。 真彩色 網(wǎng)頁(yè)安全色 Macromedia Fireworks MX 包含各種面板、工具和選項(xiàng)，用于組織和選擇顏色并將顏色應(yīng)用到位圖圖象和矢量對(duì)象。,網(wǎng)頁(yè)設(shè)計(jì)與制作,27,選擇顏色,網(wǎng)頁(yè)

8、設(shè)計(jì)與制作,28,使用顏色樣本,添加顏色 刪除顏色 保存樣本 “選項(xiàng)”菜單,網(wǎng)頁(yè)設(shè)計(jì)與制作,29,使用混色器,網(wǎng)頁(yè)設(shè)計(jì)與制作,30,填充,實(shí)心填充 圖案填充 漸變填充,網(wǎng)頁(yè)設(shè)計(jì)與制作,31,4.6 使用文本,文本在網(wǎng)頁(yè)中有兩種存在形式，一種是純文本，一種是圖形文字。圖形文字實(shí)際上就是圖像，它構(gòu)成了圖像的一部分。 Fireworks中輸入的文字是作為單獨(dú)的文本對(duì)象存儲(chǔ)在文檔中的，而不是直接作為象素保存起來(lái)，因此，即使對(duì)文字應(yīng)用筆觸、填充、特效后仍然可以編輯文本。,網(wǎng)頁(yè)設(shè)計(jì)與制作,32,輸入文本,網(wǎng)頁(yè)設(shè)計(jì)與制作,33,編輯文本,網(wǎng)頁(yè)設(shè)計(jì)與制作,34,對(duì)文本應(yīng)用不同效果,將筆觸、填充和效果應(yīng)用到文本

9、 將文本附加到路徑 變形文本,網(wǎng)頁(yè)設(shè)計(jì)與制作,35,網(wǎng)頁(yè)設(shè)計(jì)與制作,36,4.7 特殊效果,Fireworks提供了許多處理圖像得到特殊效果的工具，來(lái)豐富圖像的顯示效果。很多工具在處理圖形、圖像顯示效果方面起著至關(guān)重要的作用，如動(dòng)態(tài)效果、濾鏡、樣式等。 動(dòng)態(tài)效果 層 蒙版 樣式,網(wǎng)頁(yè)設(shè)計(jì)與制作,37,動(dòng)態(tài)效果,網(wǎng)頁(yè)設(shè)計(jì)與制作,38,層面板,網(wǎng)頁(yè)設(shè)計(jì)與制作,39,蒙版,網(wǎng)頁(yè)設(shè)計(jì)與制作,40,利用文本創(chuàng)建蒙版,編輯好文字并選中該文字，調(diào)整邊緣、填充等屬性 選擇“編輯”菜單下的“剪切” 打開(kāi)一位圖圖片 選擇“編輯”菜單下的“粘貼為蒙版”,網(wǎng)頁(yè)設(shè)計(jì)與制作,41,樣式,應(yīng)用樣式 創(chuàng)建樣式 刪除樣式 編輯樣式,網(wǎng)頁(yè)設(shè)計(jì)與制作,42,4.8 GIF動(dòng)畫,網(wǎng)頁(yè)設(shè)計(jì)與制作,43,4.9 圖像的切片與導(dǎo)出,切片技術(shù)就是將一個(gè)大的圖像分割成若干色深較淺的小的圖像，即切片，每一個(gè)切片都是一個(gè)獨(dú)立的文件。每個(gè)切片對(duì)于大圖來(lái)說(shuō)都是一個(gè)對(duì)象，我們可以像操作其他對(duì)象一樣對(duì)切片進(jìn)行相應(yīng)的操作，可分別對(duì)每個(gè)切片進(jìn)行優(yōu)化操作，每一個(gè)切片下載到用戶瀏覽器端后的拼接是通過(guò)HTML代碼實(shí)現(xiàn)的。 切片可以賦于圖像交互性和替換局部圖像。,網(wǎng)頁(yè)設(shè)計(jì)與制作,44,使用切片,繪制矩