網(wǎng)頁(yè)設(shè)計(jì)中的圖像處理方法探析

趙書恒

摘要：網(wǎng)頁(yè)設(shè)計(jì)是網(wǎng)絡(luò)化信息資訊平臺(tái)的重要載體，而圖像處理是實(shí)現(xiàn)網(wǎng)頁(yè)美化效果，增強(qiáng)網(wǎng)站服務(wù)質(zhì)量的主要手段。比如菜單欄、LOGO、內(nèi)容欄、導(dǎo)航條等組件在圖像處理后，其色彩、亮度、色彩平衡等方面將為瀏覽者提供統(tǒng)一、和諧、舒適的視覺環(huán)境。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì) 圖像處理 方法應(yīng)用

網(wǎng)頁(yè)設(shè)計(jì)是對(duì)計(jì)算機(jī)與網(wǎng)絡(luò)技術(shù)綜合應(yīng)用的編程方法，既要關(guān)注文字、圖像、視頻素材的有效呈現(xiàn)，還要兼顧網(wǎng)絡(luò)傳輸需求，以為瀏覽者提供快速、穩(wěn)定、高效、美觀的網(wǎng)頁(yè)環(huán)境。從網(wǎng)頁(yè)設(shè)計(jì)內(nèi)容來(lái)看，包括網(wǎng)頁(yè)內(nèi)容、菜單、Logo及其他組件，這些網(wǎng)頁(yè)要素在視覺呈現(xiàn)上，需要從圖像處理方法中來(lái)進(jìn)行綜合優(yōu)化，確保瀏覽者的視覺愉悅?，F(xiàn)就圖像處理的作用及具體方法展開探討。

一、網(wǎng)頁(yè)設(shè)計(jì)中圖像處理技術(shù)的作用

圖像處理技術(shù)主要是利用虛擬化手段，對(duì)現(xiàn)有的圖像素材進(jìn)行加工、美化，增強(qiáng)網(wǎng)頁(yè)的視覺表現(xiàn)力。比如在圖像采集中運(yùn)用去噪技術(shù)，來(lái)提升圖像信息的展示質(zhì)量；利用圖像增強(qiáng)技術(shù)來(lái)對(duì)重點(diǎn)信息進(jìn)行標(biāo)注，弱化不重要的信息，如對(duì)色彩進(jìn)行增強(qiáng)，對(duì)背景進(jìn)行虛化等；利用圖像壓縮技術(shù)來(lái)減少圖像的內(nèi)存占用量，提升網(wǎng)頁(yè)運(yùn)行速度等?？傮w來(lái)說(shuō)，借助于圖像處理技術(shù)來(lái)優(yōu)化網(wǎng)頁(yè)，其作用表現(xiàn)在三方面：一是便于對(duì)不同圖像樣式進(jìn)行整合與統(tǒng)一。由于網(wǎng)頁(yè)設(shè)計(jì)中對(duì)圖像素材的運(yùn)用較多，不同圖像在設(shè)計(jì)中的格式、要求也不一致。如有的是截圖，有的是攝影圖，這些圖像在視覺呈現(xiàn)上也存在差異。為此，需要經(jīng)過(guò)圖像處理技術(shù)，來(lái)對(duì)圖像進(jìn)行加工和美化處理，使其能夠滿足網(wǎng)頁(yè)瀏覽需要，還能提升網(wǎng)頁(yè)運(yùn)行速度。二是便于對(duì)網(wǎng)頁(yè)圖像大小的控制。從網(wǎng)頁(yè)瀏覽到運(yùn)行狀態(tài)來(lái)看，影響網(wǎng)頁(yè)傳輸?shù)闹饕蛟谟趫D像數(shù)據(jù)較多。如有的圖像所占內(nèi)存較大，運(yùn)行時(shí)滯性長(zhǎng)。但如果過(guò)于壓縮圖像，反而降低了圖像展示的美學(xué)效果。所以，通過(guò)圖像處理，來(lái)把握?qǐng)D像的大小、圖片的清晰度之間的關(guān)系，使其具有高質(zhì)量的網(wǎng)頁(yè)傳輸和顯示效果。三是便于提升網(wǎng)頁(yè)的表現(xiàn)效果。圖像在網(wǎng)頁(yè)設(shè)計(jì)中占主要地位，不同的圖像組合所打造的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格迥異。比如以圖表方式展示的圖像，更具有可觀性；另外，將背景融入到圖像中，可以提升網(wǎng)頁(yè)的視覺表現(xiàn)力；在圖像中適當(dāng)搭配文字或其他要素，來(lái)營(yíng)造多樣化、個(gè)性化網(wǎng)站風(fēng)格。

