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

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了圖形圖像處理技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)的應(yīng)用范文，希望能給你帶來靈感和參考，敬請(qǐng)閱讀。

摘要：在網(wǎng)頁(yè)設(shè)計(jì)中離不開圖形圖像處理技術(shù)的應(yīng)用，為了能夠使網(wǎng)頁(yè)設(shè)計(jì)制作更加具有感染力，文章以圖形圖像處理技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)制作中的應(yīng)用研究為目的，首先介紹在網(wǎng)頁(yè)設(shè)計(jì)制作中常用到的圖形圖像處理工具，明確Photoshop、Fireworks；Illustrator在網(wǎng)頁(yè)制作中的優(yōu)勢(shì)，其次介紹圖形圖像的處理方法，包括版面布局設(shè)計(jì)制作、LOGO設(shè)計(jì)制作與導(dǎo)航欄設(shè)計(jì)制作；最后探討圖形圖像處理技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)制作中的應(yīng)用技巧，使網(wǎng)頁(yè)表達(dá)更加生動(dòng)完美。

關(guān)鍵詞：圖形圖像處理技術(shù)；網(wǎng)頁(yè)設(shè)計(jì)制作；制作工具；應(yīng)用技巧

網(wǎng)頁(yè)是展示網(wǎng)站信息最為直觀的表達(dá)，在網(wǎng)頁(yè)設(shè)計(jì)制作中應(yīng)用圖形圖像處理技術(shù)應(yīng)用網(wǎng)頁(yè)中的網(wǎng)站的整體布局、LOGO設(shè)計(jì)、BUTTION設(shè)計(jì)、BANNER設(shè)計(jì)等方面，增強(qiáng)網(wǎng)頁(yè)的藝術(shù)表達(dá)。圖形圖像處理技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)制作中能夠通過平面的構(gòu)圖構(gòu)建起網(wǎng)頁(yè)的整體結(jié)構(gòu)和功能布局，進(jìn)行網(wǎng)頁(yè)內(nèi)容的視覺傳播，提升網(wǎng)頁(yè)的感染力，并通過圖形圖像的優(yōu)化提升網(wǎng)頁(yè)的加載速度，保證網(wǎng)頁(yè)規(guī)范化設(shè)計(jì)標(biāo)準(zhǔn)要求。

1圖形圖像處理工具在網(wǎng)頁(yè)設(shè)計(jì)制作中的應(yīng)用

隨著網(wǎng)頁(yè)制作技術(shù)的不斷發(fā)展，專業(yè)化的圖形圖像處理工具可以幫助設(shè)計(jì)者快速、準(zhǔn)確的實(shí)現(xiàn)設(shè)計(jì)目標(biāo)，在網(wǎng)頁(yè)設(shè)計(jì)制作中常用的圖形圖像處理工具主要有Photoshop、Fireworks和Illustrator，各軟件在網(wǎng)頁(yè)設(shè)計(jì)制作中有其獨(dú)特的特點(diǎn)，可滿足不同需求的網(wǎng)頁(yè)設(shè)計(jì)制作應(yīng)用。

1.1Photoshop在網(wǎng)頁(yè)設(shè)計(jì)制作中的應(yīng)用

Photoshop是網(wǎng)頁(yè)設(shè)計(jì)制作中最為常用的圖形圖像處理工具，Photoshop的專長(zhǎng)是圖像處理，它能制作出各種圖形圖像效果展示設(shè)計(jì)者的設(shè)計(jì)思想。在網(wǎng)頁(yè)設(shè)計(jì)制作中，利用Photoshop進(jìn)行頁(yè)面的布局、元素的設(shè)計(jì)、圖像的處理和色彩的搭配，可以使網(wǎng)頁(yè)成為一幅美麗的藝術(shù)作品。利用Photo-shop進(jìn)行網(wǎng)頁(yè)的布局可以使網(wǎng)頁(yè)的功能規(guī)劃更加具有真實(shí)性，在Photoshop應(yīng)用中可以利用圖層功能將網(wǎng)頁(yè)的元素進(jìn)行整合，形成完整的設(shè)計(jì)頁(yè)面，并且能夠?qū)Ω鱾€(gè)元素進(jìn)行獨(dú)立調(diào)整，使網(wǎng)頁(yè)制作更加便捷。Photoshop能夠?qū)W(wǎng)頁(yè)中的各個(gè)圖像進(jìn)行獨(dú)立的處理，調(diào)整圖形圖像的大小、格式、分辨率等，使圖像能夠滿足網(wǎng)頁(yè)下載與顯示需求。Photoshop提供了網(wǎng)頁(yè)色彩應(yīng)用的標(biāo)準(zhǔn)色系，能夠輔助設(shè)計(jì)者準(zhǔn)確選擇色彩進(jìn)行搭配，使在不同顯示器、顯卡等硬件差異的環(huán)境下能夠準(zhǔn)確顯示色彩而不失真。

