Photoshop在網(wǎng)頁美工設(shè)計中的應(yīng)用分析

何露露

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.1 靈活性強(qiáng)

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

2.2 可修改性強(qiáng)

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

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

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

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

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