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

□林麗紅

網(wǎng)頁(yè)制作是一門常用的編程、圖像處理技術(shù)，媒體是其主要存在形式，擁有濃厚的藝術(shù)氣息和強(qiáng)烈的影響力，由文字、圖片與超鏈接共同組成。在具體的設(shè)計(jì)過(guò)程中，應(yīng)全面分析各個(gè)要素，合理歸納，認(rèn)真研究各個(gè)要素的邏輯關(guān)系與前后順序，進(jìn)而組建一個(gè)統(tǒng)一的整體。

一、圖形圖像處理技術(shù)

(一)應(yīng)用的必要性。在網(wǎng)頁(yè)設(shè)計(jì)制作中，圖形圖像處理是一種較為常用的處理技術(shù)，主要通過(guò)處理軟件，從整體層面來(lái)改進(jìn)圖片［1］。對(duì)于網(wǎng)頁(yè)制作而言，分割與編碼等是最為常用的圖像處理手段，參照網(wǎng)頁(yè)制作要求，對(duì)原始圖像進(jìn)行最大程度的改進(jìn)，構(gòu)建網(wǎng)頁(yè)制作。分析網(wǎng)頁(yè)制作實(shí)踐可知，PS 與火狐是最為常用的處理軟件，以需求者的內(nèi)心活動(dòng)為切入點(diǎn)，明確需求者的視覺(jué)標(biāo)準(zhǔn)，有效傳遞網(wǎng)頁(yè)信息，提升處理效率。例如，比較網(wǎng)站整體，圖像質(zhì)量?jī)?yōu)良的網(wǎng)頁(yè)通常為首選，人們?cè)诓殚喚W(wǎng)頁(yè)時(shí)，率先選擇文字和圖形共同構(gòu)成的網(wǎng)站，其中圖像越清晰、效果越好，則停留時(shí)間也將會(huì)越長(zhǎng)，并可引導(dǎo)人們科學(xué)讀取網(wǎng)站內(nèi)容，而這為網(wǎng)頁(yè)制作開(kāi)辟了新的渠道，有利于網(wǎng)頁(yè)制作的全面發(fā)展。

(二)優(yōu)勢(shì)。

1．提升網(wǎng)頁(yè)質(zhì)量。從整體層面提升制作水平，優(yōu)化整體構(gòu)造，提高圖像處理效果，改善網(wǎng)頁(yè)的質(zhì)量，有效發(fā)揮清晰、優(yōu)良圖像的價(jià)值，擴(kuò)大網(wǎng)頁(yè)制作的感染力，系統(tǒng)彰顯網(wǎng)頁(yè)優(yōu)勢(shì)，以此來(lái)創(chuàng)造更多的網(wǎng)頁(yè)價(jià)值。

2．改進(jìn)網(wǎng)頁(yè)運(yùn)行。借助技術(shù)所處理的圖像，其指標(biāo)參數(shù)均符合網(wǎng)頁(yè)制作要求，滿足規(guī)范標(biāo)準(zhǔn)，更不會(huì)對(duì)網(wǎng)頁(yè)運(yùn)行空間產(chǎn)生影響，確保搜索質(zhì)量。待用戶經(jīng)由搜索引擎尋找網(wǎng)頁(yè)時(shí)，清晰、優(yōu)良的圖像能夠加快下載速度，增加網(wǎng)頁(yè)的順暢性，除可有效展現(xiàn)給用戶外，還可提升點(diǎn)擊率，推動(dòng)網(wǎng)頁(yè)競(jìng)爭(zhēng)排名。

二、構(gòu)圖設(shè)計(jì)

網(wǎng)頁(yè)屬于一種獨(dú)特的文件，借助瀏覽器來(lái)顯示，網(wǎng)頁(yè)構(gòu)圖應(yīng)依照網(wǎng)站種類、風(fēng)格與服務(wù)對(duì)象等因素來(lái)確定。借助頁(yè)面構(gòu)圖，利用版面設(shè)計(jì)可規(guī)范、合理設(shè)置欄目，完全、清晰展現(xiàn)欄目?jī)?nèi)容，有效彰顯設(shè)計(jì)人員的設(shè)計(jì)理念，完美闡述主題思想。

