網頁中圖形圖像的高級.ppt

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