資源描述：
《圖像與動畫的制作與優(yōu)化.ppt》由會員上傳分享，免費在線閱讀，更多相關內容在教育資源-天天文庫。
1、8.1圖像的制作與優(yōu)化Fireworks是集創(chuàng)建、編輯和優(yōu)化網頁圖形為一體的應用軟件，它不僅可以創(chuàng)建與編輯位圖和矢量圖，而且可以通過修剪和優(yōu)化圖形圖像來減小文件的大小。而在不影響圖形圖像質量的情況下，文件的體積越小，網頁的下載速度就越快。這也是Fireworks大受歡迎的原因之一。8.1.1Fireworks簡介-1Fireworks擁有與Dreamweaver相似的操作界面，同樣由編輯區(qū)域、屬性面板和浮動面板等組成。8.1.1Fireworks簡介-2單擊菜單欄上的“文件”，在下拉菜單中選擇“新建”命令，打開“新建文
2、檔”對話框，在“新建文檔”對話框中，可以通過更改寬度和高度的值，來更改畫布的大小，還可以對分辨率和畫布顏色進行修改。最后單擊“確定”。8.1.1Fireworks簡介-3窗口左邊的工具面板分為六個區(qū)域，分別有不同的功能。在該面板上集成了編輯圖像所需的各種工具，只需要在面板上選擇相應的工具就可以對矢量圖、位圖進行操作，這樣就省去了在位圖和矢量圖之間的切換操作。8.1.1Fireworks簡介-4和Dreamweaver的屬性面板一樣，F(xiàn)ireworks的屬性面板也是一個包含各種選項的動態(tài)面板。隨著操作內容的變化，屬性面板
3、上的內容也隨著發(fā)生相應的變化。如圖8.6所示是選中畫布時，屬性面板的樣子。8.1.1Fireworks簡介-5在默認的情況下，Dreamweaver的面板組停放在工作區(qū)的右側。我們可以取消面板組，以及疊放面板，排列面板順序等操作。在該面板組中可以完成許多高性能操作。如圖8.7所示該面板組中有“優(yōu)化”、“層”、“資源”、“幀和記錄”和“答案”等面板，其中“層”和“答案”面板是打開的。8.1.1Fireworks簡介-6在窗口中間是畫布，它是對圖像進行繪制、修改或編輯的地方。從圖8.8中可以發(fā)現(xiàn)它提供了四種預覽模式：原始、
4、預覽、2幅和4幅。具體的使用可以在下面的實例中給予說明。8.1.2Fireworks中圖片的制作-1更改畫布單擊菜單欄上的“修改”，彈出其子菜單，然后移動鼠標指針到畫布上，在彈出其子菜單后，單擊“畫布大小”命令。在對話框中輸入寬和高的值，單擊“確定”按鈕。8.1.2Fireworks中圖片的制作-2畫出紅色的矩形區(qū)域在工具面板的“矢量”區(qū)中單擊“矩形”工具，然后在工具面板的“顏色”區(qū)中單擊填充顏色塊，在彈出的調色板中選擇紅色。在畫布上拖動鼠標，畫出一個紅色的矩形區(qū)域。8.1.2Fireworks中圖片的制作-3輸入字母
5、在工具面板的“矢量”區(qū)中單擊“文本”工具，然后在編輯區(qū)的紅色矩形塊中單擊鼠標，出現(xiàn)一個有光標閃動的文本框。在文本框中輸入大寫的字母“JL”，然后拖動鼠標選中這兩個字母，接著在“屬性”面板中單擊“顏色”塊，在彈出的調色板中選擇“黃色”。在屬性面板中單擊“字體”框，在下拉列表中選擇“Tahoma”字體，然后單擊字號框右邊的下拉按鈕，拖動滑動指針，設置字號為31，在編輯區(qū)域單擊鼠標，文字變成設置的效果。8.1.2Fireworks中圖片的制作-4在工具面板的“選擇”區(qū)中單擊“選取”工具，然后在編輯區(qū)域中拖動文本框到合適的位置
6、，使兩個字母看起來更美觀。8.1.2Fireworks中圖片的制作-5輸入漢字重復上述操作，在紅色矩形塊的右邊輸入“杰力”兩個漢字，設置字體為“楷體”，字號為28。單擊菜單欄上的“文件”，在彈出的文件菜單中單擊“保存”命令。對文件進行保存。8.1.2Fireworks中圖片的制作-6導出圖片單擊菜單欄上的“文件”，在文件菜單中單擊“導出”命令。在對話框中輸入文件名，單擊“保存”按鈕。8.1.3Fireworks中圖片的優(yōu)化-1除了可以直接制作圖片以外，F(xiàn)ireworks還可以對已有的圖片進行優(yōu)化，使圖片在不影響視覺效果
7、的情況下，體積更小，更有利于網絡傳輸。8.1.3Fireworks中圖片的優(yōu)化-2打開圖片單擊菜單欄上的文件，打開“文件”菜單，在下拉菜單中單擊“打開”命令，在“打開”對話框中，單擊“查找范圍”框，在下拉列表中找到存放圖片文件的文件夾，然后選種要優(yōu)化的文件，最后單擊“打開”按鈕。8.1.3Fireworks中圖片的優(yōu)化-3在窗口右邊的面板組中單擊“優(yōu)化”面板的“小三角”按鈕，將“優(yōu)化”面板展開。在“優(yōu)化”面板中單擊“設置”框，在下拉列表中選擇“GIF接近256”,將圖片優(yōu)化成GIF文件，圖片顏色為256色。優(yōu)化圖片8.
8、1.3Fireworks中圖片的優(yōu)化-4單擊文件菜單，在下拉菜單中選擇“導出”命令，打開“導出”對話框。在“導出”對話框中輸入文件名，單擊“保存”命令。導出圖片打開保存文件的文件夾，可以發(fā)現(xiàn)優(yōu)化的效果是非常明顯的。8.1.4Fireworks與Dreamweaver整合應用-1網站的制作過程一般可分為網頁組件制作準備、網頁制作和網