(一)網(wǎng)頁(yè)設(shè)計(jì)中使用圖片的優(yōu)勢(shì)。

1．視覺(jué)優(yōu)勢(shì)。從版面構(gòu)成要素層面而言，圖片的合理使用能夠賦予網(wǎng)頁(yè)別樣的風(fēng)格，有效吸引廣大用戶;從網(wǎng)頁(yè)設(shè)計(jì)層面而言，圖片擁有一定的設(shè)計(jì)彈性，能夠協(xié)調(diào)網(wǎng)頁(yè)內(nèi)部的其余視覺(jué)元素，進(jìn)而讓網(wǎng)頁(yè)設(shè)計(jì)可適應(yīng)設(shè)計(jì)目標(biāo)規(guī)劃，達(dá)到統(tǒng)一、協(xié)調(diào)。

2．認(rèn)知優(yōu)勢(shì)。圖片的使用能夠讓無(wú)論來(lái)自哪個(gè)國(guó)家的人均可準(zhǔn)確理解圖片內(nèi)涵，因此，可以降低閱讀障礙和瀏覽障礙。即便用戶不識(shí)字，也可借助類似方法明確圖片的內(nèi)涵，擁有認(rèn)知優(yōu)勢(shì)。

(二)構(gòu)圖方式。

1．縱向式構(gòu)圖?？v向式構(gòu)圖指代沿著垂直方向來(lái)排列網(wǎng)頁(yè)中所包含的所有要素。此種構(gòu)圖不僅滿足當(dāng)代人的視覺(jué)習(xí)慣，而且能夠清晰、直觀展現(xiàn)頁(yè)面，主要被應(yīng)用到廣告設(shè)計(jì)和子頁(yè)設(shè)計(jì)活動(dòng)中。另外，應(yīng)用此種構(gòu)圖時(shí)，還可選擇不對(duì)稱設(shè)計(jì)，進(jìn)而獲得突破，營(yíng)造別樣的視覺(jué)效果。

2．水平式構(gòu)圖。水平式構(gòu)圖指代網(wǎng)頁(yè)中的所有要素沿著水平方向進(jìn)行排列。此種構(gòu)圖可給人一種莊嚴(yán)、穩(wěn)定、厚實(shí)的感覺(jué)，與人們的審美標(biāo)準(zhǔn)相符，滿足瀏覽習(xí)慣。它主要被應(yīng)用于政府機(jī)構(gòu)、私營(yíng)企業(yè)、學(xué)校教育等網(wǎng)站中，具體應(yīng)用在主頁(yè)設(shè)計(jì)環(huán)節(jié)。應(yīng)用此種構(gòu)圖開(kāi)展頁(yè)面制作工作時(shí)，需要靈活運(yùn)用色彩，尤其在導(dǎo)航條與文字中，規(guī)避單一畫面，增強(qiáng)網(wǎng)頁(yè)的嚴(yán)謹(jǐn)性和莊重感。

3．中心式構(gòu)圖。中心式構(gòu)圖是指將頁(yè)面中的關(guān)鍵要素編排在畫面的中心位置，集中形象、強(qiáng)調(diào)重點(diǎn)，視覺(jué)沖擊力明顯。

在網(wǎng)頁(yè)設(shè)計(jì)中，上述三種構(gòu)圖是最常用的構(gòu)圖方式，針對(duì)不同類型的商品與差異化的個(gè)人網(wǎng)頁(yè)，在開(kāi)展設(shè)計(jì)制作工作時(shí)也可選用不規(guī)則構(gòu)圖，進(jìn)而完全彰顯獨(dú)特的、個(gè)性化色彩［2］。

三、色彩搭配

