基于Photoshop的網(wǎng)頁圖像處理應(yīng)用研究

祝曉銘 王艷平

摘要：網(wǎng)頁設(shè)計(jì)是平面設(shè)計(jì)借助計(jì)算機(jī)多媒體技術(shù)在網(wǎng)絡(luò)媒介上做出的藝術(shù)展現(xiàn)形式的演進(jìn)，Photoshop在網(wǎng)頁整體的頁面布局、色彩搭配以及文字排版效果設(shè)計(jì)等方面的應(yīng)用作用突出。本文旨在對(duì)Photoshop在網(wǎng)頁圖像處理方面的應(yīng)用規(guī)律和設(shè)計(jì)技巧進(jìn)行分析研究，以期為網(wǎng)頁設(shè)計(jì)者提供理論借鑒和實(shí)踐依據(jù)。

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

中圖分類號(hào)：TP391.41 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1004-9436（2020）21-00-02

0 引言

Photoshop是國外Adobe公司開發(fā)和發(fā)行的專業(yè)圖像處理軟件，它具有強(qiáng)大的圖像處理功能，可以進(jìn)行圖像編輯和圖片設(shè)計(jì)工作，也可以進(jìn)行精確細(xì)致的矢量圖形繪制。PS主要用于處理位圖，即通常所說的以像素構(gòu)成的數(shù)字圖像，其使用范圍集中在平面類的各種應(yīng)用，如廣告設(shè)計(jì)、影像創(chuàng)意、后期修飾、網(wǎng)頁（包括各類APP界面）設(shè)計(jì)等。

在現(xiàn)代計(jì)算機(jī)網(wǎng)絡(luò)環(huán)境下，原有廣義范圍內(nèi)的平面設(shè)計(jì)宣傳內(nèi)容借助計(jì)算機(jī)網(wǎng)絡(luò)和多媒體信息技術(shù)于網(wǎng)絡(luò)媒介載體上演進(jìn)而出現(xiàn)了新型的信息傳播方式——網(wǎng)頁。網(wǎng)頁由文字和圖片作為最基本的構(gòu)成元素，按照一定的布局架構(gòu)樣式和色彩組合運(yùn)用的原則進(jìn)行頁面的規(guī)劃設(shè)計(jì)制作，也就是我們通常所說的網(wǎng)頁設(shè)計(jì)。Photoshop是設(shè)計(jì)者進(jìn)行網(wǎng)頁設(shè)計(jì)及其圖像處理的“最佳工具”。

1 應(yīng)用內(nèi)容

1.1 “形”與“色”

《設(shè)計(jì)的法則》中提出：要增加人們的辨識(shí)力，讓人回想起重要信息，可以利用“圖片優(yōu)勢(shì)效應(yīng)”。用圖片加上文字，并且確認(rèn)兩者強(qiáng)調(diào)的是同一信息，以便達(dá)到最佳效果[1]。鑒于此，設(shè)計(jì)者通過Photoshop完成界面設(shè)計(jì)的“形”和“色”設(shè)計(jì)可以確保圖片優(yōu)勢(shì)效應(yīng)的實(shí)現(xiàn)。在這里，所謂“形”，主要是指網(wǎng)頁設(shè)計(jì)中占比最大的圖形設(shè)計(jì)，其作用效果偏于網(wǎng)頁信息傳遞這一功能性的實(shí)現(xiàn)，即如何由一張“白紙”從無到有做起，來實(shí)現(xiàn)關(guān)于網(wǎng)頁界面的布局排版和各類元素組合處理。設(shè)計(jì)作品應(yīng)該更好地為設(shè)計(jì)內(nèi)容服務(wù)，努力尋求更為準(zhǔn)確的、合乎情理的設(shè)計(jì)語言成為設(shè)計(jì)家的首要任務(wù)[2]，這就使網(wǎng)頁設(shè)計(jì)中功能性應(yīng)該擺在藝術(shù)性之前。而“色”主要指的是網(wǎng)頁色彩設(shè)計(jì)的藝術(shù)性體現(xiàn)，即界面在充分保障信息傳遞功能的同時(shí)，充分發(fā)揮色彩作為第一視覺形式語言自身凸顯的強(qiáng)大視覺沖擊力和意識(shí)感染力。通過高品質(zhì)的色彩處理手段和設(shè)計(jì)效果來引起網(wǎng)頁瀏覽者的瀏覽興趣和互動(dòng)熱情，以此提升網(wǎng)頁瀏覽體驗(yàn)。

