使用Photoshop進(jìn)行網(wǎng)頁規(guī)劃的方法探析

摘 要：Photoshop是一款功能強(qiáng)大的圖片處理軟件，可以對(duì)不同格式的圖像進(jìn)行精細(xì)的操作和處理，從而在廣告以及美術(shù)行業(yè)得到了廣泛的應(yīng)用，當(dāng)然在網(wǎng)頁規(guī)劃中也必不可少。本文通過介紹Photoshop在網(wǎng)頁規(guī)劃中的優(yōu)勢和應(yīng)注意的幾個(gè)問題，并結(jié)合相關(guān)理論知識(shí)，提出使用Photoshop進(jìn)行網(wǎng)頁規(guī)劃的方法，以期對(duì)網(wǎng)頁制作人員提供一定的技能指導(dǎo)。

關(guān)鍵詞：Photoshop；網(wǎng)頁規(guī)劃

中圖分類號(hào)：TP317

伴隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展和進(jìn)步，人們的生活與工作也與網(wǎng)絡(luò)有了越來越多的關(guān)系，無論是生活中的上網(wǎng)娛樂，視頻點(diǎn)播，還是各類遠(yuǎn)程教育、企業(yè)宣傳等工作都離不開網(wǎng)站的大力支持。與此同時(shí)，現(xiàn)如今的網(wǎng)頁制作地都非常精美，設(shè)計(jì)也更加獨(dú)特，都吸引著人們的注意。這些成功都離不開網(wǎng)頁制作技術(shù)的快速發(fā)展，其中Photoshop就是網(wǎng)頁規(guī)劃的一個(gè)強(qiáng)大制圖工具，無論是個(gè)人的相片修改，還是各大網(wǎng)站的門戶設(shè)計(jì)，都需要Photoshop的大力支持。在網(wǎng)頁規(guī)劃的過程中，Photoshop能夠充分發(fā)揮其功能，保證圖像的形象標(biāo)識(shí)?，F(xiàn)如今的時(shí)代是品牌的時(shí)代，只有進(jìn)一步加深瀏覽者的第一印象，才能讓網(wǎng)站的知名度有所提升。Photoshop就是為網(wǎng)頁規(guī)劃而提供了這樣的一個(gè)機(jī)會(huì)，可以讓不同行業(yè)的互聯(lián)網(wǎng)行業(yè)工作者能夠進(jìn)行較為廣泛的使用，從而達(dá)到一定的目的。

1 Photoshop在網(wǎng)頁規(guī)劃中的優(yōu)勢

1.1 布局靈活

在網(wǎng)頁的規(guī)劃中，Photoshop具有布局靈活的優(yōu)勢，這為其在不同領(lǐng)域上的使用提供了更加便利的機(jī)會(huì)。之所以Photoshop在網(wǎng)頁規(guī)劃中具有布局靈活的優(yōu)勢，是因?yàn)閳D層的功效，其可以在不同的層次上放置元素，保證在進(jìn)行移動(dòng)的過程中，不會(huì)影響整體的圖像感覺。在圖層上還可以放置鏈接，可以進(jìn)行單獨(dú)存放，也能夠?qū)⑵溥M(jìn)行疊加，保證圖層上的圖像不會(huì)因?yàn)榇笮?、色階以及亮度等原因而出現(xiàn)偏差[1]。Photoshop在網(wǎng)頁規(guī)劃中這樣靈活的操作和設(shè)置，能夠讓設(shè)計(jì)者可以進(jìn)行隨心所欲的設(shè)計(jì)，不會(huì)受到技術(shù)上的約束。但是其他相關(guān)的軟件卻沒有如此之多的自由度，效果也會(huì)降低很多，這是Photoshop在網(wǎng)頁規(guī)劃中發(fā)揮的獨(dú)特作用。

1.2 修改方便

