何露露

摘 要：隨著網(wǎng)絡(luò)信息技術(shù)的不斷發(fā)展，人們對(duì)網(wǎng)頁(yè)的要求也在逐漸提升。傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)中存在的弊端很多，主要表現(xiàn)為色彩的搭配不當(dāng)?shù)?。設(shè)計(jì)方式合理得當(dāng)則能夠吸引更多用戶的眼球，而Photoshop的圖片處理功能則必不可少。文章以傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)中存在的問題作為出發(fā)點(diǎn)，對(duì)Photoshop在網(wǎng)頁(yè)美工設(shè)計(jì)中的應(yīng)用進(jìn)行分析。

關(guān)鍵詞：Photoshop；網(wǎng)頁(yè)美工；設(shè)計(jì)；應(yīng)用

在信息化的時(shí)代，越來(lái)越多的人已經(jīng)無(wú)法脫離開網(wǎng)絡(luò)平臺(tái)。在大多數(shù)時(shí)間里，我們都會(huì)利用網(wǎng)絡(luò)進(jìn)行新聞熱點(diǎn)與信息的瀏覽。比起傳統(tǒng)的信息閱讀方式，人們更重視網(wǎng)頁(yè)的布局與整體結(jié)構(gòu)是否得當(dāng)。只有做出精美的網(wǎng)頁(yè)美工設(shè)計(jì)，才能夠使網(wǎng)站的經(jīng)濟(jì)效益增加，令大多數(shù)的用戶予以接受。

1 Photoshop在網(wǎng)頁(yè)制作中的應(yīng)用

1.1 網(wǎng)站圖標(biāo)制作

網(wǎng)站想要吸引用戶的注意，就必須以鮮明的形式呈現(xiàn)在大眾的面前。而圖標(biāo)則是其鮮明性、突出性的代表。同時(shí)，圖標(biāo)也是一個(gè)網(wǎng)站的整體核心部分，它作為形象標(biāo)識(shí)，必須能夠讓用戶一眼看出其中的用意所在，并且以簡(jiǎn)約、大方的形式呈現(xiàn)在用戶的面前。以“騰訊印象”的圖標(biāo)制作為例，它主要是以兩個(gè)小企鵝為圖像，在畫面中以手拉手的形態(tài)走出。圖標(biāo)的整體布局是從英文的結(jié)構(gòu)出發(fā)，印象可以用“image”表達(dá)出來(lái)，其中的子母“m”就代表了兩個(gè)共同牽手的企鵝。并且兩只可愛企鵝以大小形態(tài)相同的方式制作出來(lái)，更能夠形象生動(dòng)地為用戶傳達(dá)騰訊印象的含義。在網(wǎng)站的字體制作上，騰訊網(wǎng)以外延方式加入泡泡的形式引入文字，代表了人與人之間的語(yǔ)言溝通。再如，“人人網(wǎng)”在設(shè)計(jì)當(dāng)中也是非常獨(dú)特的，我們都知道它的主要功能是在擴(kuò)展交際圈的基礎(chǔ)上實(shí)現(xiàn)好友之間的交流。在人人網(wǎng)中，用戶可以與熟悉的人分享此刻的心情，上傳一些照片。所以，在圖片的制作當(dāng)中，充分體現(xiàn)了這一目標(biāo)。從這兩個(gè)例子中我們也可以看出，網(wǎng)站圖標(biāo)制作的好處與特點(diǎn)。在圖標(biāo)的形成中，主要運(yùn)用了Photoshop中的測(cè)量工具功能。其中的鉛筆工具主要測(cè)量圖標(biāo)的尺寸，根據(jù)圖樣的大小進(jìn)行調(diào)整，利用此工具先在模板上繪制出“矢量圖”，也就是圖標(biāo)的基礎(chǔ)框架，再沿著模板中所形成的調(diào)制路徑進(jìn)行復(fù)制。這種方式制作出來(lái)的圖標(biāo)不僅大小適宜，并且形象也更加鮮明生動(dòng)[1]。