做好網(wǎng)頁設(shè)計(jì)“形”與“色”的處理，是網(wǎng)頁“功能性”和“藝術(shù)性”的協(xié)調(diào)與融合，可以引導(dǎo)瀏覽者按照設(shè)計(jì)者在網(wǎng)頁界面中精心構(gòu)建好的視覺指引，逐層遞進(jìn)地瀏覽吸收網(wǎng)頁傳遞的各類感官信息，實(shí)現(xiàn)設(shè)計(jì)思想和瀏覽行為的有效統(tǒng)一。

1.2 格式選擇

一般來說，網(wǎng)頁設(shè)計(jì)中常見的圖像（片）格式主要是JPEG、GIF和PNG三種，其具體的存儲(chǔ)格式可以按照界面設(shè)計(jì)的不同使用需要進(jìn)行選擇。除去需設(shè)計(jì)者周知的圖像格式屬性，三種格式在Photoshop使用中也有各自的顯著特點(diǎn)，值得引起注意。

GIF格式，在Photoshop中可以完成簡(jiǎn)單的逐幀動(dòng)畫直接代入網(wǎng)頁中使用，這個(gè)特點(diǎn)是其他圖像格式所不具備的，極大地方便了設(shè)計(jì)者的基礎(chǔ)動(dòng)畫展示需求。

PNG格式在Photoshop中可以完成真正意義上的背景透明處理，明顯區(qū)別于GIF格式的“假透明”（只能在存儲(chǔ)色范圍內(nèi)實(shí)現(xiàn)單一背景色透明，范圍外使用時(shí)會(huì)出現(xiàn)毛刺和白邊），比較適合Buttons/按鈕、Icon/小圖標(biāo)以及Background/背景色的使用。

JPEG格式在Photoshop中可以完成最為豐富的色彩處理，重點(diǎn)適合Banner圖片以及大幅版面圖片的使用。同時(shí)，JPEG格式還支持極限效果的壓縮處理，適合不講求品質(zhì)的Web圖像高效顯示。

根據(jù)界面結(jié)構(gòu)布局以及圖片自身展示功用的不同，圖片存儲(chǔ)格式也會(huì)面臨多種選擇，設(shè)計(jì)者也要結(jié)合網(wǎng)頁在不同的外顯設(shè)備和網(wǎng)絡(luò)傳輸速率等因素進(jìn)行綜合考慮。

1.3 設(shè)計(jì)尺寸

現(xiàn)在流行的顯示器分辨率主要集中在1920px*1080px，在此分辨率下，網(wǎng)頁的主題顯示區(qū)域設(shè)置在1200Px即可達(dá)到較優(yōu)效果?？紤]到如今仍有可能使用到1024px*800px的低顯分辨率，設(shè)計(jì)者可以將主體顯示區(qū)域設(shè)置為1002px，以確保即使在1024px分辨率下使用時(shí)網(wǎng)頁橫屏效果仍然會(huì)得到全幅顯示而不會(huì)出現(xiàn)左右橫向滾動(dòng)條。一般來說，Banner的高度不宜超過500px，這也是為保證Banner部分在通用分辨率下仍能得到全景顯示。

隨著各類網(wǎng)絡(luò)移動(dòng)應(yīng)用端的快速發(fā)展和層出不窮，瀏覽者會(huì)出現(xiàn)針對(duì)網(wǎng)頁界面的不同尺寸顯示需求，現(xiàn)有的技術(shù)解決手段主要為響應(yīng)式網(wǎng)頁以及在此基礎(chǔ)上出現(xiàn)的自適應(yīng)網(wǎng)頁。這里需要注意的是，響應(yīng)式網(wǎng)頁是自動(dòng)調(diào)整頁面布局結(jié)構(gòu)后出現(xiàn)不同的展現(xiàn)方式，而自適應(yīng)式網(wǎng)頁則是自動(dòng)適應(yīng)不同設(shè)備的分辨率要求來顯示同樣的布局樣式。因此在網(wǎng)頁圖像設(shè)計(jì)尺寸上要有綜合考慮和預(yù)測(cè)把握，做大不做小，以備實(shí)現(xiàn)圖像（片）在等比縮放后依然能夠保持良好的顯示效果。

