Photo shop在網頁制作中的運用探索

周蓮波

(營口職業技術學院，遼寧 營口 115000)

Photoshop作為目前公認的，功能完善、性能穩定的平面圖像處理軟件，普遍應用于美術設計、二維廣告設計、圖像處理等領域，它擁有方便單獨保存效果的圖層工具、有利于瀏覽下載圖片的切片工具、可以保存為矢量圖形的鋼筆工具等幾大特色，在網站頁面的設計中，發揮著越來越重要的作用。

1 Photoshop在網站頁面設計上的應用

首先，在網站的規劃中，頁面的布局直接影響到整個網站是否易于瀏覽、鏈接、功能區是否醒目、是否能迅速攫取觀者眼球。進行頁面布局經常用到Dreamweaver的表格或者框架工具，這種Dreamweaver自帶的工具簡單、易于修改，很適合簡單的頁面設計。但是對于背景復雜或者導航條、功能模塊不是矩形的情況，就需要運用到Photoshop來進行布局設計了。

Photoshop的圖層工具和強大的圖像處理功能，能夠對整個網站頁面的效果進行完整的設計和修飾。下面就Photoshop進行網頁布局設計的流程進行簡單地介紹。

1.1 首先新建一個圖像文件

寬度和高度取決于網站頁面的大小，一般和瀏覽器的分辨率相對應，常用的分辨率是1280*800像素的話，圖像寬和高就可以設定成1260*780，顏色模式為RGB（紅、綠、藍），這里指的是光的三原色，而不是繪畫的三原色紅、黃、藍，太陽光經過棱鏡折射為光的三原色紅綠藍，其他的顏色都可以由這三種顏色的光疊加而成，形成了最接近大自然的各種繽紛色彩，在Photoshop中，運用RGB顏色的變化來表現光影的效果，能使處理后的圖像作品盡可能貼近現實，使視覺效果能夠與人的視覺感受形成一種溝通，產生心靈的共鳴。

1.2 運用Photoshop進行頁面布局的設計

不同功能的網站，主題不同，設計的方式也是多種多樣。根據科學研究，通常觀者眼球運動造成的熱點效應聚焦于網頁的左上角，也就是說，用戶瀏覽網頁時，首先觀察網頁的左上部和上部，然后再往下閱讀，呈現出類“F”的形狀。所以頁面布局設計上，網站的站標、站名、導航欄、熱點、頭條等最重要的元素應該確保集中在這些關鍵區域內。主題的表現主要是通過造型的設計來體現的，造型的巧妙運用不僅能給觀者帶來極大的視覺享受，而且能更好地表現網站主題，突出網站功能。 基礎的布局有“F”字型、“H”字型、“E”字型、“日”字型、“國”字型等，例如綜合性網站一般都采用“國”字型布局，即最上面是網站的標示以及橫幅廣告條，接下來就是網站的主要內容，左右各一小列為小字標題內容，中間是主要部分，圖文并茂，突出內容來吸引眼球，最下面是網站的一些基本信息如聯系方式、版權聲明等。這種布局結構是最常見的一種類型。

用Photoshop進行頁面設計，尤其在突出設計感，需要用別致的造型強有力的體現網站主題的個人網站、企業網站的設計中，Photoshop因其功能強大的圖像處理能力承擔著重要的作用。在頁面布局環節，可以先用線條在頁面上畫個“T”字，其中豎線偏左些，將畫面分割成三部分，最上面是網站標志、名稱、廣告條，左側是導航欄，右側最大的空間留給網站主要內容；接下來建立不同的圖層，分別把這些內容放在不同的圖層里進行繪制、處理。Photoshop的圖像整合、渲染功能可以輕松完成這些任務。

1.3 運用Photoshop進行網站元素的色彩搭配

色彩是很神奇的東西，美麗而且豐富，它可以代表情感，也可以象征不同的含義。一般來說，紅色是火和血的顏色，熱烈、喜慶，象征生命；黃色是明度最高的顏色，艷麗、明快，象征光明。綠色是大自然的顏色，平和、新鮮，象征安全與穩定；藍色是天空和大海的顏色，整潔、沉靜，象征平和與開闊；白色能給人以純潔與高雅的感覺，象征天真與圣潔。一個網站的頁面在視覺上是一個整體，只有達到了和諧、悅目的視覺效果，才能夠吸引觀者深入了解網站的內容。第一步首先需要確定一種能夠表現網站主題的主體色，選擇主體色后，就可以應用顏色的近似和對比來完成整個頁面的配色方案了。對比色運用得當，可以產生強烈的視覺效果，給觀者也不俗的印象，但是考慮到網頁的適應性，應該盡量讓顏色清淡些或者使用網頁安全色。Photoshop提供了專門的色板面板，為選擇近似色提供了方便。

