淺談網(wǎng)頁設(shè)計(jì)中的圖像處理技術(shù)

智立甫 王春寫

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

圖像在網(wǎng)頁中，相比純文本對(duì)象，信息承載能力強(qiáng)，良好的頁面設(shè)計(jì)能給瀏覽者留下深刻的印象。所以網(wǎng)頁設(shè)計(jì)中的圖像處理技術(shù)得到了設(shè)計(jì)者的重視。

1 常見處理技術(shù)

網(wǎng)頁中的圖像，按照存儲(chǔ)格式不同可以分為矢量圖和位圖，按照使用用途的不同，大致可以分為地址欄圖像，網(wǎng)站Logo，網(wǎng)頁內(nèi)容圖像等。地址欄圖像類似一個(gè)圖標(biāo)，顯示在地址欄網(wǎng)址前邊，一般經(jīng)過精心設(shè)計(jì)，能夠傳遞公司專業(yè)與精細(xì)的形象。內(nèi)容圖像是指嵌在網(wǎng)頁中或者作為網(wǎng)頁背景的圖像。伴隨網(wǎng)絡(luò)技術(shù)和軟件技術(shù)的進(jìn)步，用于圖像處理設(shè)計(jì)的軟件有了很大的發(fā)展。網(wǎng)頁三劍客中的Dreamweaver在進(jìn)行網(wǎng)頁設(shè)計(jì)的同時(shí)，可以對(duì)一些圖片進(jìn)行簡(jiǎn)單的變化處理，fireworks能滿足對(duì)網(wǎng)頁圖片處理的大部分功能要求。對(duì)于一些有特殊要求的圖像，可以使用Adobe公司的Photoshop軟件進(jìn)行處理；在進(jìn)行Logo等設(shè)計(jì)時(shí)，一般使用CorelDraw或Illustrator等軟件來完成。

在進(jìn)行圖像的設(shè)計(jì)、選擇和處理中，掌握專業(yè)軟件的基本使用技巧是必需的，圖像在網(wǎng)頁設(shè)計(jì)中的功能主要可以分為視覺吸引、信息引導(dǎo)兩方面。[1]要達(dá)到這樣的目的，需要對(duì)圖像進(jìn)行合理的處理。使用動(dòng)畫圖片，以及適當(dāng)?shù)纳蕦?duì)比，形成版式的變化，吸引瀏覽者的注意，引導(dǎo)其對(duì)網(wǎng)站內(nèi)容的閱讀。

根據(jù)公司對(duì)網(wǎng)站的功能定位，其所承載的任務(wù)與指向有所不同，對(duì)瀏覽者所作設(shè)定亦有差異。比如騰訊公司的騰訊網(wǎng)（qq.com）和騰訊（tecent.com），一個(gè)作為門戶內(nèi)容網(wǎng)站，一個(gè)作為公司形象網(wǎng)站是兩個(gè)獨(dú)立的網(wǎng)站，設(shè)計(jì)風(fēng)格，內(nèi)容和要求差異很大。

2 新技術(shù)

網(wǎng)絡(luò)作為第四媒體，其顯示終端可能是計(jì)算機(jī)，平板，電視或智能手機(jī)，為了頁面兼容等原因，前端設(shè)計(jì)出現(xiàn)了很多新技術(shù)，如div+css技術(shù)，Javascript技術(shù)等，為了方便管理，一般采用對(duì)象的結(jié)構(gòu)、表現(xiàn)和行為分開。結(jié)構(gòu)是對(duì)象的內(nèi)容，表現(xiàn)是其外觀，而行為是與瀏覽者的交互，或者說是瀏覽者進(jìn)行鼠標(biāo)點(diǎn)擊或輸入內(nèi)容等操作時(shí)，頁面的反應(yīng)。在進(jìn)行網(wǎng)頁設(shè)計(jì)過程中，圖像對(duì)象也是如此，利用代碼可以對(duì)圖像進(jìn)行一些效果的處理，起到資源占用少，頁面維護(hù)容易等目的，還可以達(dá)到一些用基本圖像處理技術(shù)不易實(shí)現(xiàn)的效果。用div+css結(jié)合Javascript技術(shù)可以實(shí)現(xiàn)在網(wǎng)頁前端一些設(shè)計(jì)效果和邏輯處理功能，比如圖像輪播和驗(yàn)證碼校驗(yàn)功能[2]。

