圖像與動(dòng)畫的制作與優(yōu)化

《圖像與動(dòng)畫的制作與優(yōu)化》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、8.1圖像的制作與優(yōu)化Fireworks是集創(chuàng)建、編輯和優(yōu)化網(wǎng)頁(yè)圖形為一體的應(yīng)用軟件，它不僅可以創(chuàng)建與編輯位圖和矢量圖，而且可以通過修剪和優(yōu)化圖形圖像來減小文件的大小。而在不影響圖形圖像質(zhì)量的情況下，文件的體積越小，網(wǎng)頁(yè)的下載速度就越快。這也是Fireworks大受歡迎的原因之一。8.1.1Fireworks簡(jiǎn)介-1Fireworks擁有與Dreamweaver相似的操作界面，同樣由編輯區(qū)域、屬性面板和浮動(dòng)面板等組成。8.1.1Fireworks簡(jiǎn)介-2單擊菜單欄上的“文件”，在下拉菜單中選擇“新建”命令，打開“新建文檔”對(duì)話框，在“新建文檔”對(duì)話框中，可以通過更改寬度

2、和高度的值，來更改畫布的大小，還可以對(duì)分辨率和畫布顏色進(jìn)行修改。最后單擊“確定”。8.1.1Fireworks簡(jiǎn)介-3窗口左邊的工具面板分為六個(gè)區(qū)域，分別有不同的功能。在該面板上集成了編輯圖像所需的各種工具，只需要在面板上選擇相應(yīng)的工具就可以對(duì)矢量圖、位圖進(jìn)行操作，這樣就省去了在位圖和矢量圖之間的切換操作。8.1.1Fireworks簡(jiǎn)介-4和Dreamweaver的屬性面板一樣，F(xiàn)ireworks的屬性面板也是一個(gè)包含各種選項(xiàng)的動(dòng)態(tài)面板。隨著操作內(nèi)容的變化，屬性面板上的內(nèi)容也隨著發(fā)生相應(yīng)的變化。如圖8.6所示是選中畫布時(shí)，屬性面板的樣子。8.1.1Fireworks簡(jiǎn)

3、介-5在默認(rèn)的情況下，Dreamweaver的面板組停放在工作區(qū)的右側(cè)。我們可以取消面板組，以及疊放面板，排列面板順序等操作。在該面板組中可以完成許多高性能操作。如圖8.7所示該面板組中有“優(yōu)化”、“層”、“資源”、“幀和記錄”和“答案”等面板，其中“層”和“答案”面板是打開的。8.1.1Fireworks簡(jiǎn)介-6在窗口中間是畫布，它是對(duì)圖像進(jìn)行繪制、修改或編輯的地方。從圖8.8中可以發(fā)現(xiàn)它提供了四種預(yù)覽模式：原始、預(yù)覽、2幅和4幅。具體的使用可以在下面的實(shí)例中給予說明。8.1.2Fireworks中圖片的制作-1更改畫布單擊菜單欄上的“修改”，彈出其子菜單，然后移動(dòng)鼠

4、標(biāo)指針到畫布上，在彈出其子菜單后，單擊“畫布大小”命令。在對(duì)話框中輸入寬和高的值，單擊“確定”按鈕。8.1.2Fireworks中圖片的制作-2畫出紅色的矩形區(qū)域在工具面板的“矢量”區(qū)中單擊“矩形”工具，然后在工具面板的“顏色”區(qū)中單擊填充顏色塊，在彈出的調(diào)色板中選擇紅色。在畫布上拖動(dòng)鼠標(biāo)，畫出一個(gè)紅色的矩形區(qū)域。8.1.2Fireworks中圖片的制作-3輸入字母在工具面板的“矢量”區(qū)中單擊“文本”工具，然后在編輯區(qū)的紅色矩形塊中單擊鼠標(biāo)，出現(xiàn)一個(gè)有光標(biāo)閃動(dòng)的文本框。在文本框中輸入大寫的字母“JL”，然后拖動(dòng)鼠標(biāo)選中這兩個(gè)字母，接著在“屬性”面板中單擊“顏色”塊，在彈

5、出的調(diào)色板中選擇“黃色”。在屬性面板中單擊“字體”框，在下拉列表中選擇“Tahoma”字體，然后單擊字號(hào)框右邊的下拉按鈕，拖動(dòng)滑動(dòng)指針，設(shè)置字號(hào)為31，在編輯區(qū)域單擊鼠標(biāo)，文字變成設(shè)置的效果。8.1.2Fireworks中圖片的制作-4在工具面板的“選擇”區(qū)中單擊“選取”工具，然后在編輯區(qū)域中拖動(dòng)文本框到合適的位置，使兩個(gè)字母看起來更美觀。8.1.2Fireworks中圖片的制作-5輸入漢字重復(fù)上述操作，在紅色矩形塊的右邊輸入“杰力”兩個(gè)漢字，設(shè)置字體為“楷體”，字號(hào)為28。單擊菜單欄上的“文件”，在彈出的文件菜單中單擊“保存”命令。對(duì)文件進(jìn)行保存。8.1.2Firew

6、orks中圖片的制作-6導(dǎo)出圖片單擊菜單欄上的“文件”，在文件菜單中單擊“導(dǎo)出”命令。在對(duì)話框中輸入文件名，單擊“保存”按鈕。8.1.3Fireworks中圖片的優(yōu)化-1除了可以直接制作圖片以外，F(xiàn)ireworks還可以對(duì)已有的圖片進(jìn)行優(yōu)化，使圖片在不影響視覺效果的情況下，體積更小，更有利于網(wǎng)絡(luò)傳輸。8.1.3Fireworks中圖片的優(yōu)化-2打開圖片單擊菜單欄上的文件，打開“文件”菜單，在下拉菜單中單擊“打開”命令，在“打開”對(duì)話框中，單擊“查找范圍”框，在下拉列表中找到存放圖片文件的文件夾，然后選種要優(yōu)化的文件，最后單擊“打開”按鈕。8.1.3Fireworks中圖

7、片的優(yōu)化-3在窗口右邊的面板組中單擊“優(yōu)化”面板的“小三角”按鈕，將“優(yōu)化”面板展開。在“優(yōu)化”面板中單擊“設(shè)置”框，在下拉列表中選擇“GIF接近256”,將圖片優(yōu)化成GIF文件，圖片顏色為256色。優(yōu)化圖片8.1.3Fireworks中圖片的優(yōu)化-4單擊文件菜單，在下拉菜單中選擇“導(dǎo)出”命令，打開“導(dǎo)出”對(duì)話框。在“導(dǎo)出”對(duì)話框中輸入文件名，單擊“保存”命令。導(dǎo)出圖片打開保存文件的文件夾，可以發(fā)現(xiàn)優(yōu)化的效果是非常明顯的。8.1.4Fireworks與Dreamweaver整合應(yīng)用-1網(wǎng)站的制作過程一般可分為網(wǎng)頁(yè)組件制作準(zhǔn)備、網(wǎng)頁(yè)制作和網(wǎng)