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

1、基于Photoshop的網(wǎng)頁圖像處理應(yīng)用研究基于Photoshop的網(wǎng)頁圖像處理應(yīng)用討論9436202121-00-020引言Photoshop是國外Adobe公司開發(fā)和發(fā)行的專業(yè)圖像處理軟件，它具有強大的圖像處理功能，可以進行圖像編輯和圖片設(shè)計工作，也可以進行精確細致的矢量圖形繪制。PS主要用于處理位圖，即通常所說的以像素構(gòu)成的數(shù)字圖像，其使用范圍集中在平面類的各種應(yīng)用，如廣告設(shè)計、影像創(chuàng)意、后期修飾、網(wǎng)頁包括各類APP界面設(shè)計等。在現(xiàn)代計算機網(wǎng)絡(luò)環(huán)境下，原有廣義范圍內(nèi)的平面設(shè)計宣揚內(nèi)容借助計算機網(wǎng)絡(luò)和多媒體信息技術(shù)于網(wǎng)絡(luò)媒介載體上演進而出現(xiàn)了新型的信息傳播方式網(wǎng)頁。網(wǎng)頁由文字和圖片作為最基

2、本的構(gòu)成元素，根據(jù)肯定的布局架構(gòu)樣式和色彩組合運用的原則進行頁面的規(guī)劃設(shè)計制作，也就是我們通常所說的網(wǎng)頁設(shè)計。Photoshop是設(shè)計者進行網(wǎng)頁設(shè)計及其圖像處理的“最正確工具。1應(yīng)用內(nèi)容1.1“形與“色設(shè)計的法則中提出：要增加人們的辨識力，讓人回想起重要信息，可以利用“圖片優(yōu)勢效應(yīng)。用圖片加上文字，并且確認兩者強調(diào)的是同一信息，以便到達最正確效果1。鑒于此，設(shè)計者通過Photoshop完成界面設(shè)計的“形和“色設(shè)計可以確保圖片優(yōu)勢效應(yīng)的實現(xiàn)。在這里，所謂“形，主要是指網(wǎng)頁設(shè)計中占比最大的圖形設(shè)計，其作用效果偏于網(wǎng)頁信息傳遞這一功能性的實現(xiàn)，即如何由一張“白紙從無到有做起，來實現(xiàn)關(guān)于網(wǎng)頁界面的布局

3、排版和各類元素組合處理。設(shè)計作品應(yīng)當(dāng)更好地為設(shè)計內(nèi)容服務(wù)，努力尋求更為精確的、合乎情理的設(shè)計語言成為設(shè)計家的首要任務(wù)2，這就使網(wǎng)頁設(shè)計中功能性應(yīng)當(dāng)擺在藝術(shù)性之前。而“色主要指的是網(wǎng)頁色彩設(shè)計的藝術(shù)性表達，即界面在充分保障信息傳遞功能的同時，充分發(fā)揮色彩作為第一視覺形式語言自身凸顯的強大視覺沖擊力和意識感染力。通過高品質(zhì)的色彩處理手段和設(shè)計效果來引起網(wǎng)頁掃瞄者的掃瞄興趣和互動熱情，以此提升網(wǎng)頁掃瞄體驗。做好網(wǎng)頁設(shè)計“形與“色的處理，是網(wǎng)頁“功能性和“藝術(shù)性的協(xié)調(diào)與融合，可以引導(dǎo)掃瞄者根據(jù)設(shè)計者在網(wǎng)頁界面中細心構(gòu)建好的視覺指引，逐層遞進地掃瞄汲取網(wǎng)頁傳遞的各類感官信息，實現(xiàn)設(shè)計思想和掃瞄行為的有效

4、統(tǒng)一。1.2格式選擇一般來說，網(wǎng)頁設(shè)計中常見的圖像片格式主要是JPEG、GIF和PNG三種，其具體的存儲格式可以根據(jù)界面設(shè)計的不同使用需要進行選擇。除去需設(shè)計者周知的圖像格式屬性，三種格式在Photoshop使用中也有各自的顯著特點，值得引起留意。GIF格式，在Photoshop中可以完成簡潔的逐幀動畫直接代入網(wǎng)頁中使用，這個特點是其他圖像格式所不具備的，極大地方便了設(shè)計者的基礎(chǔ)動畫展示需求。PNG格式在Photoshop中可以完成真正意義上的背景透亮處理，明顯區(qū)分于GIF格式的“假透亮只能在存儲色范圍內(nèi)實現(xiàn)單一背景色透亮，范圍外使用時會出現(xiàn)毛刺和白邊，比較適合Buttons/按鈕、Icon/

