Photoshop與網(wǎng)頁(yè)制作之間的完美結(jié)合

馬 力

武漢軟件工程職業(yè)學(xué)院，湖北武漢 430205

網(wǎng)頁(yè)設(shè)計(jì)的工具很多，目前使用最為廣泛的是Dreamweaver(簡(jiǎn)稱(chēng)DW)。本文針對(duì)Photoshop與網(wǎng)頁(yè)制作之間的關(guān)系進(jìn)行闡述。

1 Photoshop可優(yōu)化圖像質(zhì)量

優(yōu)化網(wǎng)頁(yè)、使之能快速下載是網(wǎng)頁(yè)制作中必須考慮的因素。Photoshop可優(yōu)化圖像質(zhì)量，提高網(wǎng)頁(yè)速度優(yōu)化網(wǎng)頁(yè)頁(yè)面，圖像的正確處理極其重要。

1.1 采用合適的圖像精度

網(wǎng)頁(yè)是提供給閱讀者在顯示器上觀看的，根據(jù)顯示器的特性，圖像的精度一般采用72dpi即可，這是屏幕分辨率，太高的分辨率并不能增強(qiáng)效果，反而會(huì)降低下載速度。有些圖像原始文件的尺寸很大，而在網(wǎng)頁(yè)中顯示的區(qū)域是有限的，很多時(shí)候設(shè)計(jì)者采用在DW中縮小圖像來(lái)實(shí)現(xiàn)，在DW中縮小圖像并沒(méi)有真正改變圖像的大小，下載需要較長(zhǎng)的時(shí)間，所以在輸出圖像時(shí)，要采用合適的大小，降低輸出的精度。

1.2 選擇合適的顏色深度

Gif格式的圖像文件色彩深度越少文件也就越小，在肉眼可以接受的范圍內(nèi)，盡量將gif文件的色彩數(shù)量降低，對(duì)圖像文件的大小進(jìn)行有效的優(yōu)化。如小圖標(biāo)、按鈕、背景圖案等圖像文件對(duì)色彩的要求并不高，這些圖像輸出一般采用gif格式。對(duì)顏色要求不高的圖像，采用64色的圖像對(duì)比256色圖像，輸出后可以少掉一半還多的字節(jié)數(shù)，且效果完全能滿(mǎn)足視覺(jué)要求。每個(gè)網(wǎng)站這種小圖像往往會(huì)有幾百?gòu)垼繌垐D片都節(jié)省一些，最終可以節(jié)省很多空間。

1.3 輸出正確的圖像格式

不同的圖像格式由于采用的壓縮方法不同，顯示效果差不多的圖像其文件大小會(huì)有很大的差別。一般情況下色彩較少的圖片使用png-8、gif格式文件，色彩變化豐富的圖像則使用jpg格式，如果要使用在多種背景中，需要輸出為透明式時(shí)就需要選用gif格式。jpg格式的圖片，需綜合對(duì)比壓縮品質(zhì)高、中、低下的效果，盡量選擇效果好且壓縮品質(zhì)較低的選項(xiàng)。輸出圖像時(shí)，可使用Photoshop的“存儲(chǔ)為web所用格式”功能來(lái)輸出，使用“存儲(chǔ)為web所用格式”可以壓縮約50%。

2 Photoshop可調(diào)整網(wǎng)頁(yè)的布局結(jié)構(gòu)

2.1 布局規(guī)劃