1.2 網(wǎng)頁(yè)中顏色的搭配

顏色的搭配也是Photoshop中一個(gè)比較重要的功能。顏色選擇得當(dāng)可以使整個(gè)網(wǎng)頁(yè)看起來(lái)更加和諧，并且形式更加融洽。在網(wǎng)頁(yè)的美工設(shè)計(jì)中，Photoshop應(yīng)用也非常廣泛。首先，在圖片軟件的處理頂層有便捷的色彩搭配形式。設(shè)計(jì)人員可以根據(jù)自己的需要對(duì)圖片的元素與環(huán)境進(jìn)行整體確認(rèn)。將單獨(dú)的圖片進(jìn)行區(qū)域劃分，以結(jié)構(gòu)調(diào)整的方式進(jìn)行顏色的整體化布局。另外，還設(shè)計(jì)人員還可以將一個(gè)圖片進(jìn)行層次劃分，在每個(gè)層次的獨(dú)立部分進(jìn)行色彩調(diào)整。這樣，設(shè)計(jì)人員可以在整體布局的情況下看到相對(duì)全面的顏色空間。另外，Photoshop功能中還有一個(gè)搭配方式分析的系統(tǒng)，如果顏色得當(dāng)，系統(tǒng)則會(huì)靜止不動(dòng)。如果顏色搭配得太過突兀，系統(tǒng)會(huì)進(jìn)行自動(dòng)化調(diào)整與轉(zhuǎn)換。最后，網(wǎng)頁(yè)的色彩保護(hù)功能也是Photoshop中所獨(dú)有的。它主要是根據(jù)系統(tǒng)的相關(guān)指令進(jìn)行調(diào)整。設(shè)計(jì)者可以在色彩板之中進(jìn)行隨意調(diào)制，色彩板會(huì)給予設(shè)計(jì)者不同的顏色搭配模板，其中不同方式的搭配手段操作系統(tǒng)的提示規(guī)則也是不同的[2]。

1.3 網(wǎng)頁(yè)背景圖片的制作

網(wǎng)頁(yè)背景圖片的制作也是美工設(shè)計(jì)中的一個(gè)重要方向。設(shè)計(jì)者首先進(jìn)行圖片選擇，在制作表格中進(jìn)行單元編輯。以每個(gè)單元格為中心，將圖片進(jìn)行逐一列舉。在Photoshop的選擇當(dāng)中，有圖案的自定義編制功能。設(shè)計(jì)人員可以任意選擇一張背景，在“編輯”目錄上進(jìn)行填充。填充的作用主要是使圖片更有立體感和動(dòng)態(tài)感?！皫瑒?dòng)畫”的用途是Photoshop主要部分之一。簡(jiǎn)單來(lái)說(shuō)，就是設(shè)計(jì)者為了使網(wǎng)頁(yè)更加豐富，對(duì)多幅圖片進(jìn)行選擇。軟件的功能是將這些圖片進(jìn)行最佳狀態(tài)組合，以不同的形式呈現(xiàn)在設(shè)計(jì)者的面前。設(shè)計(jì)者可以選擇出一種最為直觀的組織形式予以呈現(xiàn)。另外，圖片的組合狀態(tài)一般容量都較大，設(shè)計(jì)師可以進(jìn)行“GIF”的格式轉(zhuǎn)換，既不占用文件空間，又能夠以較為穩(wěn)定的狀態(tài)呈現(xiàn)在用戶的面前。從網(wǎng)頁(yè)背景的細(xì)致化角度來(lái)說(shuō)，Photoshop軟件還可以對(duì)圖片的邊緣進(jìn)行修改，以調(diào)整頁(yè)眉與頁(yè)腳的形式進(jìn)行細(xì)化。頁(yè)眉頁(yè)腳的設(shè)置得當(dāng)可以使整個(gè)頁(yè)面看起來(lái)更加有質(zhì)感，并且也更利于圖片的修改與完善[3]。

1.4 調(diào)整網(wǎng)頁(yè)速率