2 界面設(shè)計(jì)

2.1 構(gòu)成元素

網(wǎng)頁的布局設(shè)計(jì)構(gòu)成主要包括Logo/標(biāo)志、Navigation/導(dǎo)航（欄）、Banner/橫幅（廣告）、Content/內(nèi)容、Links/鏈接和Copyright/版權(quán)等部分。設(shè)計(jì)者利用Photoshop建立第一張空白圖層，再按照網(wǎng)頁界面構(gòu)成的基本元素來劃分相應(yīng)板塊的內(nèi)容組成，逐步疊加適用素材內(nèi)容，進(jìn)行不同圖片顏色間的調(diào)和處理，直至完整的界面效果圖設(shè)計(jì)完成。

Banner部分是界面設(shè)計(jì)中尺寸、位置占比最大的部分，也是使用Photoshop最多的部分。圖片是文字以外最早引入網(wǎng)絡(luò)中的多媒體對(duì)象，它傳達(dá)信息的直觀性與寓意性遠(yuǎn)遠(yuǎn)超過文字，而且圖片的引入也大大美化了網(wǎng)絡(luò)頁面[3]。Banner圖片主要包含兩類形式：一是直接利用相對(duì)完整的能夠基本符合視覺傳達(dá)主題的圖像素材，再在其中添加主題描述文字、導(dǎo)航鏈接圖標(biāo)等;二是直接在空白圖層上，根據(jù)視覺傳達(dá)主題搜尋適合素材，通過設(shè)計(jì)者的圖形創(chuàng)意進(jìn)行素材組合以實(shí)現(xiàn)網(wǎng)頁主題的內(nèi)容表達(dá)。

內(nèi)容部分主要體現(xiàn)為文字板塊間的相互排列和組合，要注重主次板塊間的層次結(jié)構(gòu)和相互對(duì)比度，主要的標(biāo)題內(nèi)容易使用粗而黑的襯線結(jié)構(gòu)字體樣式，正文內(nèi)容則適合使用纖細(xì)的非襯線字體樣式并且降低透明度，以免文字板塊大面積重色破壞主題畫面協(xié)調(diào)。還要注重適度擴(kuò)大字體行間距以做好留白處理，避免字體密集效果帶來的視覺擁擠。

2.2 圖層分類

Photoshop圖像處理中使用最多的技術(shù)應(yīng)用即設(shè)計(jì)圖層的合成，界面效果圖的總體形成即由每一板塊構(gòu)成元素所包含的設(shè)計(jì)圖層組成。界面的規(guī)劃設(shè)計(jì)從最初的原始空白圖層到色彩豐富、頁面元素眾多的成型網(wǎng)頁，圖層的數(shù)量隨著設(shè)計(jì)過程的深入會(huì)呈幾何倍數(shù)增加，并將包含許多效果相似的圖層，如果不提前加以科學(xué)的分類管理，勢(shì)必會(huì)影響到設(shè)計(jì)效率和效果呈現(xiàn)。因此在設(shè)計(jì)之初，就要根據(jù)界面布局構(gòu)成元素做好“六大板塊”的分類結(jié)構(gòu)文件夾，甚至可以在一類文件夾下根據(jù)組成元素或位置劃分，再形成多個(gè)圖形或字體文件夾以方便管理，其效果在實(shí)現(xiàn)板塊元素的等量復(fù)制時(shí)顯得尤為突出。

界面設(shè)計(jì)的初始階段可以按照不同板塊所屬位置以幾何形態(tài)確定其尺寸大小，對(duì)圖層進(jìn)行不同顏色間且為單一色相的顏色填充，并適度降低顏色的飽和度和透明度，使其疊加于空白背景圖層之上。這樣既可以實(shí)現(xiàn)界面上不同板塊的比重劃分，又能夠形成網(wǎng)頁界面的基礎(chǔ)色調(diào)，以形成用色參照來進(jìn)行網(wǎng)頁素材的選取及調(diào)和使用。