色彩是網(wǎng)頁(yè)設(shè)計(jì)中的基本元素，網(wǎng)頁(yè)制作一定包含色彩設(shè)計(jì)，合理、有效的色彩運(yùn)用通常能提升創(chuàng)意效果，但若只是進(jìn)行機(jī)械組合，則無(wú)法獲得理想的效果。同時(shí)，網(wǎng)頁(yè)設(shè)計(jì)中所遵循的色彩搭配原則與圖形圖像處理相同，都應(yīng)參照適用性原則。主要包含用戶滿意率、整體協(xié)調(diào)性、清晰指數(shù)。另外，網(wǎng)頁(yè)中所采用的顏色圖像應(yīng)盡可能采用RGB 模式，這是因?yàn)楫?dāng)前所使用的顯示器主要為32 位以上，無(wú)需考慮瀏覽器安全色，在具體的選擇過(guò)程應(yīng)全面考慮色彩統(tǒng)一標(biāo)準(zhǔn)［3］。在具體的網(wǎng)頁(yè)配色過(guò)程，一是確定一種顏色，并調(diào)整透明度，改進(jìn)飽和度，簡(jiǎn)單來(lái)說(shuō)是指深化或者淺化原有色彩，進(jìn)而形成新色彩，然后應(yīng)用到網(wǎng)頁(yè)中;二是設(shè)計(jì)網(wǎng)頁(yè)時(shí)，若無(wú)法有效把控色彩表現(xiàn)力，則應(yīng)盡可能不要使用對(duì)比鮮明的色彩。

四、圖形圖像處理技術(shù)在網(wǎng)頁(yè)中的實(shí)際應(yīng)用

網(wǎng)頁(yè)制作是一種把文字、圖片、背景和視頻等統(tǒng)一整合的過(guò)程，我們應(yīng)大力增加網(wǎng)頁(yè)中所包含的信息量，不斷提升網(wǎng)頁(yè)的藝術(shù)氣息［4］。圖形圖像處理是一種必不可少的網(wǎng)頁(yè)設(shè)計(jì)制作技術(shù)，通常待落實(shí)頁(yè)面構(gòu)圖后，則應(yīng)設(shè)計(jì)導(dǎo)航條與文字背景，同時(shí)進(jìn)行特效處理。例如，設(shè)計(jì)人力資源測(cè)評(píng)網(wǎng)時(shí)，主要通過(guò)Photoshop 軟件進(jìn)行網(wǎng)頁(yè)制作，本文將以此為例，闡述圖形圖像處理在網(wǎng)頁(yè)設(shè)計(jì)方面的應(yīng)用。

(一)頁(yè)面構(gòu)圖。因人力資源測(cè)評(píng)網(wǎng)自身較為鄭重和莊嚴(yán)，為突顯這一特點(diǎn)，并吸引瀏覽者的注意力，主要選擇水平與中心式相融合的構(gòu)圖。測(cè)試與評(píng)估是一項(xiàng)緊張的工作，因此，選取白色充當(dāng)網(wǎng)頁(yè)背景色，藍(lán)色為主色調(diào)，合理調(diào)節(jié)透明度與飽和度，組建藍(lán)色系。這是因?yàn)榘咨粌H能渲染紅色等亮色，還可營(yíng)造一種溫和、融洽、深遠(yuǎn)和平穩(wěn)的感覺(jué)。

(二)LOGO 制作。LOGO 代表著網(wǎng)站，它是一種標(biāo)志，至關(guān)重要。在設(shè)計(jì)LOGO 時(shí)，應(yīng)遵循簡(jiǎn)單、顯眼的原則，利用有限的空間，展現(xiàn)特定形象，傳達(dá)某些信息，同時(shí)，確保美觀、鮮明。本文中的測(cè)評(píng)網(wǎng)站選用了大寫字母R，輔以藍(lán)色背景的LOGO，簡(jiǎn)單、大方;還可將其設(shè)計(jì)成進(jìn)入準(zhǔn)備階段的運(yùn)動(dòng)員。

