圖像處理技巧技術在網頁設計中的應用研究

摘 要：伴隨著網絡技術的不斷前進和發展，網站已經成為大家溝通、交流的重要平臺。而想要將網頁設計的更加優秀、更美觀，網頁設計就越來越受重視。本文主要對網頁設計和計算機圖像處理技術所涉及到的相關知識進行介紹，最后對常用的圖像處理技巧記性應用技巧的討論和解析，以此幫助讀者能將網頁設計的更加完美。

關鍵詞：網頁設計；計算機圖像處理技術；Photoshop

中圖分類號：TP391.41 文獻標識碼：A 文章編號：1674-7712 （2013） 14-0000-01

一、網頁設計中的圖像

當前的時代是網絡不斷快速發展的時代，通過網絡來溝通、交流越來越多，也使得網頁設計成為了一門十分有必要，也十分熱門的行業。網頁設計技術市場前景廣闊，其以基礎的編程技術為根基，最終的目的就是把網頁設計的具有藝術美感，從而吸引廣大的瀏覽者，提高網頁的感染力。其中的關鍵就在于網頁設計中的圖像處理的如何，只有將文字以及圖像效果統一的結合起來，才能達到最佳的網頁設計效果，最終實現吸引瀏覽者的目的。伴隨網絡使用度不斷提升，人們對網頁的要求也不斷增加，這就成為了我們不斷改進網頁設計技術的內在動力。在計算機中應用的圖像按圖像格式可以分為很多類，下面對網頁設計中常用的三種圖片種類進行介紹。

GIF：第一種要介紹的就是簡稱為GIF的圖像交換格式，英文全稱為GraphicsInterchangeFormat。這種格式的有點就是可以對圖像進行無損壓縮處理，圖像顏色上限大，最多可達256種顏色。另外此種格式有四種優點，即透明處理、支持動態畫面、支持交互處理、適用范圍很廣。在動漫卡通、美術素描等圖像方面均可應用，在互聯網圖像應用中是最合適的格式種類。這

JPEG圖片格式：中文名為聯合靜態圖形專家組，英文全稱為JointPhotographicExpertsGroup。此種圖片格式相對GIF格式為有損壓縮算法，但同樣因為有損壓縮，也使得JPEG的圖像壓縮比很高，能有效的減小數據量從而節省硬盤空間。而且針對普通的網絡用戶，這種有損壓縮是不影響使用的。JPEG圖片格式不具備透明效果的性能，也不能在動態圖像中應用。較多的運用在圖像處理中，很少在圖像數據傳輸中使用。這種格式的圖像效果，一般在Photoshop軟件中制作。

PNG格式：翻譯成中文為，可以之網絡圖形；英文全稱為PortableNetworkGraphics。這種圖像格式是隨著網頁設計技術的發展而出現的全新格式。因此PNG同樣也具備了前兩者的優點，同時也具備了新的性能優點。如真彩色最多可達一千萬種，最少也能實現普通256色彩的圖像；具備可壓縮算法；可以在圖像數據傳輸中應用。可以預見的是，因PNG格式的諸多優點，隨著網絡技術的發展以及PNG應用的廣泛，PNG格式也會成為主流的圖像格式。種格式的圖像效果，一般在Fireworks軟件中制作，是Fireworks的默認文件格式。

二、Photoshop在網頁圖像處理中實用技巧

圖像處理有很多工具以及技術，但Photoshop是到目前為止，功能最全、應用最廣泛的圖像處理工具，因此筆者在下面的文章中舉例介紹Photoshop在網頁設計中的一些實用技巧。

（一）圖像截取和尺寸大小的調整

在對網頁進行設計時，一張圖像往往并不使用其全部，這就涉及到了圖像的局部截取。圖像局部截取的方法多種多樣、不拘一格，相對來說photoshop的使用更為快捷。（1）使用Photoshop打開目標圖像。（2）因為所需求的局部圖片大小和形狀不同，Photoshop中工具欄有相應的截圖工具，如方形、星形、圓形等。在圖像上截取完成后，可以在“樣式”中輸入截圖的尺寸大小，設定圖像長度，寬度等值。（3）在設定好選區的大小尺寸和形狀之后，可以移動選區框去選擇截取的合適部位。然后使用Ctrl+c復制截取的局部圖像。（4）按Ctrl+N鍵新建畫布，所新建的畫圖的大小和形狀都是與所復制的局部圖像相符合的。然后按Ctrl+V粘貼圖像。最后保存即可完成局部圖像的截取以及圖像尺寸和形狀的調整。

