基于Photoshop的網頁圖像處理應用研究

祝曉銘 王艷平

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

關鍵詞：網頁設計;圖像處理;Photoshop;界面設計

中圖分類號：TP391.41 文獻標識碼：A 文章編號：1004-9436（2020）21-00-02

0 引言

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

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

1 應用內容

1.1 “形”與“色”

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

做好網頁設計“形”與“色”的處理，是網頁“功能性”和“藝術性”的協調與融合，可以引導瀏覽者按照設計者在網頁界面中精心構建好的視覺指引，逐層遞進地瀏覽吸收網頁傳遞的各類感官信息，實現設計思想和瀏覽行為的有效統一。

1.2 格式選擇

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

GIF格式，在Photoshop中可以完成簡單的逐幀動畫直接代入網頁中使用，這個特點是其他圖像格式所不具備的，極大地方便了設計者的基礎動畫展示需求。

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

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

根據界面結構布局以及圖片自身展示功用的不同，圖片存儲格式也會面臨多種選擇，設計者也要結合網頁在不同的外顯設備和網絡傳輸速率等因素進行綜合考慮。

1.3 設計尺寸

現在流行的顯示器分辨率主要集中在1920px*1080px，在此分辨率下，網頁的主題顯示區域設置在1200Px即可達到較優效果。考慮到如今仍有可能使用到1024px*800px的低顯分辨率，設計者可以將主體顯示區域設置為1002px，以確保即使在1024px分辨率下使用時網頁橫屏效果仍然會得到全幅顯示而不會出現左右橫向滾動條。一般來說，Banner的高度不宜超過500px，這也是為保證Banner部分在通用分辨率下仍能得到全景顯示。

隨著各類網絡移動應用端的快速發展和層出不窮，瀏覽者會出現針對網頁界面的不同尺寸顯示需求，現有的技術解決手段主要為響應式網頁以及在此基礎上出現的自適應網頁。這里需要注意的是，響應式網頁是自動調整頁面布局結構后出現不同的展現方式，而自適應式網頁則是自動適應不同設備的分辨率要求來顯示同樣的布局樣式。因此在網頁圖像設計尺寸上要有綜合考慮和預測把握，做大不做小，以備實現圖像（片）在等比縮放后依然能夠保持良好的顯示效果。

2 界面設計

2.1 構成元素

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

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

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

2.2 圖層分類

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

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

圖層是整個Photoshop中應用最多的技術手段，其圖層遮罩功能和混合樣式功能的使用，可以使網頁中的圖像在設計處理后呈現千姿百態的視覺設計效果。

2.3 色彩設置

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

色彩信息具有強調和突出信息點的作用，主要依靠色彩的飽和度與明度、色相區分度和色塊面積比來完成[4]。設計者在確立了網頁主體色調后，可以使用Photoshop中的吸管工具在選定的主題色周邊色域選取合適的臨近色作為輔助配色，通過多種臨近色的選取使之圍繞主題色延伸出相同的色彩取向，構成網頁界面的基礎主色調。主色調確定之后可以根據色相的補色關系來選取調和色，一般是選擇主色的對比色作為調和色使用。主體色調和輔助色調的和諧搭配可以使整個界面色調和諧特色鮮明，引發瀏覽者良好的閱讀體驗。

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

2.4 圖像合成

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

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

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

3 結語

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

參考文獻：

[1] 林歡，譚浩，趙江洪.圖片優勢效應在網頁設計中的應用[J].包裝工程，2014（9）：13-16.

[2] 嚴晨，楊智坤.網頁設計中的功能性與藝術性關系研究[J].科技與出版，2011（6）：59-60.

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

[4] 王心遠.網頁設計中的色彩應用——以電子產品官方網站為例[J].藝術探索，2014（1）：106-108.

[5] 馬曉林，陳靜文.網頁設計的表現特征[J].電影評介，2012（4）：83-85.

作者簡介：祝曉銘（1977—），男，山東青州人，碩士，工程師，研究方向：計算機網絡和網站設計。

王艷平（1977—），女，山東青州人，碩士，中學一級教師，研究方向：美術教育。