圖層是整個(gè)Photoshop中應(yīng)用最多的技術(shù)手段，其圖層遮罩功能和混合樣式功能的使用，可以使網(wǎng)頁中的圖像在設(shè)計(jì)處理后呈現(xiàn)千姿百態(tài)的視覺設(shè)計(jì)效果。

2.3 色彩設(shè)置

網(wǎng)站不同的主題定位以及服務(wù)對(duì)象范圍對(duì)于網(wǎng)頁界面的主體色調(diào)的要求不盡相同，而主體色調(diào)對(duì)于網(wǎng)頁瀏覽行為會(huì)起到重要的引導(dǎo)作用，使用Photoshop做好界面主體色調(diào)確立，主要圍繞頁面的色彩取向和色相調(diào)和發(fā)揮作用。主體色調(diào)主導(dǎo)網(wǎng)頁整體的風(fēng)格，是由界面中占比最大的色系來完成視覺觀感的確立，即畫面中不論是繪制的圖形背景或是使用的大幅面圖片的基礎(chǔ)色調(diào)，都會(huì)使瀏覽者產(chǎn)生對(duì)于網(wǎng)站網(wǎng)頁主體色調(diào)的認(rèn)知。

色彩信息具有強(qiáng)調(diào)和突出信息點(diǎn)的作用，主要依靠色彩的飽和度與明度、色相區(qū)分度和色塊面積比來完成[4]。設(shè)計(jì)者在確立了網(wǎng)頁主體色調(diào)后，可以使用Photoshop中的吸管工具在選定的主題色周邊色域選取合適的臨近色作為輔助配色，通過多種臨近色的選取使之圍繞主題色延伸出相同的色彩取向，構(gòu)成網(wǎng)頁界面的基礎(chǔ)主色調(diào)。主色調(diào)確定之后可以根據(jù)色相的補(bǔ)色關(guān)系來選取調(diào)和色，一般是選擇主色的對(duì)比色作為調(diào)和色使用。主體色調(diào)和輔助色調(diào)的和諧搭配可以使整個(gè)界面色調(diào)和諧特色鮮明，引發(fā)瀏覽者良好的閱讀體驗(yàn)。

Banner圖片在界面中尤其是在網(wǎng)頁瀏覽的首屏效果中占比巨大，因此設(shè)計(jì)者應(yīng)高度重視Banner部分圖形的設(shè)計(jì)制作和圖片素材的處理使用，一定要符合網(wǎng)頁確定的主題色調(diào)，在文字或圖標(biāo)方面予以不同色相之間的互補(bǔ)調(diào)和;內(nèi)容部分則包括用于信息傳遞的大幅文字部分，這些部分位置占比巨大，一般不易使用色相和純度過高的顏色，以免影響圖形圖像部分形成的主體色調(diào)，在Photoshop中也可以通過降低其透明度使之做好減幅處理;文字以外的各類用于裝飾的圖標(biāo)、圖像、裝飾線以及格式化后作為裝飾圖形出現(xiàn)的文字，因?yàn)轶w積位置占幅較小，因此可以使用色相相對(duì)鮮亮的顏色作為點(diǎn)綴來發(fā)揮調(diào)和作用。

2.4 圖像合成

網(wǎng)頁是通過視覺元素引入，被用戶關(guān)注，并實(shí)現(xiàn)信息的傳達(dá)，這就要求網(wǎng)頁的設(shè)計(jì)必須適應(yīng)受眾的視覺在心理和生理上需求的特點(diǎn)[5]。在網(wǎng)頁界面中利用圖片的視覺優(yōu)先傳播效應(yīng)，可以形成網(wǎng)頁信息傳達(dá)焦點(diǎn)實(shí)現(xiàn)主題信息的快速傳遞，并且圖片是參與深層次語義過程的信息載體，可以大大提高瀏覽者對(duì)于信息接收的記憶程度。網(wǎng)頁界面中的圖片主要包括照片素材和圖形設(shè)計(jì)兩大類別，根據(jù)其位置、大小、色調(diào)、表現(xiàn)形式等不同，發(fā)揮的視覺傳達(dá)作用而有所不同。