(三)導(dǎo)航條制作。網(wǎng)上瀏覽應(yīng)堅(jiān)持便利、快捷的原則，導(dǎo)航條通?？蓭椭鸀g覽者有效找到目標(biāo)內(nèi)容。在網(wǎng)頁(yè)主頁(yè)中設(shè)計(jì)導(dǎo)航條，充當(dāng)頂級(jí)目錄，可與子頁(yè)面形成鏈接，便于查閱和瀏覽［5］。在具體的設(shè)計(jì)環(huán)節(jié)，應(yīng)結(jié)合網(wǎng)站的具體特點(diǎn)與基本功能來(lái)明確，在保證外表美觀的同時(shí)，還應(yīng)滿足實(shí)用性要求。同時(shí)，確保導(dǎo)航條所選用的色彩滿足網(wǎng)頁(yè)的整體色調(diào)，主要設(shè)置在正文之上，而子頁(yè)則可通過(guò)列表進(jìn)行導(dǎo)航，相應(yīng)的導(dǎo)航條可設(shè)置在正文兩側(cè)。以水平式導(dǎo)航條為例，在人力資源測(cè)評(píng)網(wǎng)的制作過(guò)程中，可將水平式導(dǎo)航條設(shè)計(jì)為柱狀浮雕效果，且具有漸變色，操作步驟如下所述:其一，重新建立圖層，借助矩形選框工具設(shè)立矩形選區(qū);其二，改動(dòng)漸變色彩，構(gòu)建漸變色條;其三，點(diǎn)擊編輯，然后點(diǎn)擊描邊，進(jìn)而為選區(qū)構(gòu)建描邊效果;其四，利用快捷鍵來(lái)撤回選擇，點(diǎn)擊圖層，然后點(diǎn)擊圖層樣式，以此來(lái)設(shè)置斜面與浮雕圖層相結(jié)合的效果，具體是指在默認(rèn)狀態(tài)中對(duì)樣式、深度、方向、大小和方法等進(jìn)行調(diào)整;其六，再次借助投影樣式，以此來(lái)增強(qiáng)漸變效果。變動(dòng)參數(shù)，直到出現(xiàn)三維效果，再增設(shè)導(dǎo)航菜單項(xiàng)等基本選項(xiàng)便可。

五、結(jié)語(yǔ)

網(wǎng)頁(yè)除以媒體形式進(jìn)行存在外，還涵蓋多種內(nèi)容，藝術(shù)氣息濃厚，而圖形圖像處理在網(wǎng)頁(yè)設(shè)計(jì)中占據(jù)重要位置，較為常用。圖形圖像處理主要依托特殊功能，全面展現(xiàn)設(shè)計(jì)人員的構(gòu)思，完全彰顯個(gè)人情感，同時(shí)，輔以文字和圖片等要素，巧妙運(yùn)用色彩，進(jìn)而為瀏覽者提供一個(gè)色彩鮮明、內(nèi)涵豐富、結(jié)構(gòu)清晰的網(wǎng)頁(yè)。

［1］郝邊遠(yuǎn)． 視覺(jué)傳達(dá)功能在網(wǎng)頁(yè)設(shè)計(jì)中的表現(xiàn)［J］． 才智，2012，8:300

［2］鄧焱．基于交互動(dòng)畫的網(wǎng)站設(shè)計(jì)與應(yīng)用［D］．山東大學(xué)，2015

［3］趙志江．基于任務(wù)驅(qū)動(dòng)的《網(wǎng)頁(yè)設(shè)計(jì)制作》課程教學(xué)改革探討［J］．卷宗，2013，4:29

［4］簡(jiǎn)海斌．用網(wǎng)頁(yè)設(shè)計(jì)制作桌面應(yīng)用程序界面探討［J］．職業(yè)，2014，15:61 ～62

［5］朱鳳明．網(wǎng)頁(yè)設(shè)計(jì)與制作中DreamweaverCs5 的功能應(yīng)用與發(fā)展趨勢(shì)［J］．電腦知識(shí)與技術(shù)，2013，24:5428 ～5429