5、小圖標(biāo)以及Background/背景色的使用。JPEG格式在Photoshop中可以完成最為豐富的色彩處理，重點適合Banner圖片以及大幅版面圖片的使用。同時，JPEG格式還支持極限效果的壓縮處理，適合不講求品質(zhì)的Web圖像高效顯示。依據(jù)界面結(jié)構(gòu)布局以及圖片自身展示功用的不同，圖片存儲格式也會面臨多種選擇，設(shè)計者也要結(jié)合網(wǎng)頁在不同的外顯設(shè)備和網(wǎng)絡(luò)傳輸速率等因素進行綜合考慮。1.3設(shè)計尺寸如今流行的顯示器辨別率主要集中在1920px*1080px，在此辨別率下，網(wǎng)頁的主題顯示區(qū)域設(shè)置在1200Px即可到達較優(yōu)效果。考慮到如今仍有可能使用到1024px*800px的低顯辨別率，設(shè)計者可以將主體顯

6、示區(qū)域設(shè)置為1002px，以確保即使在1024px辨別率下使用時網(wǎng)頁橫屏效果仍舊會得到全幅顯示而不會出現(xiàn)左右橫向滾動條。一般來說，Banner的高度不宜超過500px，這也是為保證Banner部分在通用辨別率下仍能得到全景顯示。隨著各類網(wǎng)絡(luò)移動應(yīng)用端的快速進展和層出不窮，掃瞄者會出現(xiàn)針對網(wǎng)頁界面的不同尺寸顯示需求，現(xiàn)有的技術(shù)解決手段主要為響應(yīng)式網(wǎng)頁以及在此基礎(chǔ)上出現(xiàn)的自適應(yīng)網(wǎng)頁。這里需要留意的是，響應(yīng)式網(wǎng)頁是自動調(diào)整頁面布局結(jié)構(gòu)后出現(xiàn)不同的呈現(xiàn)方式，而自適應(yīng)式網(wǎng)頁則是自動適應(yīng)不同設(shè)備的辨別率要求來顯示同樣的布局樣式。因此在網(wǎng)頁圖像設(shè)計尺寸上要有綜合考慮和預(yù)報把握，做大不做小，以備實現(xiàn)圖像片在等

7、比縮放后照舊能夠保持良好的顯示效果。2界面設(shè)計2.1構(gòu)成元素網(wǎng)頁的布局設(shè)計構(gòu)成主要包括Logo/標(biāo)志、Navigation/導(dǎo)航欄、Banner/橫幅廣告、Content/內(nèi)容、Links/鏈接和Copyright/版權(quán)等部分。設(shè)計者利用Photoshop建立第一張空白圖層，再根據(jù)網(wǎng)頁界面構(gòu)成的基本元素來劃分相應(yīng)板塊的內(nèi)容組成，逐步疊加適用素材內(nèi)容，進行不同圖片顏色間的調(diào)和處理，直至完好的界面效果圖設(shè)計完成。Banner部分是界面設(shè)計中尺寸、位置占比最大的部分，也是使用Photoshop最多的部分。圖片是文字以外最早引入網(wǎng)絡(luò)中的多媒體對象，它傳達信息的直觀性與寓意性遠遠超過文字，而且圖片的引入

8、也大大美化了網(wǎng)絡(luò)頁面3。Banner圖片主要包含兩類形式：一是直接利用相對完好的能夠基本符合視覺傳達主題的圖像素材，再在其中添加主題描述文字、導(dǎo)航鏈接圖標(biāo)等;二是直接在空白圖層上，依據(jù)視覺傳達主題搜尋適合素材，通過設(shè)計者的圖形創(chuàng)意進行素材組合以實現(xiàn)網(wǎng)頁主題的內(nèi)容表達。內(nèi)容部分主要表達為文字板塊間的互相排列和組合，要注重主次板塊間的層次結(jié)構(gòu)和互相對比度，主要的標(biāo)題內(nèi)簡單使用粗而黑的襯線結(jié)構(gòu)字體樣式，正文內(nèi)容則適合使用纖細的非襯線字體樣式并且降低透亮度，以免文字板塊大面積重色破壞主題畫面協(xié)調(diào)。還要注重適度擴大字體行間距以做好留白處理，幸免字體密集效果帶來的視覺擁擠。2.2圖層分類Photoshop

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

