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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2LOGO設(shè)計制作

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

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

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

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

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

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

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

3.2圖像的融合處理

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

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

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

4結(jié)語

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

參考文獻(xiàn)：

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

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

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

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

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

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