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

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