1.2Fireworks在網(wǎng)頁(yè)設(shè)計(jì)制作中的應(yīng)用

Fireworks是一款專注于網(wǎng)頁(yè)制作的作圖軟件，它能夠創(chuàng)建和優(yōu)化網(wǎng)頁(yè)圖像，并提供了龐大的網(wǎng)頁(yè)設(shè)計(jì)資源庫(kù)可以輔助設(shè)計(jì)者快速完成網(wǎng)頁(yè)的設(shè)計(jì)與制作。Fireworks是專業(yè)化的網(wǎng)頁(yè)圖形圖像處理工具，其能夠?qū)⒃O(shè)計(jì)者設(shè)計(jì)的網(wǎng)頁(yè)快速的導(dǎo)出，能夠保證不降低設(shè)計(jì)品質(zhì)的前提下生成符合網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)的圖像格式，提高網(wǎng)頁(yè)的上傳與下載效率。為此Fire-works在網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)制作中的應(yīng)用可進(jìn)行圖像優(yōu)化、網(wǎng)頁(yè)切片、制作動(dòng)畫等。Fireworks提供了JPEG、GIF、PNG網(wǎng)頁(yè)圖形圖像常用格式文件的優(yōu)化面板，可以通過顏色參數(shù)設(shè)置、圖像切割的方式壓縮圖形圖像文件大小。網(wǎng)頁(yè)切片是按照網(wǎng)頁(yè)的布局和圖像圖像的大小及功能進(jìn)行切割，一方面提升網(wǎng)頁(yè)的加載速度，另一方面能夠在網(wǎng)頁(yè)圖形圖像中加入鏈接實(shí)現(xiàn)點(diǎn)擊圖形圖像發(fā)生跳轉(zhuǎn)的功能。Fireworks提供了網(wǎng)頁(yè)圖形圖像動(dòng)態(tài)顯示的制作功能，對(duì)多個(gè)圖片設(shè)置顯示幀生成動(dòng)畫的效果。

1.3Illustrator在網(wǎng)頁(yè)設(shè)計(jì)制作中的應(yīng)用

Illustrator是一款專業(yè)的繪圖工具，在排版、插畫、圖像處理及網(wǎng)頁(yè)制作方面具有較好的應(yīng)用。Illustrator顯著的特點(diǎn)是能夠運(yùn)用貝賽爾曲線繪制矢量圖，可以制作出各類精準(zhǔn)的圖形，展現(xiàn)設(shè)計(jì)的靈活性。在網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)制作中Illustrator工具專長(zhǎng)是圖形創(chuàng)作，可以幫助設(shè)計(jì)者創(chuàng)建漸變效果、創(chuàng)建陰影效果、增加個(gè)性化字體等，使網(wǎng)頁(yè)的設(shè)計(jì)中的圖形圖像獨(dú)樹一幟。漸變?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中可以增加視覺吸引力，Illustrator所設(shè)計(jì)的漸變圖形可以任意調(diào)整大小而不失真，并能夠存儲(chǔ)漸變圖形保證網(wǎng)頁(yè)設(shè)計(jì)中所應(yīng)用到的漸變效果保持一致。陰影效果可以使網(wǎng)頁(yè)中展現(xiàn)的內(nèi)容更加具有立體感，設(shè)計(jì)者可借助Illustrator光柵化功能創(chuàng)建多種多樣的陰影效果，使網(wǎng)頁(yè)內(nèi)容更加生動(dòng)。要?jiǎng)?chuàng)造出個(gè)性化的藝術(shù)字體展現(xiàn)在網(wǎng)頁(yè)中，Illus-trator提供了個(gè)性化的字體設(shè)計(jì)功能，發(fā)揮設(shè)計(jì)者在藝術(shù)字體上的設(shè)計(jì)思想。

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

網(wǎng)頁(yè)設(shè)計(jì)中圖形圖像的處理要根據(jù)網(wǎng)頁(yè)設(shè)計(jì)的需求和設(shè)計(jì)者設(shè)計(jì)的思想選擇適合的工具進(jìn)行設(shè)計(jì)和制作，本文以網(wǎng)頁(yè)設(shè)計(jì)制作中的版面布局設(shè)計(jì)制作、LOGO設(shè)計(jì)制作、導(dǎo)航欄設(shè)計(jì)制作為例介紹網(wǎng)頁(yè)設(shè)計(jì)中的圖形圖像處理方法。

2.1版面布局設(shè)計(jì)制作

