網(wǎng)頁(yè)設(shè)計(jì)中圖像處理的相關(guān)探討

許蕾

摘? 要：各式各樣的網(wǎng)頁(yè)網(wǎng)站充斥在人們生活、工作中，網(wǎng)頁(yè)設(shè)計(jì)效果關(guān)乎到人們?cè)诰W(wǎng)頁(yè)中的駐留時(shí)間。而要想進(jìn)一步提升網(wǎng)頁(yè)設(shè)計(jì)效果，離不開圖像處理的應(yīng)用，依據(jù)網(wǎng)頁(yè)主題合理的應(yīng)用網(wǎng)頁(yè)處理技巧，可以在提升網(wǎng)頁(yè)設(shè)計(jì)美觀性的同時(shí)，實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)網(wǎng)站主題元素的有效體現(xiàn)?；诖耍疚囊詧D像處理的重要性分析入手，進(jìn)一步闡明圖像處理技巧在網(wǎng)頁(yè)設(shè)計(jì)中的具體應(yīng)用。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì);重要性;圖像處理;技巧

網(wǎng)站信息、主題的展示依托于網(wǎng)頁(yè)的設(shè)計(jì)，而借助圖像處理技巧的應(yīng)用，可以在提升網(wǎng)頁(yè)整體布局設(shè)計(jì)效果的同時(shí)，確保網(wǎng)頁(yè)設(shè)計(jì)中LOGO、導(dǎo)航欄等方面的設(shè)計(jì)與網(wǎng)站主題相契合，實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)藝術(shù)表達(dá)效果的有效提升。正因此，合理應(yīng)用圖像處理技術(shù)，可以在提升網(wǎng)頁(yè)設(shè)計(jì)感染力的前提下，實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)功能、結(jié)構(gòu)的合理布局，提升網(wǎng)頁(yè)內(nèi)容的視覺傳播效果，確保受眾可以長(zhǎng)時(shí)間駐留與網(wǎng)站網(wǎng)頁(yè)中。

一、網(wǎng)頁(yè)設(shè)計(jì)中圖像處理技巧應(yīng)用重要性分析

當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)離不開圖像處理技術(shù)的應(yīng)用，分析圖像處理應(yīng)用的重要性，體現(xiàn)為：（1）網(wǎng)頁(yè)設(shè)計(jì)效果優(yōu)化。網(wǎng)頁(yè)設(shè)計(jì)是否美觀、藝術(shù)，與受眾的網(wǎng)頁(yè)瀏覽興趣之間存在直接聯(lián)系。借助圖像處理進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)優(yōu)化，可加深受眾對(duì)網(wǎng)頁(yè)信息的印象。同時(shí)，網(wǎng)頁(yè)中相關(guān)主題要素可通過圖像處理進(jìn)行美化，如對(duì)網(wǎng)頁(yè)中結(jié)構(gòu)、位置、色彩以及大小等要素進(jìn)行優(yōu)化設(shè)置，提升網(wǎng)頁(yè)設(shè)計(jì)效果[1]。（2）強(qiáng)調(diào)網(wǎng)頁(yè)設(shè)計(jì)要點(diǎn)。網(wǎng)頁(yè)的主題信息主要是通過對(duì)圖形、文字等要素的融合應(yīng)用來優(yōu)化體現(xiàn)，通過圖像處理為受眾提供信息導(dǎo)向，幫助受眾在網(wǎng)頁(yè)中獲取所需的信息內(nèi)容。所以，網(wǎng)頁(yè)設(shè)計(jì)中合理應(yīng)用圖像處理技巧，可以在確保受眾獲取所需信息的前提下，提升受眾信息獲取效率，實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)信息的簡(jiǎn)潔性表達(dá)。（3）圖形、圖像質(zhì)量?jī)?yōu)化。網(wǎng)頁(yè)中涉及到大量圖片、圖像等元素的應(yīng)用，而使用圖像處理技巧可進(jìn)一步提升網(wǎng)頁(yè)中圖片、圖像的視覺效果，如借助去噪技術(shù)提升圖形處理質(zhì)量，圖像顯示效果可通過圖像增強(qiáng)進(jìn)行美化，再如采用色彩增效、邊緣增強(qiáng)等技術(shù)可提升網(wǎng)頁(yè)畫面的設(shè)計(jì)感。

二、圖像處理在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

（一）版面布局設(shè)計(jì)

