Photo shop在網(wǎng)頁制作中的運(yùn)用探索

周蓮波

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

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

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

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

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

1.1 首先新建一個(gè)圖像文件

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

1.2 運(yùn)用Photoshop進(jìn)行頁面布局的設(shè)計(jì)

不同功能的網(wǎng)站，主題不同，設(shè)計(jì)的方式也是多種多樣。根據(jù)科學(xué)研究，通常觀者眼球運(yùn)動(dòng)造成的熱點(diǎn)效應(yīng)聚焦于網(wǎng)頁的左上角，也就是說，用戶瀏覽網(wǎng)頁時(shí)，首先觀察網(wǎng)頁的左上部和上部，然后再往下閱讀，呈現(xiàn)出類“F”的形狀。所以頁面布局設(shè)計(jì)上，網(wǎng)站的站標(biāo)、站名、導(dǎo)航欄、熱點(diǎn)、頭條等最重要的元素應(yīng)該確保集中在這些關(guān)鍵區(qū)域內(nèi)。主題的表現(xiàn)主要是通過造型的設(shè)計(jì)來體現(xiàn)的，造型的巧妙運(yù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進(jìn)行頁面設(shè)計(jì)，尤其在突出設(shè)計(jì)感，需要用別致的造型強(qiáng)有力的體現(xiàn)網(wǎng)站主題的個(gè)人網(wǎng)站、企業(yè)網(wǎng)站的設(shè)計(jì)中，Photoshop因其功能強(qiáng)大的圖像處理能力承擔(dān)著重要的作用。在頁面布局環(huán)節(jié)，可以先用線條在頁面上畫個(gè)“T”字，其中豎線偏左些，將畫面分割成三部分，最上面是網(wǎng)站標(biāo)志、名稱、廣告條，左側(cè)是導(dǎo)航欄，右側(cè)最大的空間留給網(wǎng)站主要內(nèi)容；接下來建立不同的圖層，分別把這些內(nèi)容放在不同的圖層里進(jìn)行繪制、處理。Photoshop的圖像整合、渲染功能可以輕松完成這些任務(wù)。

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

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

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

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

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

2.1 網(wǎng)站LOGO制作

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

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

2.2 廣告欄GIF動(dòng)畫的制作

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

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

2.3 最簡單的背景底紋制作

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

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

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

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

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

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

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

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

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