在建設(shè)網(wǎng)站之前，需要跟客戶簽定合同，在合同簽定的過程中，客戶最為關(guān)心的就是能夠建設(shè)成什么樣子的網(wǎng)站，客戶如果拿不到滿意的網(wǎng)站設(shè)計(jì)方案，那么必定導(dǎo)致雙方生意的失敗?？蛻魰?huì)拿走設(shè)計(jì)方案，將其投放給別的設(shè)計(jì)公司，這樣更會(huì)損失公司的利益，無法保證網(wǎng)站規(guī)劃的順利進(jìn)行。而Photoshop具有一個(gè)很好的優(yōu)勢就是修改方便，進(jìn)而公司可以先利用Photoshop做出圖片的效果圖，將其展現(xiàn)給客戶[2]?？蛻粼诖蠖鄶?shù)情況下，都不會(huì)一次就滿意拿到的設(shè)計(jì)，會(huì)提出很多修改方案，這時(shí)就可以利用到Photoshop修改方便的優(yōu)勢，根據(jù)客戶的需求對(duì)設(shè)計(jì)方案進(jìn)行修改，直到得到客戶對(duì)網(wǎng)頁規(guī)劃的肯定。但是如果利用其他的軟件就無法達(dá)到這樣的結(jié)果，不但在修改方案時(shí)費(fèi)時(shí)費(fèi)力，還不一定可以達(dá)到客戶滿意的效果。

1.3 加快瀏覽進(jìn)度

網(wǎng)頁規(guī)劃是否能夠具有美觀和規(guī)范的效果，很大程度上取決于網(wǎng)站是否具有強(qiáng)勁的生命力，這樣才能保證網(wǎng)站是具有價(jià)值的，也就是說，當(dāng)打開一個(gè)網(wǎng)站時(shí)，需要關(guān)注起瀏覽的進(jìn)步，這樣才能體現(xiàn)價(jià)值。心理學(xué)研究表明，如果具有越多的選擇性，那么人的忍耐性相對(duì)就會(huì)較差；如果具有的可選擇性越大，人的忍耐性相對(duì)會(huì)越低?；ヂ?lián)網(wǎng)高速發(fā)展的今天，更是如此，很多同類型的網(wǎng)站無法保留人的注意力[3]。在很多情況下，網(wǎng)站圖片的下載速度不會(huì)多于10秒的時(shí)間，一旦時(shí)間超過，瀏覽網(wǎng)頁的人們就會(huì)馬上關(guān)了這個(gè)網(wǎng)站而轉(zhuǎn)入到其他的網(wǎng)頁進(jìn)行觀賞。這也就是說，下載的速度會(huì)決定很多元素，當(dāng)然這也是很多因素所共同決定的，例如服務(wù)器的配置標(biāo)準(zhǔn)以及網(wǎng)絡(luò)傳輸?shù)慕橘|(zhì)等。只有保證這些條件都相同，那么網(wǎng)頁的大小和優(yōu)化配置就能夠決定網(wǎng)頁規(guī)劃的成功與否。使用Photoshop軟件對(duì)網(wǎng)頁進(jìn)行規(guī)劃，需要在裁切體積和格式變化上進(jìn)行改變，使其能夠進(jìn)一步提升下載速度并提高客戶的點(diǎn)擊率，從而成為網(wǎng)頁規(guī)劃中的重要使用工具。

2 使用Photoshop進(jìn)行網(wǎng)頁規(guī)劃應(yīng)注意的幾個(gè)問題

2.1 網(wǎng)頁文檔尺寸與分辨率

技術(shù)或是相關(guān)操作人員在使用Photoshop進(jìn)行網(wǎng)頁規(guī)劃的過程中，需要考慮到網(wǎng)頁文檔的尺寸與分辨率，保證其能夠進(jìn)行合理的規(guī)劃，不會(huì)因?yàn)橥饨绲臈l件而出現(xiàn)一些意外情況。網(wǎng)頁文檔的尺寸通常將其設(shè)定為708*800像素，其分辨率通常將其設(shè)定為72像素。雖然如此，但是屏幕的分辨率也不能過高，這樣就無法增強(qiáng)預(yù)期的效果，會(huì)讓下載速度降低[4]。這也是為什么比較大型的網(wǎng)站會(huì)在網(wǎng)頁規(guī)劃設(shè)計(jì)中不超過3屏的原因，就能夠在網(wǎng)頁規(guī)劃中達(dá)到很好的效果。

2.2 科學(xué)使用參考線

