photoshop是一個功能強大的影象處理軟體，可以對各種格式的影象檔案進行非常精細與獨特的處理，不僅適用於廣告用圖、美術攝影作品的處理，也廣泛用於網頁影象元素的處理。下面本站小編為大家搜尋整理了關於網頁製作中PS影象處理的應用，歡迎參考閱讀，希望對大家有所幫助!想了解更多相關資訊請持續關注我們應屆畢業生培訓網!
網頁製作的工具很多，目前使用最為廣泛的是Dreamweaver(簡稱DW)。實際上DW僅是一個網頁元素的組織者，它把構成網頁的各文字、影象、聲音、視訊、動畫等元素有機的組織在一起。網頁的美觀效果主要取決於文字、影象的有機結合。在網頁製作過程中，Photoshop有著極大的作用。但很多人對Photoshop這個圖象軟體在網頁製作中對網頁元素的整合作用認識不足，沒有使這個軟體發揮其應有的作用。針對此現象，本文根據實踐經驗對Photoshop在網頁製作中影象處理的應用進行闡述。
一、正確輸出影象，優化網頁速度
網頁的下載速度不僅直接影響到使用者的瀏覽體驗、還關係到網頁在搜尋引擎中的排名引數。因此，優化網頁、使之能快速下載是網頁製作中必須考慮的.因素。優化網頁，提高下載速度的方法有很多，其中影象的正確處理極其重要。
1.採用合適的影象精度
網頁是提供給閱讀者在顯示器上觀看的，根據顯示器的特性，影象的精度一般採用72dpi即可，這是螢幕解析度，太高的解析度並不能增強效果，反而會降低下載速度。有些影象原始檔案的尺寸很大，而在網頁中顯示的區域是有限的，很多時候設計者採用在DW中縮小影象來實現，在DW中縮小影象並沒有真正改變影象的大小，下載需要較長的時間，所以在輸出影象時，要採用合適的大小，降低輸出的精度。
2.選擇合適的顏色深度
Gif格式的影象檔案色彩深度越少檔案也就越小，在肉眼可以接受的範圍內，儘量將gif檔案的色彩數量降低，對影象檔案的大小進行有效的優化。如小圖示、按鈕、背景圖案等影象檔案對色彩的要求並不高，這些影象輸出一般採用gif格式。對顏色要求不高的影象，採用64色的影象對比256色影象，輸出後可以少掉一半還多的位元組數，且效果完全能滿足視覺要求。每個網站這種小影象往往會有幾百張，每張圖片都節省一些，最終可以節省很多空間。
3.輸出正確的影象格式
不同的影象格式由於採用的壓縮方法不同，顯示效果差不多的影象其檔案大小會有很大的差別。一般情況下色彩較少的圖片使用png-8、gif格式檔案，色彩變化豐富的影象則使用jpg格式，如果要使用在多種背景中，需要輸出為透明格式時就需要選用gif格式。[1]Jpg格式的圖片，需綜合對比壓縮品質高、中、低下的效果，儘量選擇效果好且壓縮品質較低的選項。輸出影象時，可使用Photoshop的“儲存為web所用格式”功能來輸出，使用“儲存為web所用格式”可以壓縮約50%。
二、使用Photoshop進行網頁佈局
在網站規劃建設中，網頁佈局設計是其至關重要的一環，它關係到網站能否吸引更多人的眼球，直接關係到網站的點選率。所以網頁佈局設計是否美觀、規範、合理越來越受到網頁製作師的重視。
1.佈局規劃
在設計網站的過程中，事先進行佈局規劃也是提高網站開發效率的有效方法。設計者在設計網站的過程中需要反覆與客戶進行交流、溝通、修改，而客戶更看重就是佈局的效果與使用的便捷性。當佈局確定後，內容的組織、程式的設計就由程式設計者完成了。避免了程式設計好後反覆修改介面的複雜性。Photoshop在設計佈局中還有如下優勢：
Photoshop的靈魂是圖層，每層可以放置不同的元素，圖層之間可以相互連結，也可單獨存放，每個圖層上的影象位置可以隨意挪動，每個圖層上的影象大小、色階、亮度、飽和度透明度等可單獨設定。如此靈活的功能，完全可以讓設計者隨心所欲設計而不受任何約束。
一個開啟、下載速度慢的網站是沒有價值的，心理學研究表明一個網站的下載時間超過10秒，人們會自動轉向其它網站。決定下載速度的因素很多，其中網頁大小、網頁元素的優化和網路配置是重要的因素。其中網頁大小與網頁元素的優化是設計者需要解決的，使用Photoshop設計的網頁經過裁切、整合處理後體積會小得多。
2.佈局要點
網頁文件一般為1007*600和708*800畫素，解析度為72畫素。一般情況下，大型網站不要超過3屏。網站背景顏色與檔案顏色要統一協調，導航字型一般用黑體，正文一般用宋體，其它字型可能會因為客戶的瀏覽器不相容而給工作帶來麻煩。如果為增強頁面效果用到其它字型，最好在Photoshop中製作然後切分。圖文搭配要合理，影象大小要合乎美學原則，不能太大，一般用縮圖較好，如果要顯示更多的圖片細節，不妨給縮圖連結一個大的圖片。
要精確定位網頁元素，可用對齊參考線的方法來實現，而參考線的精確定位可以藉助標尺和網格來實現。網站的Logo、Banner或導航條等都是事先設計好的，有固定大小，在做這些區域時尺寸一定要按照這些元素尺寸設計，否則進入DW整合時，可能出現空邊或撐開表格的現象。
3.活用“切片”
利用Photoshop做好佈局效果圖後，關鍵的一步就是“切片”。只有正確地切片，DW才能對效果圖進行有效的整合。
切片時要用好參考線。參考線能保證我們切出的影象在同一表格中的尺寸統一協調，有效避免“留白”和“爆邊”。為提高Logo和Banner的顯示效果，如果效果圖中存在Logo和Banner，必須將這些切片然後在DW中用Logo和Banner的原文件替換。大的影象必須切分成均勻的影象，這樣可以提高網頁下載速度。導航條一般都是特別設計的，其效果在DW難以實現，所以也必須切片後供後期使用。儲存切片的資料夾必須是英文名字，儲存切片時建議使用用“檔案—儲存為web所用格式”命令。如無特殊要求，切片的儲存格式要求使用Gif格式。