總之，在頁面設計過程中，只要牢記整個頁面設計的五大原則，即統一、連貫、分割、對比及和諧，把整個頁面當成一個整體來考慮，統一風格、內容連貫、板塊分割清晰、對比鮮明，才能設計出優秀、和諧的頁面來。

2 Photoshop在網站元素設計上的應用

一個完整的網站包含很多必備的元素，其中LOGO、廣告欄GIF動畫、背景底紋、導航按鈕等都可以運用Photoshop進行簡單快捷的操作。

2.1 網站LOGO制作

一個好的網站LOGO，設計上需要富于個性、新穎獨特、簡練明朗、通俗易記，并且符合美學原理，尤其要突出辨別性及獨特性。例如新浪網，新浪的LOGO中i字母上的點用了表象性手法處理成一只眼睛，而這又使整個字母i象一個小火炬，這樣，即向人們傳達了“世界在你眼中”的理念，激發人們對網絡世界的好奇，又使人們容易記住新浪網的域名。”例如人人網，它的LOGO由兩個抽象的人字變形，人字成圈形寓意每個人的人際圈，同時倆個人字中間發生交集。象征著人人網是一個人與人的溝通、分享平臺，分享真實、溝通快樂。

通常企業標志設計出來，既可能放大到海報、門匾上，也可能縮小到胸卡、名片上，是需要使用專門制作矢量圖形的工具來設計，保證放大縮小都不失真，例如Illustrater。不過Photoshop的鋼筆工具既可以用來繪制矢量圖，又可以將圖片保存為較小的JPG格式，解決了矢量圖文件過大，無法上傳網頁的缺點。

2.2 廣告欄GIF動畫的制作

廣告欄一般位于LOGO的右側，居于網頁醒目的位置，內容一般是廣告或者是企業精神、口號等，基本上都是采取圖像自動切換、反復播放的模式，用Photoshop和ImageReady軟件的配合，可以做出既簡單又易于網頁存儲的GIF動畫文件，它避免了SWF自動播放需要安裝插件的弊端，而且操作簡單、容易上手。下面以一條500*200像素的廣告條為例，詳細列下操作步驟供讀者參考。

首先新建500*200像素的新文件；將4張素材圖片分別復制粘貼到文件的1、2、3、4圖層里，調整4個圖層的圖像，使之不失真并和諧有美感；分別在圖層1、2、3、4之上建立文本圖層，寫上廣告語，分別和圖層1、2、3、4合并，完成圖文并茂的4個新圖層；點擊ImageReady圖標，在此文件基礎上打開軟件；打開“動畫”面板，復制當前幀，連點3下，使幀數為4；分別對每一幀操作，使每一幀只顯示一個圖層的內容；設置延遲秒數；將優化結果存儲為GIF格式保存。

2.3 最簡單的背景底紋制作

網頁的背景圖片是無限循環填充的，也就是說，只要對網頁設置了一個背景元素，這個元素圖片就會無縫連接的填充整個頁面，例如制作一個條紋狀背景圖，只需要建立一個1*2像素大小的文件即可，如同“日”字格，在上下格里填充不同的顏色，保存為JPG格式，這個底紋就制作完成了，當背景填充完畢，展現在觀者眼前的就是條紋背景了，而這個背景文件僅僅幾k大小。

2.4 網頁按鈕制作

Photoshop的樣式面板提供了多種多樣的按鈕效果，為網頁中的超級鏈接及按鈕的制作提供了很大的方便。

在運用Photoshop進行網頁元素的制作時，需要牢記以下幾點：一是新建文件時，大小一定要以像素為單位，并且和網頁中規劃出的大小一樣，確保放進網頁的圖像不失真、不移位；二是圖像保存時，一般為JPG格式，有透明像素的情況保存為GIF格式，運用Photoshop處理的源文件另外保存為PSD格式以備修改之用；三是利用切片工具進行大圖片的切割時一定要依靠參考線，和網頁中表格布局的尺寸一致，避免留白、爆邊等問題的出現。

總之，Photoshop在網頁制作中的運用越來越廣泛的被人們所熟識，在圖像處理和網頁設計等領域有越來越多的應用技巧有待討論和探索。

［1］孫素華.網頁設計從入門到精通[M].北京：中國青年出版社，2011：438-457.

［2］北大青鳥信息技術有限公司.使用Photoshop設計網站[M].北京：科學技術文獻出版社，2008：5-6.

［3］劉麗君，陳強.淺談 Photoshop 在網頁制作中的應用[J].科技廣場，2007（7）：167-168.

［4］王永生，錢俊.PhotoShop 中常用的圖形圖像格式[J].廣東印刷，2003（6）：20-21.