（二）圖像融合處理

在網頁設計時往往需要將多張圖片進行合成，增加空間利用率，或者增強圖片效果，這常在制作網頁背景圖像時用到。其融合步驟如下：（1）選擇兩張高度相同的圖像，在Photoshop中先打開一種圖像，用工具欄中的移動工具將另外一張圖像拖進Photoshop中，并選擇適當的位置擺放。（2）對兩張圖像的色相、亮度、色彩飽和度等進行相應的調整，為后面的融合做準備以期有較好的融合效果。（3）選擇拖進圖像的圖層，建立一個蒙版，然后通過漸變工具將兩張圖像的結合處變成黑白漸變的效果，最后再適當的調整不透明度，達到較好的融合效果。

（三）添加陰影和倒影

通過添加倒影可以使圖像具有立體效果，倒影添加步驟如下：（1）將圖片在Photoshop中將倒影效果素材打開，并按Ctrl+J復制素材所在圖層。（2）在“編輯”一欄中選擇“變換”然后選擇“垂直翻轉”，單擊按鈕，將需翻轉的圖層添加到初始圖片所在圖層的下邊。（3）在需要翻轉的圖層中加圖層蒙版，在蒙版上使用漸變功能，這樣就能使圖像添加倒影效果。

（四）網站LOGO的制作

每個網站因其誕生總是有一定的目的和定位，是每個網站的門面和標志，因此十分的重要。好的LOGO需要能體現出網站的內涵，并且能傳遞出網站的理念等信息。LOGO的制作同樣的重要，運用Photoshop同樣可以對網站LOGO進行繪制，制作步驟如下：（1）首先在新建的畫布上用畫筆工具大體勾畫出輪廓范圍。（2）用“轉換點工具”把勾畫出的輪廓路徑中的直線部分進行弧度的調整，把直線變為有一定弧度的曲線。（3）點擊“直接選擇工具”，調整某些錨點的位置，調整曲線弧度。（4）按Ctrl+Enter鍵，對選區進行填充。

（五）藝術字體等的制作

圖像處理技術不僅僅包括了對圖像的處理和應用，也包括了文字的創作。在Photoshop中可以通過圖層、通道、路徑等制作一些特殊文字等效果。步驟如下：（1）先輸入相應的文字，選擇合適的字體。（2）將文字轉換成路徑，并對文字的輪廓進行修改，完成后將新字形重新轉換為選區。（3）在新的圖層中，對選區填充顏色，運用圖層樣式，對文字的外觀進行設置，可以做出水晶字、毛刺字、玻璃字等。（4）如果要制作鏤空字或透明字效果，還需把修改了外形文字在通道中進行調整，再回到圖層中進行顏色或樣式的加工。

六、結束語

隨著社會的不斷發展，網絡應用不斷增多，如今互聯網已經是一個完整、系統、復雜的一個應用系統。而網頁是其中的一個基本元素，如何把網絡的網頁設計的更加完美、富有藝術感，關系到很多的方面。這需要我們不僅僅從圖像的色調、圖像選擇等方面出發考慮，而且也要求我們熟練掌握圖形處理的工具，如Photoshop等工具。網頁設計的質量好壞，直接受到圖片處理技術的影響

參考文獻：

[1]朱明秀.淺析Photoshop在網頁設計中的技巧及應用[J].大眾科技，2009（10）：32-33.

[2]李淑曉，雷鳴.巧用圖像處理軟件設計網頁[J].電腦與電信，2006（9）：82-84.

[3]劉顯麗.淺談圖像處理技術在網頁制作中的應用[J].遼寧師專學報，2008（3）：35.

[4]劉麗君.淺談PhotoshoD在網頁制作中的應用[J].科技廣場，2007（7）：131-132.

[5]徐國平.網頁設計與制作教程[M].北京：高等教育出版社，2008（06）.

[6]李丹.淺談多媒體技術發展及在網站設計中的應用[J].吉林省經濟管理干部學院學報，2009（04）.

[作者簡介]夏蕾，女，湖北武漢人，管理學碩士學位，講師。現工作于武漢商學院，任武漢商學院信息工程系，計算機多媒體技術教研室主任。