在一個(gè)存在后臺(tái)管理的網(wǎng)站中，網(wǎng)頁的很多內(nèi)容來自于后臺(tái)數(shù)據(jù)庫，一些圖片也不例外，內(nèi)容需要和后臺(tái)交互，根據(jù)數(shù)據(jù)庫的內(nèi)容和頁面的特定邏輯，決定圖像的外觀。這是基本圖像處理技術(shù)無法實(shí)現(xiàn)的，需要設(shè)計(jì)者了解動(dòng)態(tài)頁面設(shè)計(jì)技術(shù)，常見的技術(shù)有asp.net，php和jsp技術(shù)等。這里以php技術(shù)為例：

用php函數(shù)創(chuàng)建圖片：

switch（$SIZE[2]）{

case 1：

$this->PICTURE_CREATE=imagecreatefromgif（$PICTURE_URL）；

$this->PICTURE_TYPE="imagejpeg"；

$this->PICTURE_EXT="jpg"；

break；

case 2：

$this->PICTURE_CREATE=imagecreatefromjpeg（$PICTURE_URL）；

$this->PICTURE_TYPE="imagegif"；

$this->PICTURE_EXT="gif"；

break；

case 3：

$this->PICTURE_CREATE=imagecreatefrompng（$PICTURE_URL）；

$this->PICTURE_TYPE="imagepng"；

$this->PICTURE_EXT="png"；

break；

}

在圖片上放文字或圖片水印文字：

function _mark_text（）{

$this->TRUE_COLOR=imagecreatetruecolor（$this->PICTURE_WIDTH，$this->PICTURE_HEIGHT）；

$this->WORD=mb_convert_encoding（$this->FONT_WORD，'utf-8'，'gb2312'）；

除此之外，還有連接數(shù)據(jù)庫，縮放、剪切、相框、銳化、旋轉(zhuǎn)、翻轉(zhuǎn)、透明度、反色等對(duì)網(wǎng)頁圖片的處理。不再一一舉例。

3 結(jié)論

傳統(tǒng)網(wǎng)頁設(shè)計(jì)技術(shù)一般分為前臺(tái)和后臺(tái)技術(shù)，前臺(tái)主要負(fù)責(zé)頁面的版式和效果設(shè)計(jì)，在設(shè)計(jì)過程中，需要對(duì)圖像處理有較好的理解，隨著技術(shù)的進(jìn)步和觀念的變化，一般認(rèn)為，網(wǎng)站的功能是第一位的，在此基礎(chǔ)上，需要有良好的顯示效果。

技術(shù)是手段，是媒介，不能一味追求技術(shù)的先進(jìn)與絢麗，設(shè)計(jì)要同公司網(wǎng)站的定位緊密相關(guān)，綜合運(yùn)用多種技術(shù)實(shí)現(xiàn)。網(wǎng)站的視覺吸引、信息引導(dǎo)兩方面的功能并沒有變，但是如何達(dá)到這一目的，是設(shè)計(jì)者關(guān)注并努力的方向。在功能完成的基礎(chǔ)上，使瀏覽者獲得良好的體驗(yàn)，簡(jiǎn)潔明快的設(shè)計(jì)往往會(huì)給用戶留下較深的印象。頁面圖像設(shè)計(jì)者要對(duì)相關(guān)技術(shù)有較好的理解，頁面前臺(tái)效果不是孤立的，任務(wù)進(jìn)行過程中，美工需要和后臺(tái)設(shè)計(jì)人員進(jìn)行溝通，反復(fù)修改，共同完成設(shè)計(jì)。

參考文獻(xiàn)：

[1]韋燕.網(wǎng)頁設(shè)計(jì)中計(jì)算機(jī)圖像處理技術(shù)的應(yīng)用[J].現(xiàn)代商貿(mào)工業(yè)，2013（22）.

[2]胡雯.JavaScript在網(wǎng)頁圖像動(dòng)態(tài)效果中的新應(yīng)用[J].科技信息，2009（35）.

[3]劉利華.網(wǎng)頁設(shè)計(jì)中視覺元素的運(yùn)用研究[D].湖南師范大學(xué)， 2009.