速率的調(diào)整也是Photoshop軟件中的一項(xiàng)強(qiáng)大功能。它能夠使網(wǎng)頁(yè)以更加精美的形式呈現(xiàn)在用戶的面前。首先，在高速的社會(huì)發(fā)展下，人們最不喜歡的就是等待。而速率調(diào)整正是為用戶解決這一實(shí)際問題，使他們能夠快速地瀏覽信息。例如：圖片越大，打開的過程也越慢。在Photoshop系統(tǒng)的支持下，圖片能夠根據(jù)網(wǎng)速的大小進(jìn)行適當(dāng)?shù)恼{(diào)整，對(duì)內(nèi)容進(jìn)行統(tǒng)一化設(shè)置。用戶在瀏覽信息時(shí)，只要將相關(guān)鏈接點(diǎn)擊，就可以了解信息中所出現(xiàn)的內(nèi)容。另外，Photoshop軟件還有色彩刪減的功能，它能夠以圖片和畫面的整體性作為出發(fā)點(diǎn)，將邊緣的一些無(wú)用色彩切換掉，使圖片的體積相對(duì)減少，并且能夠保留圖中網(wǎng)頁(yè)中的重點(diǎn)。以web為其主要的存儲(chǔ)方式。在圖片的有效整合上，一般用Dreamweaver完成切片。如果圖片被相對(duì)放大，那么文字所占用的空間就會(huì)相對(duì)減少，但清晰度則會(huì)更強(qiáng)。另外，也可以將某一網(wǎng)頁(yè)以“縮放”的形式呈現(xiàn)出來(lái)，這樣運(yùn)行的速度也會(huì)有所提升。

1.5 網(wǎng)頁(yè)中背景底紋的制作

背景底紋的制作能夠令網(wǎng)頁(yè)看起來(lái)更加豐富多彩，使用戶能夠更清晰地了解到圖片與文章的實(shí)際內(nèi)容名與要求。設(shè)計(jì)者在對(duì)背景底紋進(jìn)行處理時(shí)，可以利用Photoshop軟件的制作程序進(jìn)行設(shè)定。首先，軟件內(nèi)部有色彩過濾器的功能，設(shè)計(jì)者選擇出一個(gè)圖片作為網(wǎng)頁(yè)的背景，以它的底紋顏色作為核心，進(jìn)行標(biāo)準(zhǔn)化配置。過濾器的作用是使圖片在平移的過程中進(jìn)行底紋色彩調(diào)配。以“右上方”為平移中心，以“半幅圖畫”為目標(biāo)體，保持整個(gè)畫面重疊的基礎(chǔ)上進(jìn)行調(diào)試，并且在環(huán)繞的狀態(tài)下予以區(qū)分。設(shè)計(jì)者在工具箱內(nèi)進(jìn)行整體化選擇，利用圖片的對(duì)稱性進(jìn)行工具化分割。分割過程中要沿著兩端平面進(jìn)行移動(dòng)，以水平或者是垂直的狀態(tài)予以平移。最后，將分割后的圖片進(jìn)行復(fù)制，將兩個(gè)部分整合在一起。將圖片的上下左右4個(gè)角進(jìn)行無(wú)縫連接，以Photoshop軟件中的自動(dòng)順連的方式進(jìn)行設(shè)定，使圖片的邊界能夠更加清晰地連接到一起，達(dá)到徹底融合的效果。這種方式也可以稱為“圖片邊界化”，能夠使底紋更加緊密地聯(lián)系在一起。實(shí)現(xiàn)邊緣的過度與消化，使圖片以方塊拼接狀呈現(xiàn)在設(shè)計(jì)者的面前。在底紋色彩設(shè)置成功后，設(shè)計(jì)者如果要加入一些藝術(shù)文字，可以在Photoshop中的標(biāo)題添加功能處進(jìn)行處理，在每一層圖片上都加入適當(dāng)?shù)慕忉專⒃趦膳栽O(shè)置動(dòng)態(tài)場(chǎng)景。這樣的好處是可以進(jìn)行圖片與文字的及時(shí)修改與自動(dòng)切換。