版面布局的設(shè)計(jì)關(guān)乎到網(wǎng)頁(yè)的整體視覺效果，并影響到網(wǎng)頁(yè)整體結(jié)構(gòu)布局的合理性，只有通過合理設(shè)計(jì)網(wǎng)頁(yè)的版面布局，才能確保網(wǎng)頁(yè)中主題信息內(nèi)容的清晰展示。網(wǎng)頁(yè)結(jié)構(gòu)布局囊括導(dǎo)航欄、LOGO、網(wǎng)頁(yè)內(nèi)容等模塊組成，為進(jìn)一步提升各模塊在網(wǎng)頁(yè)版面布局的合理性，需借助圖像處理手段的應(yīng)用來提升整體版面布局設(shè)計(jì)效果。具體處理過程中，設(shè)計(jì)者需依據(jù)對(duì)網(wǎng)頁(yè)規(guī)劃需求的分析，利用Fireworks軟件進(jìn)行網(wǎng)頁(yè)尺寸的合理規(guī)劃與設(shè)計(jì)。而為確保網(wǎng)頁(yè)尺寸規(guī)劃符合受眾瀏覽需求，可依照顯示器的不同分辨率進(jìn)行合理規(guī)劃，具體包括1024*768、1440*900等[2]。同時(shí)，需依據(jù)網(wǎng)頁(yè)主題信息內(nèi)容進(jìn)行網(wǎng)頁(yè)布局類型的設(shè)計(jì)，如國(guó)字型、左右框架型等。另外，需根據(jù)受眾的瀏覽習(xí)慣進(jìn)行網(wǎng)頁(yè)內(nèi)容信息的布局與設(shè)計(jì)，如基于受眾網(wǎng)頁(yè)瀏覽習(xí)慣的掌握，進(jìn)行網(wǎng)頁(yè)信息內(nèi)容的從左至右設(shè)計(jì)，結(jié)合對(duì)從上至下內(nèi)容布局方式的應(yīng)用，確保其網(wǎng)頁(yè)整體版面設(shè)計(jì)符合受眾實(shí)際瀏覽需求。而針對(duì)Fireworks軟件的應(yīng)用，可以為設(shè)計(jì)者提供網(wǎng)頁(yè)感知區(qū)參考線功能，即設(shè)計(jì)者可以依據(jù)參考線進(jìn)行網(wǎng)頁(yè)版面感知區(qū)的合理劃分，并依據(jù)受眾對(duì)不同感知區(qū)的關(guān)注度，將不同網(wǎng)頁(yè)信息填充至不同的感知區(qū)中。待網(wǎng)頁(yè)設(shè)計(jì)完成后，設(shè)計(jì)者可借助Fireworks進(jìn)行網(wǎng)頁(yè)切片，通過對(duì)網(wǎng)頁(yè)編輯元素的生成來提供網(wǎng)頁(yè)制作元件[3]。

（二）LOGO設(shè)計(jì)

LOGO不僅是網(wǎng)頁(yè)整體的標(biāo)志性代表，亦是網(wǎng)站品牌的簡(jiǎn)潔化體現(xiàn)。LOGO的設(shè)計(jì)效果關(guān)乎到受眾對(duì)網(wǎng)站品牌的關(guān)注度。同時(shí)，LOGO的應(yīng)用范圍十分廣發(fā)，除常規(guī)的網(wǎng)頁(yè)LOGO之外，線下實(shí)體、產(chǎn)品包裝等方面均涉及到對(duì)LOGO的應(yīng)用，所以LOGO的優(yōu)化設(shè)計(jì)至關(guān)重要。對(duì)此，具體設(shè)計(jì)中，設(shè)計(jì)者可借助對(duì)mustrator軟件的應(yīng)用進(jìn)行LOGO矢量圖的制作。并做到采用簡(jiǎn)潔易懂的設(shè)計(jì)方法進(jìn)行LOGO的合理設(shè)計(jì)，如設(shè)計(jì)過程中采用變形字體、藝術(shù)字體、象形字等方式提升LOGO設(shè)計(jì)的藝術(shù)感，確保LOGO設(shè)計(jì)在突出網(wǎng)站理念的前提下，實(shí)現(xiàn)對(duì)LOGO的個(gè)性化設(shè)計(jì)。所以，LOGO設(shè)計(jì)過程中，需秉持著顯眼、簡(jiǎn)潔的原則，確保其LOGO設(shè)計(jì)符合網(wǎng)頁(yè)整體規(guī)劃與設(shè)計(jì)要求[4]。例如，LOGO設(shè)計(jì)期間采用mustrator軟件進(jìn)行外形勾勒，然后依照網(wǎng)頁(yè)設(shè)計(jì)需求的分析，利用剪刀編輯工具裁剪出契合網(wǎng)頁(yè)整體設(shè)計(jì)效果的形狀，最后對(duì)LOGO進(jìn)行漸變顏色的填充，在提升LOGO設(shè)計(jì)立體感的同時(shí)，確保LOGO可以彰顯出網(wǎng)頁(yè)的品牌與理念。