照片素材的選用要符合網(wǎng)頁主題信息的視覺傳達(dá)要求，照片受前期拍攝效果的影響一般需要進(jìn)行裁剪處理;其次應(yīng)對(duì)照片素材的細(xì)節(jié)部分進(jìn)行一定降噪處理，通過對(duì)其明度和飽和度的處理來減少雜色，最大限度恢復(fù)照片的圖像拍攝細(xì)節(jié);最后還要對(duì)照片進(jìn)行色調(diào)的微細(xì)調(diào)整，使其能夠完全融入頁面主體色調(diào)之中。

網(wǎng)頁中重要主題的配圖一般應(yīng)進(jìn)行單獨(dú)的圖片創(chuàng)意設(shè)計(jì)，根據(jù)頁面信息主題尋找素材進(jìn)行圖像的再加工處理，搭配簡(jiǎn)潔醒目的精彩設(shè)計(jì)文案，可以更好地實(shí)現(xiàn)網(wǎng)頁主題信息的傳達(dá)目的和瀏覽效果。在圖片設(shè)計(jì)框選擇范圍內(nèi)選定基礎(chǔ)主色調(diào)后，每一個(gè)融入的設(shè)計(jì)素材都要做好邊緣虛化處理，可以點(diǎn)選其圖層作整體選取后，在選擇范圍上作像素級(jí)的收緊和羽化處理后反轉(zhuǎn)選區(qū)進(jìn)行刪除處理，可以使素材形象較好地融入主體背景;再者要利用圖層蒙版或疊加模式并選擇不同的參數(shù)設(shè)置，做好素材間的融合或透疊的效果處理，實(shí)現(xiàn)主題突出豐富多彩的圖片效果;最后還要注意圖像合成處理時(shí)元素的虛實(shí)對(duì)比處理，通常使用模糊處理以及降低色彩明度、飽和度的方法來實(shí)現(xiàn)網(wǎng)頁空間感的塑造。

3 結(jié)語

Photoshop在網(wǎng)頁圖像處理的過程中功能強(qiáng)大而效果多變，設(shè)計(jì)者要以網(wǎng)頁信息的充分視覺傳達(dá)為設(shè)計(jì)依據(jù)，充分尊重瀏覽者的閱讀習(xí)慣以積極營造良好的用戶體驗(yàn);同時(shí)不應(yīng)拘泥于固有的書本參數(shù)設(shè)置，而是要充分借助計(jì)算機(jī)圖像處理快捷、直觀、多變的設(shè)計(jì)效果。遵循藝術(shù)創(chuàng)作規(guī)律和形式美法則來多做藝術(shù)探索和設(shè)計(jì)實(shí)踐，在創(chuàng)意多變中尋求設(shè)計(jì)統(tǒng)一，實(shí)現(xiàn)網(wǎng)頁設(shè)計(jì)的賞心悅目和與眾不同。

參考文獻(xiàn)：

[1] 林歡，譚浩，趙江洪.圖片優(yōu)勢(shì)效應(yīng)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].包裝工程，2014（9）：13-16.

[2] 嚴(yán)晨，楊智坤.網(wǎng)頁設(shè)計(jì)中的功能性與藝術(shù)性關(guān)系研究[J].科技與出版，2011（6）：59-60.

[3] 董海斌，王麗梅，孫浩章.網(wǎng)頁界面設(shè)計(jì)中的平面視覺元素[J].包裝工程，2010（4）：89-91.

[4] 王心遠(yuǎn).網(wǎng)頁設(shè)計(jì)中的色彩應(yīng)用——以電子產(chǎn)品官方網(wǎng)站為例[J].藝術(shù)探索，2014（1）：106-108.

[5] 馬曉林，陳靜文.網(wǎng)頁設(shè)計(jì)的表現(xiàn)特征[J].電影評(píng)介，2012（4）：83-85.

作者簡(jiǎn)介：祝曉銘（1977—），男，山東青州人，碩士，工程師，研究方向：計(jì)算機(jī)網(wǎng)絡(luò)和網(wǎng)站設(shè)計(jì)。

王艷平（1977—），女，山東青州人，碩士，中學(xué)一級(jí)教師，研究方向：美術(shù)教育。