二、網(wǎng)頁(yè)圖像處理的主要內(nèi)容

網(wǎng)頁(yè)中的圖像處理，所選用的工具有Photoshop、Dreamweaver，ColrelDraw等軟件，利用這些軟件，可以實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)圖像的優(yōu)化處理。一是表現(xiàn)在圖像色彩的處理。色彩是影響視覺效果的重要元素，色彩的應(yīng)用貫穿于生活的方方面面。比如穿衣搭配中對(duì)不同色彩衣服的科學(xué)組合。同樣，在網(wǎng)頁(yè)設(shè)計(jì)中，對(duì)于所用到的圖像，也需要從色彩的調(diào)節(jié)上來(lái)確保與內(nèi)容、也網(wǎng)頁(yè)主題的對(duì)應(yīng)。否則，整個(gè)網(wǎng)頁(yè)圖像色彩雜亂無(wú)章，影響瀏覽者的訪問(wèn)熱情。通常情況下，在網(wǎng)頁(yè)圖像色彩處理上，以某一主色調(diào)為基準(zhǔn)，來(lái)選擇其他幾個(gè)色彩來(lái)進(jìn)行輔助美好。如輔助色調(diào)一般為3-5種顏色。當(dāng)然，在色彩的選擇上，通常不能跨度太大，即在視覺感知上要避免色彩生硬搭配，要從色彩的情感屬性、視覺屬性上進(jìn)行合理選擇，保障整個(gè)網(wǎng)頁(yè)畫面的融合度、色彩一致度。二是對(duì)版面的處理。版面是網(wǎng)頁(yè)設(shè)計(jì)的基本框架，高質(zhì)量的網(wǎng)頁(yè)設(shè)計(jì)，其版面往往更具特色。主題是網(wǎng)頁(yè)版面的首要內(nèi)容，設(shè)計(jì)鮮明的主題，要善于從網(wǎng)頁(yè)圖像處理中來(lái)烘托主題氛圍，綜合網(wǎng)頁(yè)其他要素包括文字、聲音等內(nèi)容進(jìn)行有效規(guī)劃，合理編排，優(yōu)化各自的主次關(guān)系，增強(qiáng)網(wǎng)頁(yè)設(shè)計(jì)的層次性、鮮明性、主題性。在頁(yè)面內(nèi)容上要強(qiáng)調(diào)色彩的統(tǒng)一布局。色彩與網(wǎng)頁(yè)內(nèi)容要具有關(guān)聯(lián)性、一致性，可以在圖像上面增加文字，或者在旁邊添加文字，也可以將圖像與其他圖像進(jìn)行銜接組合來(lái)展現(xiàn)主題。另外，網(wǎng)頁(yè)的色彩要與網(wǎng)頁(yè)內(nèi)容保持有序統(tǒng)一，可以通過(guò)錯(cuò)落感來(lái)突顯個(gè)性，也可以通過(guò)順序布局來(lái)保持網(wǎng)頁(yè)的和諧對(duì)稱。

三、網(wǎng)頁(yè)圖像處理的主要方法

結(jié)合網(wǎng)頁(yè)設(shè)計(jì)，對(duì)網(wǎng)頁(yè)中的圖像處理方法，主要是利用圖像編輯軟件實(shí)現(xiàn)對(duì)圖像素材的轉(zhuǎn)化和處理，使其滿足網(wǎng)頁(yè)設(shè)計(jì)需求，其方法主要有四點(diǎn)。

（一）完成對(duì)不同圖像格式的轉(zhuǎn)化