利用圖形圖像處理工具進(jìn)行網(wǎng)頁(yè)的整體結(jié)構(gòu)布局是網(wǎng)頁(yè)設(shè)計(jì)制作的首要工作，合理的版面布局可以使網(wǎng)頁(yè)的內(nèi)容顯示的更加具有條理性和清晰性。網(wǎng)頁(yè)中通常包含LOGO、導(dǎo)航欄、網(wǎng)頁(yè)內(nèi)容區(qū)和說明區(qū)幾個(gè)部分，利用Fireworks進(jìn)行網(wǎng)頁(yè)的布局可以根據(jù)網(wǎng)頁(yè)的規(guī)劃設(shè)計(jì)頁(yè)面尺寸，通常設(shè)計(jì)者會(huì)根據(jù)顯示器分辨率的規(guī)格進(jìn)行設(shè)計(jì)，最常見的顯示器尺寸如：1024*768、1280*800、1440*900等是網(wǎng)頁(yè)頁(yè)面尺寸的主要參考。網(wǎng)頁(yè)的布局根據(jù)內(nèi)容的需要會(huì)規(guī)劃為左右框架型、拐角型、“國(guó)”字型集中，通常設(shè)計(jì)者會(huì)依據(jù)人類的視覺特征進(jìn)行內(nèi)容的布局，基于人類瀏覽視覺習(xí)從左向右，從上到下的瀏覽順序，對(duì)設(shè)計(jì)內(nèi)容進(jìn)行布局，為此利用計(jì)算機(jī)圖形元素進(jìn)行版面的布局將頁(yè)面劃分為5個(gè)等級(jí)的感知區(qū)域。Fireworks提供了設(shè)計(jì)參考線功能，設(shè)計(jì)者可根據(jù)網(wǎng)頁(yè)內(nèi)容的需要利用參考線進(jìn)行版面的規(guī)劃，再將不同的內(nèi)容填充到各個(gè)區(qū)域。并且可以通過Fireworks對(duì)所設(shè)計(jì)完成的頁(yè)面進(jìn)行切片，生成網(wǎng)頁(yè)編輯的各個(gè)元素，為網(wǎng)頁(yè)的制作提供標(biāo)準(zhǔn)化的元件。

2.2LOGO設(shè)計(jì)制作

LOGO是網(wǎng)站的標(biāo)志，其不僅是網(wǎng)站的品牌，也是網(wǎng)站理念與內(nèi)容的濃縮。網(wǎng)頁(yè)的設(shè)計(jì)者對(duì)于LOGO的設(shè)計(jì)非常注重，LOGO的應(yīng)用范圍也不僅僅局限于網(wǎng)頁(yè)本身，而能夠向各個(gè)方面的應(yīng)用拓展，為此LOGO設(shè)計(jì)與制作可以使用Illustra-tor制作出矢量圖，便于圖形的放大與縮小。LOGO的設(shè)計(jì)通常以簡(jiǎn)潔易懂的設(shè)計(jì)方法進(jìn)行設(shè)計(jì)，很多網(wǎng)站都采用藝術(shù)字體、變形字體的方式準(zhǔn)確傳達(dá)網(wǎng)站的品牌和理念，為了使網(wǎng)站更加具有個(gè)性化，LOGO設(shè)計(jì)以簡(jiǎn)單、顯眼的設(shè)計(jì)原則進(jìn)行設(shè)計(jì)。例如：利用Illustrator勾勒出LOGO圖形的外形，使用剪刀工具編輯路徑使其符合設(shè)計(jì)者設(shè)計(jì)LOGO的形狀，在通過顏色的漸變進(jìn)行填充是LOGO具有立體感。

2.3導(dǎo)航欄設(shè)計(jì)制作

導(dǎo)航欄是引導(dǎo)用戶瀏覽網(wǎng)站內(nèi)容的工具，通常作為網(wǎng)頁(yè)設(shè)計(jì)中最為主要的元件放在網(wǎng)頁(yè)明顯的位置區(qū)域。為了突出導(dǎo)航欄的明顯性，通常設(shè)計(jì)者會(huì)利用色彩、形狀等個(gè)性化和差異化的特點(diǎn)進(jìn)行導(dǎo)航欄設(shè)計(jì)。在導(dǎo)航欄設(shè)計(jì)制作Photoshop是非常常用的工具，它不僅可以導(dǎo)航欄上的功能按鈕更加靈活生動(dòng)，而且能夠運(yùn)用各種藝術(shù)效果展現(xiàn)導(dǎo)航欄的個(gè)性化特色。Photoshop工具中提供的圖層功能可以方便制作出各種元素融合的導(dǎo)航欄，并且在其濾鏡功能下可以讓導(dǎo)航欄立體化、生動(dòng)化，使網(wǎng)頁(yè)的瀏覽者準(zhǔn)確定位導(dǎo)航功能，并體現(xiàn)出網(wǎng)站的藝術(shù)特點(diǎn)。

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