10、色間且為單一色相的顏色填充，并適度降低顏色的飽和度和透亮度，使其疊加于空白背景圖層之上。這樣既可以實現(xiàn)界面上不同板塊的比重劃分，又能夠形成網(wǎng)頁界面的基礎(chǔ)色調(diào)，以形成用色參照來進行網(wǎng)頁素材的選取及調(diào)和使用。圖層是整個Photoshop中應(yīng)用最多的技術(shù)手段，其圖層遮罩功能和混合樣式功能的使用，可以使網(wǎng)頁中的圖像在設(shè)計處理后呈現(xiàn)千姿百態(tài)的視覺設(shè)計效果。2.3色彩設(shè)置網(wǎng)站不同的主題定位以及服務(wù)對象范圍對于網(wǎng)頁界面的主體色調(diào)的要求不盡相同，而主體色調(diào)對于網(wǎng)頁掃瞄行為會起到重要的引導(dǎo)作用，使用Photoshop做好界面主體色調(diào)確立，主要圍繞頁面的色彩取向和色相調(diào)和發(fā)揮作用。主體色調(diào)主導(dǎo)網(wǎng)頁整體的風(fēng)格，是由

11、界面中占比最大的色系來完成視覺觀感確實立，即畫面中不管是繪制的圖形背景或是使用的大幅面圖片的基礎(chǔ)色調(diào)，都會使掃瞄者產(chǎn)生對于網(wǎng)站網(wǎng)頁主體色調(diào)的認知。色彩信息具有強調(diào)和突出信息點的作用，主要依靠色彩的飽和度與明度、色相區(qū)分度和色塊面積比來完成4。設(shè)計者在確立了網(wǎng)頁主體色調(diào)后，可以使用Photoshop中的吸管工具在選定的主題色周邊色域選取合適的接近色作為幫助配色，通過多種接近色的選取使之圍繞主題色延長出相同的色彩取向，構(gòu)成網(wǎng)頁界面的基礎(chǔ)主色調(diào)。主色調(diào)確定之后可以依據(jù)色相的補色關(guān)系來選取調(diào)和色，一般是選擇主色的對比色作為調(diào)和色使用。主體色調(diào)和幫助色調(diào)的和諧搭配可以使整個界面色調(diào)和諧特色鮮亮，引發(fā)掃瞄

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

13、視覺元素引入，被用戶關(guān)注，并實現(xiàn)信息的傳達，這就要求網(wǎng)頁的設(shè)計必需適應(yīng)受眾的視覺在心理和生理上需求的特點5。在網(wǎng)頁界面中利用圖片的視覺優(yōu)先傳播效應(yīng)，可以形成網(wǎng)頁信息傳達焦點實現(xiàn)主題信息的快速傳遞，并且圖片是參加深層次語義過程的信息載體，可以大大提高掃瞄者對于信息接收的記憶程度。網(wǎng)頁界面中的圖片主要包括照片素材和圖形設(shè)計兩大類別，依據(jù)其位置、大小、色調(diào)、表現(xiàn)形式等不同，發(fā)揮的視覺傳達作用而有所不同。照片素材的選用要符合網(wǎng)頁主題信息的視覺傳達要求，照片受前期拍攝效果的影響一般需要進行裁剪處理;其次應(yīng)對比片素材的詳情部分進行肯定降噪處理，通過對其明度和飽和度的處理來削減雜色，最大限度恢復(fù)照片的圖像拍

14、攝詳情;最終還要對比片進行色調(diào)的微細調(diào)整，使其能夠完全融入頁面主體色調(diào)之中。網(wǎng)頁中重要主題的配圖一般應(yīng)進行單獨的圖片創(chuàng)意設(shè)計，依據(jù)頁面信息主題查找素材進行圖像的再加工處理，搭配簡潔醒目的精彩設(shè)計文案，可以更好地實現(xiàn)網(wǎng)頁主題信息的傳達目的和掃瞄效果。在圖片設(shè)計框選擇范圍內(nèi)選定基礎(chǔ)主色調(diào)后，每一個融入的設(shè)計素材都要做好邊緣虛化處理，可以點選其圖層作整體選取后，在選擇范圍上作像素級的收緊和羽化處理后反轉(zhuǎn)選區(qū)進行刪除處理，可以使素材形象較好地融入主體背景;再者要利用圖層蒙版或疊加模式并選擇不同的參數(shù)設(shè)置，做好素材間的融合或透疊的效果處理，實現(xiàn)主題突出豐富多彩的圖片效果;最終還要留意圖像合成處理時元素的虛實對比處理，通常