在設(shè)計(jì)網(wǎng)站的過(guò)程中，事先進(jìn)行布局規(guī)劃也是提高網(wǎng)站開(kāi)發(fā)效率的有效方法。設(shè)計(jì)者在設(shè)計(jì)網(wǎng)站的過(guò)程中需要反復(fù)與客戶(hù)進(jìn)行交流、溝通、修改，而客戶(hù)更看重就是布局的效果與使用的便捷性。當(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è)打開(kāi)、下載速度慢的網(wǎng)站是沒(méi)有價(jià)值的，心理學(xué)研究表明一個(gè)網(wǎng)站的下載時(shí)間超過(guò)10s，人們會(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.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)榭蛻?hù)的瀏覽器不兼容而給工作帶來(lái)麻煩。如果為增強(qiáng)頁(yè)面效果用到其它字體，最好在Photoshop中制作然后切分。圖文搭配要合理，圖像大小要合乎美學(xué)原則，不能太大，一般用縮略圖較好，如果要顯示更多的圖片細(xì)節(jié)，不妨給縮略圖鏈接一個(gè)大的圖片。要精確定位網(wǎng)頁(yè)元素，可用對(duì)齊參考線(xiàn)的方法來(lái)實(shí)現(xiàn)，而參考線(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)空邊或撐開(kāi)表格的現(xiàn)象。

2.3 活用“切片”

