網(wǎng)頁中圖形圖像的高級.ppt

第14章網(wǎng)頁中圖形圖像的高級應(yīng)用 圖形和圖像都是圖片 圖形注重 形 是一個一個由線構(gòu)成的幾何圖形 也許是曲線又或者是直線做出的圖片 它屬于矢量圖 通常以 bmp擴(kuò)展名進(jìn)行命名 指由GPU運算生成的幾何圖形或幾何圖形集合 圖像可以是一幅畫 它注重 色彩 屬于位圖 通過以 jpeg tiff為擴(kuò)展名進(jìn)行命名 指已經(jīng)由軟硬件處理過的圖形 本章針對圖形圖像具體進(jìn)行有關(guān)內(nèi)容的探討 14 1矢量圖形 計算機(jī)中顯示的圖形可以分為位圖和矢量圖二類 矢量圖無論放大 縮小或旋轉(zhuǎn)等都不會失真 一般體積較小 正因為矢量圖的這些特點 越來越多的網(wǎng)站在制作網(wǎng)頁時選擇使用矢量圖作為頁面圖片 Adobe公司的Illustrator Corel公司的CorelDRAW是眾多矢量圖形設(shè)計軟件中的佼佼者 這一節(jié)通過矢量圖的制作過程 來介紹有關(guān)矢量工具 14 1 1認(rèn)識矢量圖形 因為矢量圖放大后 圖像效果不會失真 所以在Flash制作等一些要求高保真的場合 它被人們廣泛應(yīng)用著 同時 矢量圖還具有占用空間小的特點 同樣的條件下由于網(wǎng)頁制作的需求 人們更多地會選擇它 并且 此類圖形還不受分辨率的限制 矢量圖以幾何圖形居多 圖形可以無限放大 不變色 不模糊 常用于圖案 標(biāo)志 VI 文字等設(shè)計 常用軟件有 CorelDraw Illustrator Freehand XARA等 1 什么是矢量圖形矢量圖形又常被稱作面向?qū)ο髨D形或繪圖圖形 矢量文件中的圖形元素稱為對象 每個對象都是一個自成一體的實體 它具有顏色 形狀 輪廓 大小和屏幕位置等屬性 多次移動和改變它的屬性 并不會影響圖例中的其它對象 如圖所示 是一矢量圖形的應(yīng)用實例 2 分辨率與 我 何干在處理位圖時 我們知道需要重點考慮分辨率這一因素 但是矢量圖會告訴你 分辨率與 我 何干哦 操作位圖時 分辨率既會影響最后輸出的質(zhì)量也會影響文件的大小 但是 在矢量圖這里 分辨率是沒辦法影響它的 3 開放路徑對象和封閉路徑對象對象可以有一條封閉路徑或者一條開放路徑 開放路徑對象的兩個端點是不相交的 封閉路徑對象就是那種兩個端點相連構(gòu)成連續(xù)路徑的對象 開放路徑對象既可能是直線 也可能是曲線 封閉路徑對象包括圓 正方形 網(wǎng)格 自然筆線 多邊形和星形等 封閉路徑對象是可以填充的 而開放路徑對象則不能填充 14 1 2制作矢量圖形 在Flash動畫中 經(jīng)常通過矢量圖形來進(jìn)行相關(guān)應(yīng)的動態(tài)圖的效果的實現(xiàn) 在對矢量圖形有了初步認(rèn)識之后 接下來讓我們一起來學(xué)習(xí)有關(guān)繪制與填充 對于矢量圖形 經(jīng)常需要使用Fireworks軟件來制作 它的處理主要包括有以下內(nèi)容 1 矢量路徑這里提到的矢量路徑共有三類 分別是直線 曲線 自由路徑 有關(guān)它們的創(chuàng)建方法 下面進(jìn)行詳細(xì)講述 具體內(nèi)容包括 1 直線的創(chuàng)建方法 2 曲線的創(chuàng)建方法 3 自由路徑的創(chuàng)建方法 2 矢量形狀矢量形狀包括矩形 橢圓 多邊形 星形以及其它特定的幾何形狀 在Fireworks中主要提供有如圖所示的相應(yīng)關(guān)于形狀的功能 在下面的內(nèi)容中將詳細(xì)為大家介紹有關(guān)此方面的操作 創(chuàng)建方法 1 矩形的創(chuàng)建方法 2 橢圓形的創(chuàng)建方法 3 多邊形的創(chuàng)建方法 4 星形的創(chuàng)建方法 5 特定形狀的創(chuàng)建方法 3 自動形狀創(chuàng)建自動形狀的方法是 單擊 窗口 自動形狀 命令 在彈出的如圖1所示的 自動形狀 面板中進(jìn)行相應(yīng)圖形的拖動選擇 即可實現(xiàn) 如圖2所示 是應(yīng)用 自動形狀 面板實現(xiàn)的 可用于網(wǎng)頁制作的部分矢量圖形的效果圖 圖1圖2 4 使用筆觸筆觸可以應(yīng)用到矢量路徑 矢量圖形或文本上 通過設(shè)置筆觸屬性 可以使下一個繪制的矢量對象具有新的筆觸屬性 具體操作方法是 在畫布上選擇一個矢量圖形 鼠標(biāo)單擊 屬性 面板中筆觸的相應(yīng)選項進(jìn)行設(shè)置即可 如圖所示 是矩形矢量圖的相應(yīng)的筆觸的屬性 包括邊緣 紋理 圓度等 如圖所示 是一針對筆觸的相應(yīng)屬性效果應(yīng)用后的矢量圖 通過筆觸分別實現(xiàn)了實線 3D 彩色蠟筆 輪廓和熒光等下述效果 5 使用填充在Fireworks內(nèi)置了 種標(biāo)準(zhǔn)填充方式 單色填充 抖動填充 Web仿色填充 圖案填充和漸變填充 可以改變填充的各種屬性 包括顏色 邊緣 紋理和透明度 因為不同標(biāo)準(zhǔn)的填充方式略有區(qū)別 所以在屬性面板的設(shè)置操作時 除了基本操作外 還需要根據(jù)不同的方式進(jìn)行相應(yīng)的變動 下面針對這些進(jìn)行具體介紹 1 單色填充單色填充是使用單一顏色對矢量路徑 圖形或文本進(jìn)行填充 具體操作方法是 在 屬性 面板中 填充 的相應(yīng)選項中進(jìn)行設(shè)置即可 如圖所示 如圖所示 是應(yīng)用了單色填充的效果截圖 在網(wǎng)頁制作過程中 在矢量圖的制作與應(yīng)用時 可作為大家的參考 2 抖動填充Fireworks提供了Web仿色填充 即混合兩種Web可靠顏色來模擬一種非可靠的Web顏色 關(guān)于抖動填充的具體操作方法是 選擇要填充的對象 在填充面板的類別下拉列表中選擇 網(wǎng)頁抖動 設(shè)置顏色 如果想設(shè)置透明效果 可勾選 透明 復(fù)選框 如圖1所示 如圖2所示 是應(yīng)用了抖動填充的效果截圖 在網(wǎng)頁制作過程中 在矢量圖的制作與應(yīng)用時 可作為大家的參考 圖1圖2 3 漸變填充漸變填充是使用兩種或兩種以上的顏色按照一定的組合規(guī)律來填充對象 關(guān)于漸變填充的操作方法是 選擇要填充的對象 在填充面板的類別下拉列表中選擇填充的方案 在Fireworks中共為大家提供了如圖1所示的12種方案 這里選擇 波紋 的填充方案 單擊 填充顏色 按鈕 在彈出的 編輯漸變 窗口 進(jìn)行相應(yīng)的效果的實現(xiàn) 如圖2所示 圖1圖2 如圖所示 是應(yīng)用了漸變填充的效果截圖 在網(wǎng)頁制作過程中 在矢量圖的制作與應(yīng)用時 可作為大家的參考 4 圖案填充圖案填充是使用圖案位圖重復(fù)拼接來填充對象 關(guān)于圖案填充的操作方法是 選擇要填充對象 在填充面板的類別下拉列表中選擇 圖案填充 系統(tǒng)提供的圖案有限 可以通過 其它 這一選項 在彈出的 定位文件 對話框中 選擇想要添加的圖片作為填充的方案 如圖1所示 如圖2所示 是應(yīng)用了圖案填充的效果截圖 在網(wǎng)頁制作過程中 在矢量圖的制作與應(yīng)用時 可作為大家的參考 圖1圖2 14 1 3矢量工具應(yīng)用 矢量工具用于制作矢量圖 有此類作用的工具不止一種 如前面已經(jīng)提到的Fireworks軟件 貝塞爾工具 是所有繪圖類軟件中 最重要的工具之一 下面針對幾類常用的矢量工具軟件進(jìn)行講解 幫助大家掌握它們的功能以及相關(guān)內(nèi)容 1 Fireworks2 Photoshop3 CorelDRAW 1 繪制線段 2 封閉的對象效果 3 繪制曲線 14 1 4矢量圖與位圖 位圖圖形由排列成網(wǎng)格的稱為象素的點組成 圖像由網(wǎng)格中每個象素的位置和顏色值決定 編輯位圖圖形時 修改的是象素 位圖圖形與分辨率有關(guān) 放大位圖圖形會使圖像的邊緣呈鋸齒狀 下面為大家詳細(xì)介紹有關(guān)矢量圖與位圖的不同 1 位圖像素 分辨率2 矢量圖優(yōu) 缺點優(yōu)點 1 文件小 2 圖像元素對象可編輯 3 圖像放大或縮小不影響圖像的分辨率 4 圖像的分辨率不依賴于輸出設(shè)備 缺點 1 重畫圖像困難 2 逼真度低 要畫出自然度高的圖像需要很多的技巧 3 矢量圖與位圖的轉(zhuǎn)換在了解了矢量圖和位圖之后 接下來 具體為大家介紹相關(guān)的轉(zhuǎn)換方法 因為矢量圖形是使用數(shù)學(xué)方法 按照點 線 面的方式形成的 在縮放時不會產(chǎn)生失真效果 位圖圖像則是使用物理方法 按照點陣的方式繪制出來的 由像素的點陣組成的 圖像在縮放和旋轉(zhuǎn)變形時會產(chǎn)生失真現(xiàn)象 由此 為了應(yīng)用濾鏡功能和位圖的顏色遮罩功能 需要把矢量圖用CorelDRAW轉(zhuǎn)化為位圖 其方法如下 1 選擇 2 執(zhí)行操作 3 分辨率與顏色模式的選擇 14 2Fireworks圖形圖像處理 Fireworks是一款在網(wǎng)頁制作中 被廣泛用來處理圖形圖像的軟件 針對它在網(wǎng)頁頁面中的作用突出 在本節(jié)中 具體通過幾個實例的制作方法以及相應(yīng)的內(nèi)容 來幫助大家更好地掌握有關(guān)于本軟件的具體的內(nèi)容與操作應(yīng)用 14 2 1動態(tài)元件的制作與應(yīng)用 借助Fireworks 可以幫助實現(xiàn) 圖形 按鈕 和 動畫 三種元件的創(chuàng)建 這里實現(xiàn)的效果 都是通過把元件從文檔庫里面直接拖出來進(jìn)行的 這類元件統(tǒng)稱為靜態(tài)元件 那什么是動態(tài)元件 該如何制作它呢 下面來為大家揭曉 1 什么是動態(tài)元件若想要改變按鈕的文字 長 寬 以及鼠標(biāo)移動 按下等屬性 可以在 元件定義 面板進(jìn)行設(shè)置 因為該元件在庫里面只存在一個 所以稱其為動態(tài)元件 在如圖所示的截圖中 就是關(guān)于元件的效果圖 2 動態(tài)元件的制作與應(yīng)用在了解了動態(tài)元件之后 接下來為大家介紹有關(guān)它的制作與應(yīng)用的方法 關(guān)于這部分的內(nèi)容 這里通過一簡單的操作實例 來幫助我揭開它的 面罩 1 繪制圖形 2 編輯 3 保存 4 腳本 5 應(yīng)用 14 2 2制作水波gif動畫 在很多的動圖中 都應(yīng)用了動態(tài)如水波的效果 那么要怎么才能實現(xiàn)它呢 在接下來的內(nèi)容中 將一一來為大家進(jìn)行解答 如圖所示 是一用Fireworks制作的水波動畫 這里通過此實例圖的制作與實現(xiàn)方法的介紹 來講述有關(guān)水波動畫的相關(guān)內(nèi)容 1 導(dǎo)入圖片2 編輯3 色彩模式調(diào)整4 幀的設(shè)置 14 3Photoshop圖形圖像處理 Photoshop的圖形圖像處理的強(qiáng)大功能 相信大家都有所耳聞 在這一節(jié)中 具體針對它的相關(guān)圖形圖像制作 編輯等操作內(nèi)容 進(jìn)行一系列的介紹 主要通過幾個應(yīng)用實例 在今后的網(wǎng)頁制作圖形圖像處理時能有所幫助的內(nèi)容 來執(zhí)行詳細(xì)敘述 14 3 1使用畫筆 筆尖形狀 在Photoshop中 畫筆是使用最多的功能之一 筆尖形狀正是其中的一項 畫筆筆尖形狀 項目的設(shè)置與應(yīng)用技巧 通過設(shè)置此項目 可以設(shè)置畫筆筆尖的樣式 直徑 硬度 還可以設(shè)置畫筆的翻轉(zhuǎn) 角度 圓度和間距等 馬上就為大家來介紹其功能 關(guān)于畫筆的相關(guān)屬性設(shè)置 可以在 畫筆 調(diào)板中實現(xiàn) 在打開后 關(guān)于 畫筆筆尖形狀 大小 角度 圓度 硬度 間距 和 畫筆 都可以在此面板中執(zhí)行相應(yīng)的選項 具體內(nèi)容如圖所示 1 設(shè)置2 繪制 14 3 2投影和內(nèi)陰影 為圖層后面添加陰影 就是Photoshop中經(jīng)常使用的投影效果的實現(xiàn)方法之一 在圖片的技術(shù)處理時 投影和內(nèi)陰影是較普遍的效果 在此段內(nèi)容中 將要講解的就是關(guān)于此類操作的相關(guān)的應(yīng)用 具體內(nèi)容如下 1 投影2 內(nèi)陰影 14 3 3蒙版工作原理 在Photoshop中 蒙版就像是特定的遮罩 控制著圖層或圖層組中的不同區(qū)域如何隱藏和顯示 簡單的說 蒙版就是控制照片不同區(qū)域曝光的傳統(tǒng)暗房技術(shù) 蒙版有快速蒙版 圖層蒙版 矢量蒙版 以及剪貼蒙版之分 下面 從蒙版的工作原理 蒙版的類型 蒙版的使用方法與技巧等內(nèi)容為出發(fā)點 介紹蒙版的工作原理 詳細(xì)介紹四類蒙版的操作 1 快速蒙版2 圖層蒙版3 矢量蒙版4 剪貼蒙版 14 4標(biāo)尺 參考線和網(wǎng)格 標(biāo)尺 參考線和網(wǎng)格是Photoshop軟件系統(tǒng)中的輔助工具 他們可以幫助我們在繪制和移動相關(guān)內(nèi)容的過程中 更精確地對該制作和移動內(nèi)容進(jìn)行定位與對齊 如果合理地 有效地使用標(biāo)尺 參考線和網(wǎng)格 將大大提高網(wǎng)頁的檔次 下面 將分別對標(biāo)尺 參考線和網(wǎng)格的相關(guān)內(nèi)容進(jìn)行具體介紹 14 4 1標(biāo)尺 photoshop中標(biāo)尺的主要作用就是度量當(dāng)前圖像的尺寸 同時對圖像進(jìn)行輔助定位 使圖像的編輯更加準(zhǔn)確 操作時執(zhí)行菜單中的 視圖 標(biāo)尺 命令 即可在當(dāng)前文件的頁面中顯示標(biāo)尺 如圖所示1所示 如果要將文件中的標(biāo)尺隱藏 可再次執(zhí)行菜單中的 視圖 標(biāo)尺 命令即可 圖2是沒有顯示標(biāo)尺的Photoshop的編輯界面 對于標(biāo)尺應(yīng)用于否的界面的應(yīng)用的便捷于否相應(yīng)大家已經(jīng)一目了然 圖1圖2 在進(jìn)行了標(biāo)尺的顯示與隱藏方法的介紹 大家還需要掌握它的設(shè)置方法 當(dāng)標(biāo)尺的刻度合理與否 將直接影響到界面中圖像的設(shè)計 其具體操作方法是 單擊 編輯 首選項 單位與標(biāo)尺 命令 在彈出的 首選項 對話框 單位與標(biāo)尺 選項下的 單位 與 列尺寸 的文本框與下拉列表框中 即可進(jìn)行相應(yīng)的參數(shù)值設(shè)置 如圖所示 標(biāo)尺的單位 參考線的顏色 樣式都是可以設(shè)置的 14 4 2參考線 參考線是浮在整個圖像窗口中但不被打印的直線 用戶可移動 刪除或鎖定參考線 它的具體實現(xiàn)方法是 當(dāng)執(zhí)行 視圖 新參考線 時 在彈出的對話框中設(shè)置各選項參數(shù) 可以精確的在當(dāng)前文件中新建參考線 如圖所示 參考線有二種方式 一種是水平取向 另一種是垂直取向 14 4 3網(wǎng)格 網(wǎng)格在默認(rèn)情況下顯示為非打印的直線 也可顯示為網(wǎng)點 網(wǎng)格是由顯示在文件中的一系列相互交叉的直線所構(gòu)成 執(zhí)行菜單中的 視圖 顯示 網(wǎng)格 命令 即可在當(dāng)前打開的文件的頁面中顯示網(wǎng)格 如圖所示 如果想將文件中的網(wǎng)格隱去 可再次執(zhí)行菜單中的 視圖 顯示 網(wǎng)格 命令即可實現(xiàn) 14 5PhotoshopCS5新增功能 Photoshop從最初始版本 到今天的CS5 乃至今后的更高版本的出現(xiàn) 該軟件在進(jìn)行版本的更換時 都會加入不同的功能 這里針對CS5新增的一些功能 借助一系列簡單的實例操作 來幫助大家更進(jìn)一步了解它 同時 進(jìn)一步學(xué)習(xí)Photoshop的操作技巧 14 5 1 MiniBridge中瀏覽 命令 借助更靈活的分批重命名功能輕松管理媒體 使用PhotoshopCS5中的 MiniBridge中瀏覽 命令 可以方便的在工作環(huán)境中訪問資源 具體操作方法是 單擊 文件 在MiniBridge中瀏覽 命令 在打開的MiniBridge面板中 根據(jù)相應(yīng)的按鈕功能 即可應(yīng)用這些新的增加的功能 如圖所示 14 5 2 選擇性粘貼 命令 使用 選擇性粘貼 中的 原位粘貼 貼入 和 外部粘貼 命令 可以根據(jù)需要在復(fù)制圖像的原位置粘貼圖像 或者有所選擇的粘貼復(fù)制圖像的某一部分 合理使用此方法 可以幫助我們在實際制作過程中 減省時間 以提高操作效率 14 5 3 操控變形 命令 使用新增的 操控變形 命令 可以在一張圖像上建立網(wǎng)格 然后使用 圖釘 固定特定的位置后 拖動需要變形的部位 例如 輕松伸直一個彎曲角度不舒服的手臂 其具體操作方法如下 打開需要編輯的圖像 單擊 編輯 操控變形 命令 這時在圖像上出現(xiàn)網(wǎng)格 然后通過調(diào)整網(wǎng)格上的點就可進(jìn)行相應(yīng)的變形了 如圖是原圖進(jìn)行了命令后出現(xiàn)的網(wǎng)格效果圖 14 5 4 合并到HDRPro 命令 使用 合并到HDRPro 命令 可以創(chuàng)建寫實的或超現(xiàn)實的 HDR 圖像 借助自動消除疊影以及