2 Photoshop在網(wǎng)頁(yè)設(shè)計(jì)中的優(yōu)勢(shì)

2.1 靈活性強(qiáng)

Photoshop作為一種網(wǎng)頁(yè)設(shè)計(jì)的美工化軟件，能夠?qū)崿F(xiàn)設(shè)計(jì)工作的靈活性與自如化。在圖片的設(shè)計(jì)上，操作者可以按照網(wǎng)頁(yè)的實(shí)際比例進(jìn)行規(guī)劃，適當(dāng)?shù)貙?duì)圖片層次進(jìn)行劃分，對(duì)大小進(jìn)行整合。并且如果兩幅圖片的適用性不是很強(qiáng)，設(shè)計(jì)者可以在整體畫面的質(zhì)感不受影響的情況下進(jìn)行元素的增減。另外，Photoshop軟件還可以實(shí)現(xiàn)圖片的動(dòng)態(tài)化過程，實(shí)現(xiàn)結(jié)構(gòu)布局的重置。用戶可以根據(jù)圖片的層次劃分進(jìn)行相關(guān)的鏈接狀態(tài)查看。

2.2 可修改性強(qiáng)

在傳統(tǒng)的設(shè)計(jì)過程中，如果出現(xiàn)圖片大小不得當(dāng)或者是文字與圖片不符的狀況要將整體網(wǎng)頁(yè)進(jìn)行重置。而Photoshop軟件的設(shè)計(jì)上則可以體現(xiàn)強(qiáng)大的可修改性。設(shè)計(jì)人員如果對(duì)網(wǎng)頁(yè)圖片的某一部分不滿意，可以根據(jù)圖片中所劃分出來(lái)的位置與層次，進(jìn)行分階段、有目標(biāo)性的改進(jìn)。例如：在一個(gè)網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中，設(shè)計(jì)者覺得藝術(shù)字與圖片的顏色搭配不是非常理想，他們可以單獨(dú)對(duì)特定的文字進(jìn)行修改即可，點(diǎn)入對(duì)應(yīng)的鏈接，對(duì)原有圖層進(jìn)行重新設(shè)計(jì)。

2.3 為瀏覽者提供了更多的方便

在Photoshop軟件的應(yīng)用中，瀏覽者不必再擔(dān)心瀏覽的時(shí)間問題，網(wǎng)頁(yè)設(shè)計(jì)工藝的美化能夠使得設(shè)計(jì)頁(yè)面的主題更加鮮明，中心更加突出。它使顏色與圖片以及文字的關(guān)系進(jìn)行合理化的調(diào)試，使內(nèi)容更加直觀與具體地表現(xiàn)出來(lái)。多元素合理化的組合使得瀏覽者不再處于應(yīng)接不暇的狀態(tài)，他們可以深入到網(wǎng)頁(yè)主體部分當(dāng)中，并且以“鏈接”發(fā)送的形式給予他們更多、更全面的選擇空間。

3 Photoshop網(wǎng)頁(yè)設(shè)計(jì)的原則

在利用Photoshop對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)計(jì)時(shí)，設(shè)計(jì)者也應(yīng)該在以下幾個(gè)方面予以關(guān)注。第一，設(shè)計(jì)初期的網(wǎng)頁(yè)比例調(diào)配非常重要。設(shè)計(jì)者如果用一般的文檔形式進(jìn)行保存，就要注意分辨率的大小與像素的高低；其次，在網(wǎng)頁(yè)圖片的格式化轉(zhuǎn)換過程中，應(yīng)該注意以圖片的大小為標(biāo)準(zhǔn)，選擇相應(yīng)的體積可容納格式；最后，設(shè)計(jì)者要注意網(wǎng)頁(yè)結(jié)構(gòu)的劃分，要按照Photoshop軟件中的標(biāo)準(zhǔn)參照線進(jìn)行區(qū)分，分割線上呈現(xiàn)的是主要內(nèi)容，分割線下可以加一些輔助性元素。