使用Photoshop進(jìn)行網(wǎng)頁規(guī)劃時(shí)，很重要的一個(gè)問題就是科學(xué)使用參考線，這樣對(duì)于頁面的整體布局具有很好的輔助效果。參考線能夠?qū)W(wǎng)頁的規(guī)劃起到很好的作用，將其分為幾個(gè)板塊，并按照網(wǎng)頁的整體思路，對(duì)整體進(jìn)行考察。因?yàn)榫W(wǎng)頁不同的元素定位的原因，使得要科學(xué)對(duì)待參考線，這樣才能保證在科學(xué)的基礎(chǔ)上完成網(wǎng)頁規(guī)劃的設(shè)計(jì)。要將圖片進(jìn)行切割，但是必須保證其準(zhǔn)確性，不可以在網(wǎng)頁規(guī)劃的過程中出現(xiàn)差錯(cuò)，這樣在整合時(shí)，會(huì)出現(xiàn)整體感官上的差距。因此設(shè)計(jì)人員需要科學(xué)使用參考線，保證在網(wǎng)頁設(shè)計(jì)的過程中不出現(xiàn)差錯(cuò)，最大限度地滿足客戶的基本需求。

2.3 字體，標(biāo)題

網(wǎng)頁規(guī)劃中對(duì)于字體和標(biāo)題具有一定的要求，通常將導(dǎo)航的字體設(shè)置為黑體，而對(duì)正文的要求標(biāo)準(zhǔn)是宋體，瀏覽器對(duì)于其它字體并不兼容，如果執(zhí)意要進(jìn)行使用，會(huì)給調(diào)試的過程帶來很大的弊端，導(dǎo)致工作比較麻煩。如果要加強(qiáng)網(wǎng)絡(luò)效果，那么需要在字體以及標(biāo)題上進(jìn)行努力，對(duì)網(wǎng)頁進(jìn)行規(guī)劃時(shí)需要進(jìn)行全面的考慮，保證圖片和字體的處理不會(huì)影響到整個(gè)頁面的瀏覽效果。因?yàn)槿绻麍D片過大，那么會(huì)導(dǎo)致出現(xiàn)較大的內(nèi)存，占用空間，進(jìn)而無法保證客戶瀏覽速度。

2.4 布局格式

Photoshop需要對(duì)效果圖進(jìn)行設(shè)計(jì)，但是考慮到網(wǎng)頁規(guī)劃的整體效果，可以使用Dreamweaver對(duì)頁面的布局進(jìn)行優(yōu)化，但是布局通常采用不同的模式，只有這樣，才能保證框架被正常的使用[5]。在使用Photoshop進(jìn)行網(wǎng)頁規(guī)劃時(shí)，需要對(duì)以上這些因素進(jìn)行分析，保證在效果圖上不會(huì)出現(xiàn)較大的誤差，與最后的格局保持整體一致，這樣對(duì)于客戶還是自身的網(wǎng)頁設(shè)計(jì)者而言都是很好的選擇。

2.5 圖文搭配

網(wǎng)站規(guī)劃的還體現(xiàn)在對(duì)圖文搭配上，一個(gè)好的網(wǎng)站是具有較多的圖片還是具有較多的文字，都需要根據(jù)不同的行業(yè)而進(jìn)行。但是要根據(jù)規(guī)則進(jìn)行處理。圖片需要根據(jù)不同的空間分布進(jìn)行合理布局，從而保證網(wǎng)站整體的規(guī)劃設(shè)計(jì)。此外，圖片大小要合乎美學(xué)原則，不能太大，一般用縮略圖較好，如果要顯示更多的圖片細(xì)節(jié)，不妨給縮略圖鏈接一個(gè)大的圖片，這就體現(xiàn)出Photoshop的優(yōu)勢。

3 使用Photoshop進(jìn)行網(wǎng)頁規(guī)劃的方法

3.1 網(wǎng)頁頂部圖片制作

使用Photoshop對(duì)網(wǎng)頁進(jìn)行規(guī)劃時(shí)，需要將網(wǎng)頁頂部的圖片放在頁面的頂端，這樣才能充分體現(xiàn)出網(wǎng)站中重要的信息。網(wǎng)頁規(guī)劃中很重要的一個(gè)組成就是能夠在Photoshop的大環(huán)境中將圖片的標(biāo)志放在頂部的文件中，這樣對(duì)背景進(jìn)行修改，可以增加“添加圖層蒙版”按鈕，利用圖層對(duì)網(wǎng)頁進(jìn)行操作。最后使用文字工具對(duì)網(wǎng)站的標(biāo)題進(jìn)行處理，使得其保存為JPG文件，并另存為PSD文件，對(duì)圖層中的各個(gè)信息進(jìn)行保留，直到其對(duì)頂部的圖片進(jìn)行再編輯。網(wǎng)頁頂部圖片制作需要引起設(shè)計(jì)人員的注意，只有這樣才能保證高質(zhì)量地完成網(wǎng)頁制作的工作。