從網(wǎng)頁(yè)設(shè)計(jì)與圖像編輯實(shí)踐中，并非所有的圖像格式都適宜網(wǎng)頁(yè)。為了更有效的傳輸圖像，確保更穩(wěn)、更快、更高效的用戶響應(yīng)質(zhì)量，在網(wǎng)頁(yè)設(shè)計(jì)中主要運(yùn)用GIF、PNG、JPEG等格式的圖片，這些圖片占用內(nèi)存空間少，圖片顯示質(zhì)量高。比如在網(wǎng)頁(yè)導(dǎo)航欄的圖標(biāo)設(shè)計(jì)中，我們可以選用動(dòng)態(tài)的GiF圖片，以動(dòng)態(tài)的點(diǎn)綴效果來(lái)增強(qiáng)網(wǎng)頁(yè)頁(yè)面的視覺展示效果，也能夠更好的突出網(wǎng)頁(yè)的設(shè)計(jì)主題。不過(guò)，由于GIF動(dòng)畫圖片格式有一定的要求，在進(jìn)行轉(zhuǎn)換時(shí)，要結(jié)合網(wǎng)頁(yè)設(shè)計(jì)內(nèi)容，網(wǎng)頁(yè)所要表達(dá)的主題方向，來(lái)靈活的選擇圖像格式，確保圖像顯示全面、穩(wěn)定。當(dāng)然，在網(wǎng)頁(yè)設(shè)計(jì)中還需要處理一些矢量圖，這些由直線、曲線等生成的圖像，其在處理中可以保持透明的背景，再融入PNG格式的圖片，來(lái)突出整個(gè)圖像的清晰度和吸引力。還有JPEG格式的圖片，壓縮比較大，占用空間少，響應(yīng)速度快，可以提升整個(gè)網(wǎng)頁(yè)的加載速度。

（二）對(duì)圖像質(zhì)量的處理方法

圖像質(zhì)量關(guān)系到網(wǎng)頁(yè)設(shè)計(jì)的整體視覺效果，圖像本身包含了重要信息，如文字、色彩、符號(hào)等內(nèi)容，這些圖像在顯示過(guò)程中，如果處理不當(dāng)，會(huì)影響視覺效果，甚至弱化圖像質(zhì)量。所以，圖像質(zhì)量的控制，主要從圖像的采集環(huán)節(jié)，提升圖像的分辨率，在圖像的顯示環(huán)節(jié)，采用相應(yīng)的美化手段，如邊緣銳化，色彩強(qiáng)化，背景虛化等處理方法，來(lái)提升圖像的整體清晰度。

（三）對(duì)圖像壓縮的處理方法

網(wǎng)頁(yè)設(shè)計(jì)中的圖像本身，需要進(jìn)行壓縮處理，來(lái)減少對(duì)內(nèi)存的占用，來(lái)提升網(wǎng)頁(yè)的響應(yīng)速度。由于網(wǎng)頁(yè)設(shè)計(jì)中用到的圖像要素較多，不同圖像在壓縮處理上也采用不同方式。如果對(duì)于主體圖像，壓縮率太高，則可能導(dǎo)致圖像失真而看不清晰，反而影響了網(wǎng)頁(yè)展示效果。所以，在對(duì)圖像進(jìn)行壓縮時(shí)，要結(jié)合圖像的內(nèi)容及用途，正確、合理的選擇壓縮方式，來(lái)實(shí)現(xiàn)更好的顯示效果。

（四）對(duì)比與互補(bǔ)色的處理方法

從網(wǎng)頁(yè)設(shè)計(jì)的圖像整體來(lái)看，需要從藝術(shù)審美視角來(lái)實(shí)現(xiàn)整個(gè)畫面色彩的一致性，以增強(qiáng)美感，打破凌亂和沉悶。網(wǎng)頁(yè)設(shè)計(jì)中的色彩對(duì)比與互補(bǔ)處理，主要從色彩的綜合性上，對(duì)不同色彩進(jìn)行調(diào)和，使其具有一定的差異性，又能夠突顯鮮明的主題色彩。

參考文獻(xiàn)：

[1]雒虹.計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)中的圖像處理技術(shù)探討[J].現(xiàn)代職業(yè)教育，2016，（15）.

[2]張紅軍.計(jì)算機(jī)圖像處理技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用[J].電子技術(shù)與軟件工程，2017，（15）.

（作者單位：商丘市第一高級(jí)中學(xué)高二一班）