[學(xué)習(xí)]網(wǎng)頁(yè)設(shè)計(jì)與制作第12章矢量圖形的編輯

1、第12章 矢量圖形的編輯,第12章 矢量圖像的編輯,學(xué)習(xí)目標(biāo)： 通過(guò)本章的學(xué)習(xí)，要求掌握Fireworks的幾個(gè)基本概念，熟練使用工具箱的使用，掌握繪制編輯路徑對(duì)象的方法，熟練創(chuàng)建與編輯文本，創(chuàng)建文本路徑。,第12章 矢量圖像的編輯,12.1 Fireworks的幾個(gè)基本概念12.2 繪制路徑對(duì)象12.3 編輯路徑對(duì)象12.4 創(chuàng)建和編輯文本12.5 路徑文本,12.1 Fireworks的幾個(gè)基

2、本概念,1.Fireworks的對(duì)象 Fireworks 引入了對(duì)象的概念，對(duì)象就是圖像中的一個(gè)獨(dú)立的部分，我們把圖像看成是由一個(gè)個(gè)的對(duì)象組成的。也可以把矢量對(duì)象和位圖對(duì)象、文本塊、切片和熱點(diǎn)以及像素區(qū)域都作為一個(gè)對(duì)象進(jìn)行編輯，從而使對(duì)圖像的編輯變成了對(duì)組成圖像的對(duì)象的編輯，在具有多個(gè)對(duì)象的文檔中，還可以通過(guò)對(duì)對(duì)象執(zhí)行堆疊、組合和對(duì)齊操作來(lái)組織它們，即簡(jiǎn)化了編輯難度又提高了編輯效率。,12.1 Firewor

3、ks的幾個(gè)基本概念,2.矢量圖也稱(chēng)為面向?qū)ο蟮膱D像或繪圖圖像，在數(shù)學(xué)上定義為一系列由線連接的點(diǎn)。例如，一片葉子是由一系列描述葉子輪廓的點(diǎn)連接起來(lái)構(gòu)成了圖像的形狀，葉子的顏色由它的輪廓（即筆觸）的顏色和該輪廓所包圍的區(qū)域（即填充）的顏色決定。編輯矢量圖形時(shí)，您修改的是描述其形狀的線條和曲線（包含顏色和位置信息）的屬性。矢量圖形與分辨率無(wú)關(guān)，對(duì)其調(diào)整大小、更改形狀等操作，而不會(huì)改變其外觀品質(zhì)，例如將葉子圖像放大時(shí)，不會(huì)出現(xiàn)明顯鋸齒狀現(xiàn)象

4、，圖像顏色也不會(huì)發(fā)生變化。但是矢量圖并不適合用來(lái)記錄色彩較為復(fù)雜的圖像。,12.1 Fireworks的幾個(gè)基本概念,3.位圖也稱(chēng)為點(diǎn)陣圖像或繪制圖像，是由無(wú)數(shù)個(gè)排列成網(wǎng)格的像素點(diǎn)組成。圖像就是由網(wǎng)格中每個(gè)像素的位置和顏色值決定的。這些點(diǎn)可以進(jìn)行不同的排列和染色以構(gòu)成不同的圖樣。當(dāng)放大位圖時(shí)，可以看見(jiàn)構(gòu)成整個(gè)圖像的無(wú)數(shù)單個(gè)方塊（像素點(diǎn)）。因?yàn)槊總€(gè)點(diǎn)被指定一種顏色，所以可以通過(guò)修改其中每一個(gè)像素的顏色而使圖像的效果更逼真。編輯位圖圖形

5、時(shí)，是使這些像素點(diǎn)在網(wǎng)格中重新進(jìn)行分布，例如縮小位圖時(shí)，就是通過(guò)減少像素來(lái)使整個(gè)圖像變小的，所以修改位圖圖形通常會(huì)使圖像的邊緣呈鋸齒狀，或者降低圖像的品質(zhì)，如圖12-1所示。,12.2 繪制路徑對(duì)象,在Fireworks MX 2004中，有兩種工作模式，一種上針對(duì)矢量編輯的對(duì)象模式，一種是對(duì)應(yīng)位圖編輯的位圖模式，我們首先來(lái)學(xué)習(xí)在對(duì)象模式下，繪制、編輯各種圖形。,12.2 繪制路徑對(duì)象,12.2.1路徑的概念12.2.2繪制基本圖形,

6、12.2.1路徑的概念,前面提到，矢量圖是由一系列描述圖形輪廓的點(diǎn)連接構(gòu)成的，我們把這些表現(xiàn)在圖形上的線條和輪廓就稱(chēng)為路徑。每個(gè)路徑至少有兩個(gè)點(diǎn)以形成一條線段，路徑可以是開(kāi)放的（起點(diǎn)和終點(diǎn)不重合），也可以是封閉的（起點(diǎn)和終點(diǎn)重合在一起），如圖12-2所示。,12.2.2 繪制基本圖形,1.繪制基本形狀2.【鋼筆】工具繪制路徑3.【矢量路徑】工具,12.3 編輯路徑對(duì)象,12.3.1描邊和填充12.3.2選取和移動(dòng)路徑對(duì)象