利用Photoshop做好布局效果圖后，關(guān)鍵的一步就是“切片”。只有正確地切片，DW才能對(duì)效果圖進(jìn)行有效的整合。切片時(shí)要用好參考線(xiàn)。參考線(xiàn)能保證我們切出的圖像在同一表格中的尺寸統(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格式。

在DW中對(duì)切片進(jìn)行整合時(shí)，要考慮以下幾個(gè)原則：能使用純顏色代替區(qū)域不要使用圖像文件，能用小圖像代替的就不要用大圖像，切片區(qū)域要盡量整齊規(guī)整以防止在使用過(guò)程中表格錯(cuò)位。

3 Photoshop可用來(lái)設(shè)計(jì)圖像特效

在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，往往需要一些特殊的效果美化網(wǎng)頁(yè)。如虛線(xiàn)、變幻線(xiàn)、陰影、圓角表格、異型表格裝飾等等，這些效果在DW中無(wú)法直接實(shí)現(xiàn)，可以先在Photoshop中繪制相應(yīng)效果，然后裁切成小圖片在DW中進(jìn)行整合即可。

在網(wǎng)頁(yè)設(shè)計(jì)中，最常用的字體是黑體和宋體，其它的字體在客戶(hù)瀏覽器中可能不支持，為了保證客戶(hù)所看到的網(wǎng)頁(yè)效果與設(shè)計(jì)效果一致，對(duì)于標(biāo)題、廣告等需要使用特殊字體的內(nèi)容，都需要在Photoshop中設(shè)計(jì)好后，轉(zhuǎn)換成圖像文件整合到網(wǎng)頁(yè)中。

在網(wǎng)頁(yè)中經(jīng)常看到一些大面積的漸變圖像，如漸變的網(wǎng)頁(yè)背景、表格背景、漸變導(dǎo)航條、漸變線(xiàn)等等，在網(wǎng)頁(yè)中的漸變圖像一般是單向漸變（徑向或橫向漸變），對(duì)于這樣的圖像，可以沿漸變方向切一小塊（保證切片包含色階變化的所有信息），然后在DW中進(jìn)行填充而達(dá)到大面積的漸變效果。使用小圖像代替大圖像而得到同樣的顯示效果，可以大大縮小文件的大小，提高下載速度。同樣道理，網(wǎng)頁(yè)背景一般也是使用小圖像進(jìn)行填充來(lái)實(shí)現(xiàn)整個(gè)網(wǎng)頁(yè)的背景。

4 Photoshop應(yīng)用自動(dòng)化提高效率

Photoshop提供了一些自動(dòng)化的功能，可以大提高網(wǎng)頁(yè)的制作效率。可應(yīng)用的自動(dòng)化功能有“批處理”、“動(dòng)作”、“腳本”、“歷史記錄”等，這些功能相互配合更加實(shí)用。如像冊(cè)網(wǎng)站，像冊(cè)網(wǎng)站、產(chǎn)品展示網(wǎng)站等，一般是先展示各圖像的縮略圖，然后鏈接相應(yīng)的大圖。當(dāng)需展示的圖像較多時(shí)，制作縮略圖也是一件很大的工程。利用Photoshop的批處理功能可以快速的制作縮略圖。基本方法如下：

1）錄制動(dòng)作

打開(kāi)動(dòng)作面板，啟動(dòng)錄制按鈕。手動(dòng)完成一個(gè)圖像的縮略圖制作過(guò)程。Photoshop的動(dòng)作功能會(huì)把操作的過(guò)程完整的記錄下來(lái)。動(dòng)作錄制完后可以對(duì)動(dòng)作進(jìn)行修改，把錄制過(guò)程中的一些無(wú)用、重復(fù)、錯(cuò)誤的步驟刪除。

2）檢驗(yàn)動(dòng)作

打開(kāi)一圖像文件，直接運(yùn)行錄制好的動(dòng)作，檢驗(yàn)動(dòng)作效果是否理想。如果需展示的圖像有橫向和豎向的，建議豎向與橫向的縮略圖動(dòng)作單獨(dú)錄制，以保證各文件的比例協(xié)調(diào)。

3）批處理運(yùn)行動(dòng)作

打開(kāi)“批處理”面板，選定錄制好的動(dòng)作，指定源文件夾與目的文件夾，指定目的文件的命名規(guī)則，點(diǎn)擊確定就可以一次性制作大量的縮略圖了。

在網(wǎng)頁(yè)制作中還有很多圖像的規(guī)范化操作都可以使用以上方法，在此不一一列舉。

5 Photoshop可提供多套皮膚效果的制作

我們經(jīng)常看到很多網(wǎng)站，用戶(hù)可以根據(jù)個(gè)人喜歡選擇各種皮膚。

有些網(wǎng)站會(huì)在不同的季節(jié)以不同的風(fēng)格顯示。更換皮膚常用的方法，一是利用CSS樣式實(shí)現(xiàn)，一種是利用數(shù)據(jù)庫(kù)實(shí)現(xiàn)。不管哪一種方法，都必須具備多皮膚所需要的圖片。所謂的多皮膚，實(shí)質(zhì)就是有多套不同的布局外觀可供用戶(hù)或設(shè)計(jì)者更換。

有些網(wǎng)網(wǎng)站的不同皮膚，其外形特征基本上是一致的，主要是顏色搭配的差別。這類(lèi)皮膚的制作比較容易，只需把一套布局用的圖片復(fù)制一份到另一文件夾，利用Photoshop的動(dòng)作修改各圖片的色階、亮度等信息即可得到多套皮膚。

如果不同的皮膚外形也有差別，需在Photoshop中設(shè)計(jì)一套布局頁(yè)面后，切片輸出并保存好切片圖層。再設(shè)計(jì)不同的頁(yè)面外觀，利用相同的切片圖層對(duì)各套頁(yè)面外觀進(jìn)行切片，即可得到幾組不同的搭配效果。

Photoshop與Dreamweaver的結(jié)合越來(lái)越緊密，圖像是網(wǎng)頁(yè)必不可少的重要元素。在網(wǎng)頁(yè)設(shè)計(jì)中，充分利用好Photoshop的特有功能，不僅可以美化網(wǎng)頁(yè)，提高網(wǎng)頁(yè)的下載速度，還可以提高制作網(wǎng)站的效率。

[1]汪可等.ADOBE PHOTOSHOP CS3標(biāo)準(zhǔn)培訓(xùn)教材[M].北京：人民郵電出版社，2008：395.

[2]譚貞軍，等.中文版Dreamweaver+Flash+Photoshop網(wǎng)頁(yè)制作從入門(mén)到精通[M].北京：清華大學(xué)出版社，2008：315-340.

[3]聶小燕，等.美工神話(huà)Dreamweaver+Photoshop精美網(wǎng)頁(yè)設(shè)計(jì)與制作[M].北京：人民郵電出版社，2006：86.

[4]聶小燕，等.美工神話(huà)Dreamweaver+Photoshop精美網(wǎng)頁(yè)設(shè)計(jì)與制作[M].北京：人民郵電出版社，2006：113.

[5]李曉華，等.PHOTOSHOP CS3圖層通道、蒙版和動(dòng)作技術(shù)詳解[M].北京：兵器工業(yè)出版社，2008：375-390.