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