3.2 網(wǎng)頁背景圖片的制作

網(wǎng)頁規(guī)劃的過程中，最為重要的元素就是網(wǎng)頁背景中的圖片，使用Photoshop對(duì)其進(jìn)行簡單的操作，這是網(wǎng)頁美工工作的基礎(chǔ)。在網(wǎng)頁制作時(shí)，最為常用的文件格式就是GIF和JPEG兩種。在Photoshop的使用環(huán)境下，需要進(jìn)行以下命令，來完成圖像文件到顏色模式的轉(zhuǎn)變，那就是“圖像—模式”命令。之后將其保存在文件中，用相應(yīng)的格式進(jìn)行儲(chǔ)存，并讓其達(dá)到可以在不同的文件格式之間進(jìn)行轉(zhuǎn)換。GIF文件需要圖片的背景透明效果作為支撐，這樣網(wǎng)頁規(guī)劃會(huì)有更好的效果。

3.3 網(wǎng)頁底紋處理

利用Photoshop軟件對(duì)網(wǎng)頁進(jìn)行規(guī)劃時(shí)，需要將底色設(shè)定為固定的背景，或是采用一些圖片將其作為背景的底紋，這樣做出來的網(wǎng)頁更能夠吸引人的注意力。用圖像做處理時(shí)需要進(jìn)行反復(fù)的復(fù)制，讓其在整個(gè)屏幕之間，保證作背景圖案的設(shè)計(jì)是“無縫”的。利用Photoshop軟件就能夠生成這種背景圖，保證將圖片選中后，可以利用濾鏡等對(duì)其的環(huán)繞方式進(jìn)行纏繞，對(duì)保證他們在所有位置上的銜接，利用圖章工具對(duì)其進(jìn)行小心的處理，能夠達(dá)到預(yù)期的效果。

因?yàn)橛?jì)算機(jī)的技術(shù)在不斷的發(fā)展過程中，會(huì)出現(xiàn)一些軟件從而滿足人們對(duì)于工作或是生活的需求，這樣網(wǎng)絡(luò)就成為當(dāng)下的代名詞，這也就標(biāo)志著人們必然要與網(wǎng)絡(luò)產(chǎn)生各種各樣的關(guān)系。只有網(wǎng)站的參與才能讓互聯(lián)網(wǎng)變得更加美好。作為服務(wù)的門戶，網(wǎng)站肩負(fù)著重要的使命，因此，很多網(wǎng)絡(luò)公司在網(wǎng)頁的設(shè)計(jì)方面都下足了功夫，利用Photoshop進(jìn)行網(wǎng)頁規(guī)劃就起到了不可替代的作用。

參考文獻(xiàn)：

[1]朱彩華.Photoshop在網(wǎng)頁版式設(shè)計(jì)中的應(yīng)用與技巧[J].電子技術(shù)與軟件工程.2013（11）.

[2]趙杰，劉志宇，邢軍.網(wǎng)頁設(shè)計(jì)與開發(fā)[J].牡丹江師范學(xué)院學(xué)報(bào)（自然科學(xué)版）.2011（03）.

[3]肖正濤，閻漢生，熊巍，游凱.Photoshop色階和曲線工具的對(duì)比分析[J].計(jì)算機(jī)時(shí)代.2012（02）.

[4]劉麗君，陳強(qiáng).淺談Photoshop在網(wǎng)頁制作中的應(yīng)用[J].科技廣場.2011（07）.

[5]王永生，錢俊.PhotoShop中常用的圖形圖像格式[J].廣東印刷.2010（06）.

作者簡介：王韋帆（1979.12-），女，河北唐山人，碩士在讀，研究方向：圖形、圖像處理、3d建筑表現(xiàn)處理、3d虛擬現(xiàn)實(shí)表現(xiàn)處理。

作者單位：蘭州職業(yè)技術(shù)學(xué)院，蘭州 730070