7、1. 【指針】工具 2.【選擇后方對(duì)象】工具 3.【部分】選定工具12.3.3 修改路徑對(duì)象 1.利用【縮放】工具修改整個(gè)路徑對(duì)象 2.調(diào)整節(jié)點(diǎn) 3.調(diào)整路徑12.3.4多個(gè)路徑對(duì)象的操作12.3.5對(duì)路徑的其他操作,12.3.1描邊和填充,利用筆觸屬性為矢量對(duì)象進(jìn)行描邊，突出路徑的形狀，利用填充屬性為對(duì)象的內(nèi)部著色，使對(duì)象成為實(shí)心對(duì)象。用戶(hù)可以通過(guò)【屬性】面板或工具面板的顏色部分訪問(wèn)、修

8、改筆觸及填充選項(xiàng)。在Fireworks MX 2004中當(dāng)用戶(hù)選擇了【鋼筆】工具或其他可以應(yīng)用該屬性的工具時(shí)，屬性面板上會(huì)自動(dòng)出現(xiàn)各種筆觸和填充的選項(xiàng)以供用戶(hù)進(jìn)行設(shè)置，如圖12-7所示。,12.3.2 選取和移動(dòng)路徑對(duì)象,在Fireworks MX 2004的中利用【選取】類(lèi)工具箱中的【指針】工具、【部分選定】工具，可以方便的選取路徑對(duì)象或?qū)ο蟮牟糠挚刂泣c(diǎn)。,12.3.2 選取和移動(dòng)路徑對(duì)象,1.【指針】工具2. 【選擇后方對(duì)象】工具

9、3. 【部分】選定工具,12.3.3修改路徑對(duì)象,我們知道矢量對(duì)象的形狀主要是由路徑的形狀決定的，所以通過(guò)對(duì)路徑的修改可以很有效地幫助編輯、修改矢量對(duì)象。修改可以是對(duì)整個(gè)路徑也可以是對(duì)路徑中的某段進(jìn)行，下面介紹幾種主要方法：,12.3.3修改路徑對(duì)象,1.利用【縮放】工具修改整個(gè)路徑對(duì)象2.調(diào)整節(jié)點(diǎn)3.調(diào)整路徑,12.3.4 多個(gè)路徑對(duì)象的操作,當(dāng)圖像中存在多個(gè)路徑對(duì)象時(shí)，我們可以同時(shí)對(duì)所有或部分對(duì)象進(jìn)行整體操作，比如排列、對(duì)齊、

10、組合等等，這些選項(xiàng)可以在【修改】菜單下找到。這里主要介紹多個(gè)路徑對(duì)象的組合操作。接合 拆分 聯(lián)合 交集 打孔 裁切,12.3.5 對(duì)路徑的其他操作,(1)簡(jiǎn)化路徑，在不明顯改變路徑基本形狀的前提下，將刪除路徑上不需要的點(diǎn)，簡(jiǎn)化路徑的曲線形狀。如圖12-21所示，對(duì)原圖不斷簡(jiǎn)化后的效果。(2)擴(kuò)展筆觸，就是以原始路徑為中心向外形成一個(gè)形狀與路徑相同的幻象。,12.4 創(chuàng)建和編輯文本,Fireworks MX 2004 提供了

11、許多文本功能，不但可以創(chuàng)建不同風(fēng)格的文本，也能設(shè)計(jì)出各種形式的文本圖形，文本與路徑的結(jié)合更是可以得到意想不到效果。其功能可與許多文字排版軟件相媲美。,12.4 創(chuàng)建和編輯文本,12.4.1 創(chuàng)建文本12.4.2編輯文本,12.4.1 創(chuàng)建文本,1.設(shè)置工具的屬性2.移動(dòng)文本塊,12.4.2 編輯文本,1.調(diào)整文本的間距和字符寬度2.文本的方向3.平滑文本邊緣4.設(shè)置文本的填充顏色5.對(duì)文本的變形,12.5 路徑文本,在Fir

12、eworks中不但可以對(duì)文本直接進(jìn)行編輯，也可以將文本轉(zhuǎn)換成路徑以后再進(jìn)行編輯，轉(zhuǎn)換以后文本的編輯功能變的更加強(qiáng)大，例如轉(zhuǎn)換成路徑文本以后可以對(duì)其中某一個(gè)字符進(jìn)行變形操作。,12.5 路徑文本,在Fireworks中不但可以對(duì)文本直接進(jìn)行編輯，也可以將文本轉(zhuǎn)換成路徑以后再進(jìn)行編輯，轉(zhuǎn)換以后文本的編輯功能變的更加強(qiáng)大，例如轉(zhuǎn)換成路徑文本以后可以對(duì)其中某一個(gè)字符進(jìn)行變形操作。,12.5路徑文本,1.將文本轉(zhuǎn)換成路徑2.在路徑上放置文本3