在網(wǎng)頁(yè)設(shè)計(jì)制作中，圖形圖像處理的應(yīng)用技巧非常多，本文選擇了圖像的尺寸與規(guī)格處理、圖像的融合處理和網(wǎng)頁(yè)的色彩搭配進(jìn)行探討。

3.1圖像的尺寸與規(guī)格處理

網(wǎng)頁(yè)設(shè)計(jì)中因版面的限制，在選擇插入圖形圖像時(shí)會(huì)嚴(yán)格規(guī)定圖形圖像的尺寸，所以圖像的尺寸要保證尺寸的準(zhǔn)確性，圖形圖像處理工具提供了以像素為單位的設(shè)計(jì)標(biāo)準(zhǔn)，設(shè)計(jì)者可在限定的尺寸要求下進(jìn)行圖形圖像設(shè)計(jì)。網(wǎng)頁(yè)設(shè)計(jì)中的圖形圖像格式主要包括JPEG、GIF和PNG，使用圖形圖像處理工具根據(jù)圖像的需要將設(shè)計(jì)圖形圖像存儲(chǔ)為所需的格式，如：JPEG格式適用于復(fù)雜背景圖像，GIF適用于動(dòng)態(tài)圖像，PNG適用于簡(jiǎn)單背景圖形圖像等。

3.2圖像的融合處理

在網(wǎng)頁(yè)設(shè)計(jì)中利用圖層的融合增強(qiáng)圖像的效果和空間的利用率非常普遍，所以在進(jìn)行圖像融合時(shí)要利用Photoshop工具對(duì)圖像的亮度、色相、色彩飽和度等進(jìn)行調(diào)整使各個(gè)圖層的圖像保持一種統(tǒng)一的融合效果，并利用蒙版工具、漸變工具等使圖像的融合消除邊緣，達(dá)到理想的融合效果。

3.3網(wǎng)頁(yè)的色彩搭配

網(wǎng)頁(yè)的色彩搭配是網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意效果體現(xiàn)的主要方式之一，因?yàn)榫W(wǎng)頁(yè)的顯示途徑是顯示設(shè)備，不同類型的顯示設(shè)備因其顯示器、顯卡的不同所顯示的顏色有一定的差異性，為此網(wǎng)頁(yè)設(shè)計(jì)提供了安全色的標(biāo)準(zhǔn)，能夠滿足各類顯示環(huán)境下保證色彩不會(huì)失真。網(wǎng)頁(yè)設(shè)計(jì)中有216安全色彩，顏色以16進(jìn)制數(shù)值形式表示，如#FF0000。此外，在網(wǎng)頁(yè)設(shè)計(jì)中，要保證網(wǎng)頁(yè)的整潔性和突出網(wǎng)頁(yè)內(nèi)容為主題，所以顏色的運(yùn)用盡可能的保持一致，避免使用對(duì)比鮮明的色彩，滿足瀏覽者閱讀的舒適感。

4結(jié)語

本文對(duì)圖形圖像處理技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)制作中的應(yīng)用進(jìn)行了研究，通過梳理常用的網(wǎng)頁(yè)設(shè)計(jì)制作圖形圖像處理工具明確了各類圖形圖像處理工具在網(wǎng)頁(yè)設(shè)計(jì)制作中的主要用途，再以網(wǎng)頁(yè)的布局、LOGO的設(shè)計(jì)與制作、導(dǎo)航欄的設(shè)計(jì)與制作為對(duì)象闡述了各類工具的圖形圖像處理方法，最后對(duì)圖像的尺寸與規(guī)格處理、圖像的融合處理和網(wǎng)頁(yè)的色彩搭配網(wǎng)頁(yè)設(shè)計(jì)制作圖形圖像處理應(yīng)用技巧進(jìn)行了探討，使讀者能夠更加清晰的了解圖形圖像處理技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)制作中的應(yīng)用方法，為提升網(wǎng)頁(yè)設(shè)計(jì)與制作中圖形圖像處理水平提供參考。

參考文獻(xiàn)：

[1]倪洋.網(wǎng)頁(yè)設(shè)計(jì)[M].上海:上海人民美術(shù)出版社,2016.

[2]張醒芝，林琳.PHOTOSHOP在網(wǎng)頁(yè)制作中的應(yīng)用[J].科技展望,2017,27(18):23-24.

[3]許德武.網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)驗(yàn)教程[M].杭州:浙江大學(xué)出版社,2016.

[4]胡國(guó)鋒.Dreamweaver/Fireworks/Flash網(wǎng)頁(yè)設(shè)計(jì)[M].北京:電子工業(yè)出版社,2016.

[5]柴訪.淺談IllustratorCS5在圖形制作中的應(yīng)用[J].電腦知識(shí)與技術(shù),2017,13(27):237-238.

作者:歐中亞 單位:河南經(jīng)貿(mào)職業(yè)學(xué)院