周蓮波

(營口職業(yè)技術(shù)學(xué)院，遼寧 營口 115000)

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

1 Photoshop在網(wǎng)站頁面設(shè)計上的應(yīng)用

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

Photoshop的圖層工具和強大的圖像處理功能，能夠?qū)φ麄€網(wǎng)站頁面的效果進行完整的設(shè)計和修飾。下面就Photoshop進行網(wǎng)頁布局設(shè)計的流程進行簡單地介紹。

1.1 首先新建一個圖像文件

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

1.2 運用Photoshop進行頁面布局的設(shè)計

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

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

1.3 運用Photoshop進行網(wǎng)站元素的色彩搭配

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

總之，在頁面設(shè)計過程中，只要牢記整個頁面設(shè)計的五大原則，即統(tǒng)一、連貫、分割、對比及和諧，把整個頁面當(dāng)成一個整體來考慮，統(tǒng)一風(fēng)格、內(nèi)容連貫、板塊分割清晰、對比鮮明，才能設(shè)計出優(yōu)秀、和諧的頁面來。

2 Photoshop在網(wǎng)站元素設(shè)計上的應(yīng)用

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

2.1 網(wǎng)站LOGO制作

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

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

2.2 廣告欄GIF動畫的制作

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

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

2.3 最簡單的背景底紋制作

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

2.4 網(wǎng)頁按鈕制作

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

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

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

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

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

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

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