網(wǎng)頁設(shè)計(jì)中圖形圖像處理技巧

◎余 晶

在信息科技化發(fā)展的今天，每個(gè)行業(yè)都離不開網(wǎng)站建設(shè)和網(wǎng)頁設(shè)計(jì)，網(wǎng)頁設(shè)計(jì)的好壞決定著人們使用的愉悅性和滿意度，最終決定著網(wǎng)頁的商業(yè)目標(biāo)。計(jì)算機(jī)圖形圖像處理技巧的應(yīng)用，可以提高網(wǎng)頁設(shè)計(jì)的自身效果，是市場(chǎng)需求的必然選擇。因此，掌握設(shè)計(jì)中圖形圖像的處理技巧是每個(gè)網(wǎng)頁設(shè)計(jì)師必備的基本功。

一、圖形和圖像在網(wǎng)頁設(shè)計(jì)中應(yīng)用的意義

與傳統(tǒng)傳媒技術(shù)不同的是，網(wǎng)頁設(shè)計(jì)的元素多樣化，可通過文本、圖形、圖像、聲音、視頻等多種媒體表現(xiàn)形式，對(duì)不同的元素進(jìn)行剪輯，產(chǎn)生不一樣的效果。而在網(wǎng)頁設(shè)計(jì)中，圖像圖形處理是最為常見的一種處理技術(shù)，通過把圖形圖像和文字相結(jié)合的辦法，能夠有效的傳遞網(wǎng)頁信息，使網(wǎng)頁表現(xiàn)形式更加直觀。一般圖像質(zhì)量處理良好的網(wǎng)頁，或是圖像和文字共同編輯的網(wǎng)站，更會(huì)成為人們?yōu)g覽時(shí)的首選，也更能吸引人們的注意力，瀏覽的時(shí)間也會(huì)越長(zhǎng)，有利于把網(wǎng)頁的主題和信息傳達(dá)給網(wǎng)頁瀏覽者，這就很好的體現(xiàn)出圖形圖像在網(wǎng)頁設(shè)計(jì)中的意義。

二、圖形圖像的分類

不同的文件格式?jīng)Q定著圖像不同的展示效果以及下載方式，理想的文件格式可以使圖像在不同的設(shè)備上都能良好的呈現(xiàn)，最大化發(fā)揮圖像的效用，提升用戶體驗(yàn)的舒適度。在網(wǎng)頁設(shè)計(jì)中，圖片的常見格式有：JPEG（JPG）、BMP、GIF、PSD、PCX、PNG等格式，下面為大家介紹三種最常用的圖片格式。

JPEG圖片以 24位顏色存儲(chǔ)單個(gè)位圖，是第一個(gè)國(guó)際圖像壓縮標(biāo)準(zhǔn)，是應(yīng)用最廣泛的靜態(tài)圖片格式之一，這種圖片是經(jīng)過壓縮而來，文件小，便于傳輸，同時(shí)也在很大程度上滿足了人們對(duì)圖片色彩和分辨率的要求，是最適在網(wǎng)頁上的攝影圖片和數(shù)字照相機(jī)中使用的靜態(tài)圖片格式，它不支持透明背景圖像，更加適合顏色復(fù)雜的圖像。使用JPEG格式壓縮的圖片文件一般也被稱為JPEG Files，最普遍被使用的擴(kuò)展名格式為.jpg，其他常用的擴(kuò)展名還包括.jpeg、.jpe、.jfif以及.jif。

GIF（Graphics Interchange Format）的原義是“圖像互換格式”，其“體積”很小，分為靜態(tài)GIF和動(dòng)畫GIF兩種，且支持透明色，可以使圖像浮現(xiàn)在背景之上。GIF是網(wǎng)絡(luò)中最早應(yīng)用圖片格式，通過一個(gè)LZW的算法把圖像進(jìn)行無損壓縮，有效減少了文件大小，目前幾乎所有相關(guān)軟件都支持此格式。另外，互聯(lián)網(wǎng)上很多動(dòng)態(tài)圖片的格式也是GIF格式，它通過把多幅圖像保存在一個(gè)圖像文件中，形成動(dòng)畫。GIF文件的眾多特點(diǎn)適應(yīng)了互聯(lián)網(wǎng)的需要，于是它成了互聯(lián)網(wǎng)上最流行的圖像格式，它的出現(xiàn)為互聯(lián)網(wǎng)注入了一股新鮮的活力。GIF動(dòng)態(tài)圖像的制作也與其它圖片文件不太相同。首先，我們要在圖像處理軟件中作好GIF動(dòng)畫中的每一幅單幀畫面，然后再用專門制作GIF文件的軟件把這些靜止的畫面連接在一起，再設(shè)定幀與幀之間的時(shí)間間隔、循環(huán)頻率等條件，最后保存成GIF動(dòng)畫格式。制作GIF文件的軟件也較多，比較常見的有Animagic GIF、GIF Construction Set、GIF Movie Gear、Ulead Gif Animator等。