（三）導(dǎo)航欄設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì)中離不開對(duì)導(dǎo)航欄模塊的應(yīng)用，因?yàn)閷?dǎo)航欄模塊可以起到引導(dǎo)受眾瀏覽網(wǎng)頁(yè)的作用，所以需在網(wǎng)頁(yè)顯眼位置進(jìn)行導(dǎo)航欄的合理設(shè)計(jì)。而為進(jìn)一步提升導(dǎo)航欄設(shè)計(jì)的美觀與顯眼性，設(shè)計(jì)者可借助圖像處理來提升導(dǎo)航欄設(shè)計(jì)效果，如依據(jù)對(duì)網(wǎng)頁(yè)整體設(shè)計(jì)需求的掌握，通過色彩與形狀優(yōu)化處理來實(shí)現(xiàn)導(dǎo)航欄的個(gè)性化設(shè)計(jì)[5]。在具體圖像處理過程中，設(shè)計(jì)者可以以PS軟件為載體進(jìn)行導(dǎo)航欄的優(yōu)化處理，例如利用PS處理導(dǎo)航欄的功能按鈕，可以在提升導(dǎo)航欄顯眼性的同時(shí)，促使功能按鈕在網(wǎng)頁(yè)中靈活生動(dòng)的呈現(xiàn)。再或者借助PS軟件中藝術(shù)效果的應(yīng)用，進(jìn)行導(dǎo)航欄的個(gè)性化處理。另外，在利用PS軟件處理導(dǎo)航欄時(shí)，可借助對(duì)圖層功能的應(yīng)用為導(dǎo)航欄融合各種元素，并通過對(duì)導(dǎo)航欄進(jìn)行濾鏡處理，提升網(wǎng)頁(yè)中導(dǎo)航欄設(shè)計(jì)的生動(dòng)性、立體性，可以讓受眾在網(wǎng)頁(yè)瀏覽時(shí)第一時(shí)間發(fā)現(xiàn)導(dǎo)航欄，并確保導(dǎo)航欄設(shè)計(jì)為整體網(wǎng)頁(yè)設(shè)計(jì)增色。

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

為進(jìn)一步發(fā)揮出圖像處理在網(wǎng)頁(yè)設(shè)計(jì)中的最大作用，設(shè)計(jì)者需重視對(duì)以下技巧的掌握：（1）圖像處理規(guī)格與尺寸。網(wǎng)頁(yè)設(shè)計(jì)的版面尺寸固定，所以需依據(jù)對(duì)網(wǎng)頁(yè)版面整體布局的分析，合理控制圖像圖形的尺寸與規(guī)格，以像素為單位進(jìn)行圖像圖形尺寸的精準(zhǔn)界定[6]。同時(shí)，不同格式的圖形圖像適用于不同網(wǎng)頁(yè)設(shè)計(jì)位置，如GIF圖像適用于網(wǎng)頁(yè)設(shè)計(jì)中的動(dòng)態(tài)化顯示板塊;PNG格式圖像適用于簡(jiǎn)單的網(wǎng)頁(yè)背景處理;JPEG格式圖像適用于復(fù)雜的網(wǎng)頁(yè)背景處理。（2）色彩搭配。色帶搭配效果與網(wǎng)頁(yè)設(shè)計(jì)整體效果呈現(xiàn)存在直接聯(lián)系，所以需依據(jù)網(wǎng)站主題進(jìn)行不同安全色的合理搭配。需注意，色彩搭配必須與網(wǎng)頁(yè)內(nèi)容、網(wǎng)頁(yè)主題相契合，并且網(wǎng)頁(yè)不同板塊色彩的應(yīng)用不可過于沖突，避免因網(wǎng)頁(yè)色彩過于突兀而影響到受眾的瀏覽效果。

結(jié)束語(yǔ)：

綜上所述，圖像處理在網(wǎng)頁(yè)設(shè)計(jì)中的合理應(yīng)用，可以在提升網(wǎng)頁(yè)設(shè)計(jì)中相關(guān)圖像、圖形處理效果的同時(shí)，進(jìn)一步優(yōu)化網(wǎng)頁(yè)的整體設(shè)計(jì)效果。鑒于此，需重視在LOGO設(shè)、導(dǎo)航欄設(shè)計(jì)以及版面布局設(shè)計(jì)中合理應(yīng)用圖像處理技術(shù)，結(jié)合對(duì)圖像處理技巧的掌握，實(shí)現(xiàn)對(duì)網(wǎng)站網(wǎng)頁(yè)的高水平設(shè)計(jì)。

參考文獻(xiàn)

[1]? 王樂，任小甲. 網(wǎng)頁(yè)設(shè)計(jì)中圖形圖像處理技巧與應(yīng)用研究[J]. 包裝世界，2019，000（004）：43，45.

[2]? 張瀟文. 網(wǎng)頁(yè)設(shè)計(jì)中計(jì)算機(jī)圖像處理技術(shù)應(yīng)用探討[J]. 無(wú)線互聯(lián)科技，2018，15（24）：80-82.

[3]? 田曉陽(yáng)，張?zhí)祆? 網(wǎng)頁(yè)設(shè)計(jì)中計(jì)算機(jī)圖像處理技術(shù)應(yīng)用探討[J]. 電腦迷，2018，000（021）：208.

[4]? 楊明. 計(jì)算機(jī)圖像處理技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用研究[J]. 河北水利電力學(xué)院學(xué)報(bào)，2019.

[5]? 李玉榮. 網(wǎng)頁(yè)設(shè)計(jì)中的圖形圖像處理技巧[J]. 電子技術(shù)與軟件工程，2015，000（007）：P.97-97.

[6]? 賀偉岸. 網(wǎng)頁(yè)設(shè)計(jì)中計(jì)算機(jī)圖像處理技術(shù)的應(yīng)用[J]. 科教導(dǎo)刊-電子版（中旬），2018，000（003）：263-264.