Photoshop在網頁美工設計中的應用分析

何露露

摘 要：隨著網絡信息技術的不斷發展，人們對網頁的要求也在逐漸提升。傳統的網頁設計中存在的弊端很多，主要表現為色彩的搭配不當等。設計方式合理得當則能夠吸引更多用戶的眼球，而Photoshop的圖片處理功能則必不可少。文章以傳統網頁設計中存在的問題作為出發點，對Photoshop在網頁美工設計中的應用進行分析。

關鍵詞：Photoshop；網頁美工；設計；應用

在信息化的時代，越來越多的人已經無法脫離開網絡平臺。在大多數時間里，我們都會利用網絡進行新聞熱點與信息的瀏覽。比起傳統的信息閱讀方式，人們更重視網頁的布局與整體結構是否得當。只有做出精美的網頁美工設計，才能夠使網站的經濟效益增加，令大多數的用戶予以接受。

1 Photoshop在網頁制作中的應用

1.1 網站圖標制作

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

1.2 網頁中顏色的搭配

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

1.3 網頁背景圖片的制作

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

1.4 調整網頁速率

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

1.5 網頁中背景底紋的制作

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

2 Photoshop在網頁設計中的優勢

2.1 靈活性強

Photoshop作為一種網頁設計的美工化軟件，能夠實現設計工作的靈活性與自如化。在圖片的設計上，操作者可以按照網頁的實際比例進行規劃，適當地對圖片層次進行劃分，對大小進行整合。并且如果兩幅圖片的適用性不是很強，設計者可以在整體畫面的質感不受影響的情況下進行元素的增減。另外，Photoshop軟件還可以實現圖片的動態化過程，實現結構布局的重置。用戶可以根據圖片的層次劃分進行相關的鏈接狀態查看。

2.2 可修改性強

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

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

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

3 Photoshop網頁設計的原則

在利用Photoshop對網頁進行設計時，設計者也應該在以下幾個方面予以關注。第一，設計初期的網頁比例調配非常重要。設計者如果用一般的文檔形式進行保存，就要注意分辨率的大小與像素的高低；其次，在網頁圖片的格式化轉換過程中，應該注意以圖片的大小為標準，選擇相應的體積可容納格式；最后，設計者要注意網頁結構的劃分，要按照Photoshop軟件中的標準參照線進行區分，分割線上呈現的是主要內容，分割線下可以加一些輔助性元素。