模塊三網(wǎng)頁圖形圖像處理

1、模塊三 網(wǎng)頁圖形圖像處理任務(wù)五 GIF動畫制作任務(wù)二 文字效果制作任務(wù)三 LOGO設(shè)計任務(wù)四 新聞圖片處理任務(wù)六 網(wǎng)頁圖片與切片任務(wù)一 繪制基本圖形Fireworks簡介圖形圖像處理常用工具：Photoshop和Fireworks圖片格式：bmp、jpg、gif等。Bmp：Windows 位圖，占用的空間大。Jpg：最常用的圖像文件格式，文件體積較小，適合網(wǎng)絡(luò)傳播；有損耗壓縮，圖片質(zhì)量下降。照片常見格式。GIF：色彩不豐富、質(zhì)量較差；可制作簡單動畫、透明背景圖。不適合做大圖。網(wǎng)頁中的圖像單張不要超過30KB，整頁不要超過60KB，若不得不使用大的圖片，可將其切割再使用。正確選擇圖片格式，網(wǎng)上常

2、用的圖片格式是GIF、JPEG或PNG，分辨率一般是72像素/英寸。不要使用不常用的字體，若需要可考慮制作為圖片。Fireworks功能創(chuàng)建和編輯網(wǎng)頁圖形及圖象（包括矢量圖與位圖） 制作GIF動畫 制作網(wǎng)頁效果（如按鈕、導(dǎo)航條和彈出菜單） 修剪和優(yōu)化圖形以減小其文件大小 導(dǎo)出用于網(wǎng)頁的圖片 直接導(dǎo)出網(wǎng)頁（包含 HTML 表格、圖片以及 JavaScript 代碼）該網(wǎng)頁可直接使用，也可在網(wǎng)頁編輯器中編輯后使用可以創(chuàng)建編輯圖像：在矢量圖模式或位圖模式下繪制圖像； 打開或?qū)雸D像進(jìn)行編輯處理?？梢詣?chuàng)建網(wǎng)頁對象：制作按鈕；制作切片網(wǎng)頁對象，切片工具可以把一幅完整的圖像切割成不同的切片對象，并可在這些

3、切片對象上添加動作或URL鏈接，熱區(qū)工具在一幅圖像的整體或部分定義URL鏈接響應(yīng)區(qū)域，添加交互功能?？梢詢?yōu)化圖像：對圖像進(jìn)行優(yōu)化處理，以減小文件大小，改變圖像品質(zhì)。輸出文件：按照一定格式（一般為gif與jpg格式）輸出圖像，這些輸出的圖像可以直接被應(yīng)用于網(wǎng)頁。 直接導(dǎo)出網(wǎng)頁，即html文件與圖像，網(wǎng)頁可使用DW編輯修改也可直接使用。任務(wù)一 繪制基本圖形利用工具箱上繪圖工具繪制一些基本圖形。矢量圖形：矢量圖形為矢量的線條和曲線（包括顏色和位置信息）描述圖像。編輯矢量圖形時，修改的是描述其形狀的線條和曲線的屬性。矢量圖形與分辨率無關(guān)，因此在對圖形進(jìn)行移動、調(diào)整大小、更改形狀或更改顏色等操作時，不會

4、改變其外觀品質(zhì)。 位圖圖形：由稱為象素的點(diǎn)組成。圖像由每個象素的位置和顏色值決定。編輯位圖圖形時，修改的是象素，位圖圖形與分辨率有關(guān)，放大位圖圖形會使圖像的邊緣呈鋸齒狀。矢量路徑的繪制主要包括：直線、曲線、自由路徑。繪制直線用鋼筆工具創(chuàng)建路徑繪制自由變形矢量路徑繪制矢量形狀：使用形狀工具可以繪制矩形、橢圓、多邊形、星形以及其它特定的幾何形狀。任務(wù)二 常見文字效果文字描邊文字陰影文字倒影文字路徑文字描邊在網(wǎng)頁美工和網(wǎng)店圖片處理中，文字描邊是常見的文字效果。選中文字，在屬性面板/濾鏡選項中，進(jìn)行如圖所示操作。 文字陰影選中文字，在屬性面板/濾鏡選項中，進(jìn)行如圖所示操作。 文字倒影制作步驟：選中文字

5、/復(fù)制/粘貼/選中粘貼產(chǎn)生的文字下移到適當(dāng)位置/修改菜單，變形，垂直翻轉(zhuǎn)，如圖1所示/命令菜單，創(chuàng)意，圖像漸隱，選擇由上到下的漸隱效果，如圖2所示/在屬性面板中，調(diào)整不透明度，如圖所示。文字路徑創(chuàng)建不規(guī)則路徑并將文字附著到路徑，形成文字路徑。文字附著到路徑：例，繪制一個橢圓，使用切刀工具將其分成兩半，刪除下半部分；將文字與半圓選中后，選擇文字附加到路徑。任務(wù)三 LOGO設(shè)計任務(wù)四 GIF動畫文字內(nèi)部光影：輸入文本選擇文本，文本/轉(zhuǎn)換為路徑復(fù)制，粘貼文本層面板/新建層/新建2，并勾選共享交疊幀層2拖到層1下面，并且把最上面的文本拖到層2中工具箱面板/矩形工具/生成白底，有羽化效果的矩形塊窗口菜單/打開幀面板/重制幀/設(shè)置：數(shù)量1，在當(dāng)前幀之后選擇幀2/選擇矩形塊/移動到文本開頭/剪切矩形塊/選中層1/編輯菜單/粘貼于內(nèi)部取消層1生成的鎖定小圖標(biāo)反復(fù)重復(fù)第7、8步驟，每次將矩形塊向文本右邊不斷移動位置優(yōu)化面板/GIF動畫/導(dǎo)出作品任務(wù)六 網(wǎng)頁圖片與切片使用切片可將大型圖片分割成多個較小的部分并將每部分導(dǎo)出為單獨(dú)的文件。導(dǎo)出時，將創(chuàng)建一個包含表格代碼的 HTML 文件，以便在瀏覽器中重新裝配圖形。采用此方法可以將圖片文檔直接輸出為html網(wǎng)頁。設(shè)計網(wǎng)頁圖片創(chuàng)建切片：選擇切片工具，在圖片上拖拽一塊塊區(qū)域，形成多個切片。設(shè)置導(dǎo)出后的圖像切