PNG是GIF和JPEG的結(jié)合體。這是因?yàn)樗O(shè)計(jì)之初的目的就是試圖取代GIF和JPEG格式，增加一些這兩種文件格式所不具備的特性。一方面，與GIF格式相比，雖然gif支持透明背景顏色，但它只有1和0兩種透明信息，只有透明和不透明之分，而PNG支持α頻段0到255的透明信息，可以使圖像的透明區(qū)域?qū)哟畏置?，同時(shí)還能讓彩色圖像和背景圖片的邊緣呈現(xiàn)完美平滑的融合。另一方面，與JPEG相比，由于PNG使用特殊的編碼方法標(biāo)記重復(fù)出現(xiàn)的數(shù)據(jù)，它可以實(shí)現(xiàn)圖像高壓縮比，便于網(wǎng)絡(luò)傳輸，與此同時(shí)保留與圖像有關(guān)的所有細(xì)節(jié)，不降低圖像質(zhì)量，這也是PNG最大的特點(diǎn)所在。PNG適合需要重新編輯、顏色復(fù)雜或需要透明度的圖像，但它并不能普遍兼容每個(gè)應(yīng)用程序和平臺(tái)。

三、保證網(wǎng)頁設(shè)計(jì)風(fēng)格要與圖形圖像相協(xié)調(diào)

目前，在網(wǎng)絡(luò)上圖片的主要變現(xiàn)形式有退邊圖、四方圖和邊緣模糊圖，每種形式都具有自己的特點(diǎn)，合理的運(yùn)用就會(huì)產(chǎn)生不同的視覺效果。所以，就需要在網(wǎng)頁設(shè)計(jì)中對(duì)圖形進(jìn)行合理的分配，分清哪些是重要的，哪些是次要的，要盡可能的凸顯出主要圖形的作用，讓網(wǎng)頁設(shè)計(jì)的圖像表現(xiàn)的更加直觀，從而讓網(wǎng)頁的整體設(shè)計(jì)效果得到提高。

四、合理優(yōu)化圖片格式，適合網(wǎng)絡(luò)傳輸

由于網(wǎng)頁設(shè)計(jì)中頁面中的圖像和文字都有一定的規(guī)范空間，為了不影響網(wǎng)頁顯示，就要盡量控制圖像在頁面中占有的空間，降低網(wǎng)頁中圖像顯示的時(shí)間，提高網(wǎng)頁信息傳輸?shù)馁|(zhì)量。一般網(wǎng)頁設(shè)計(jì)人員都會(huì)頁面中的文字?jǐn)?shù)量、圖像大小、圖像質(zhì)量進(jìn)行平衡分配，保證頁面的傳輸效果和傳輸速度。具體方式主要由以下幾點(diǎn)：

（一）合理利用圖片格式

在網(wǎng)頁設(shè)計(jì)中，一般的圖片使用GIF和JPEG的差別不是很大，只是GIF格式的使用體積要比JPEG小的多，所以多數(shù)采用GIF格式。但是如果圖片的像素要求達(dá)到640*480以上的大圖片，則應(yīng)該考慮使用JPEG格式的圖片。

（二）對(duì)圖片進(jìn)行有效分割

在我們平時(shí)上網(wǎng)下載圖片的時(shí)候，會(huì)經(jīng)常發(fā)現(xiàn)這些圖片的文件夾中會(huì)存在很多比較小的圖片，而這些小圖片可以組成一幅完整的圖形，所以在設(shè)計(jì)過程中，就會(huì)經(jīng)常使用到圖片分割的方法來對(duì)圖片進(jìn)行處理，將圖片中要體現(xiàn)的重要部分分割出來，在對(duì)其余的區(qū)域進(jìn)行適合的背景處理，從而在本質(zhì)上減少了圖片大小，方便瀏覽和下載。

（三）靈活運(yùn)用圖片處理軟件

在網(wǎng)頁設(shè)計(jì)中如果需要加入高清圖片或者彩色圖片時(shí)，要靈活的運(yùn)用圖片處理軟件對(duì)其進(jìn)行預(yù)先剪裁處理，通常使用的是photoshop軟件和fireworks軟件，并且圖片剪裁后要符合瀏覽器的支持要求。這里可以考慮PNG格式圖片，雖然不支持動(dòng)畫，但是可以保證圖片更加豐富多彩，但是PNG格式圖片一般都比較大；而對(duì)于企業(yè)用于宣傳的產(chǎn)品動(dòng)畫圖片，則可以實(shí)用GIF圖片，可以很好的保留通道和幀圖像，有利于反復(fù)播放。

（四）動(dòng)畫圖片

動(dòng)畫圖片的首選格式便是GIF，當(dāng)然也可以使用flash或javascript特效動(dòng)畫，雖然動(dòng)畫效果要比GIF優(yōu)越，但是占有空間太大，所以就要合理優(yōu)化和平衡網(wǎng)頁的制作設(shè)計(jì)。

（五）增加圖片鏈接方式

在網(wǎng)頁設(shè)計(jì)過程中，有時(shí)候會(huì)要求設(shè)計(jì)者在頁面中必須添加高清甚至超清的大圖片，這個(gè)時(shí)候就需要采取間接的方式，先去掉不使用的圖片文件，通過小圖片鏈接瀏覽大圖片需要另置文件夾，從而實(shí)現(xiàn)了網(wǎng)頁加速瀏覽高清圖片。

五、結(jié)語

綜上所述，隨著網(wǎng)絡(luò)媒體技術(shù)發(fā)展的不斷加快，要想把重要的信息傳遞給瀏覽者，就需要提高網(wǎng)頁設(shè)計(jì)的質(zhì)量和藝術(shù)感，要增強(qiáng)對(duì)瀏覽者的視覺沖擊，從而有效的吸引更多的人來瀏覽網(wǎng)頁，有利于信息傳達(dá)。所以，運(yùn)用科學(xué)合理的方法對(duì)網(wǎng)頁中的圖形圖像處理是非常重要的，既起到承載信息的作用，又能為瀏覽者提供一個(gè)色彩鮮明、內(nèi)容豐富的網(wǎng)頁。