PhotoShop 在網(wǎng)頁(yè)設(shè)計(jì)中的作用

智慧 河南省交通高級(jí)技工學(xué)校

近年來，在“實(shí)施科教興國(guó)戰(zhàn)略和人才強(qiáng)國(guó)戰(zhàn)略”的指導(dǎo)思想下，信息技術(shù)得到了廣泛的應(yīng)用，信息產(chǎn)業(yè)也在社會(huì)經(jīng)濟(jì)發(fā)展中起著舉足輕重的作用。而互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展也影響著大家的生活，它已經(jīng)不僅僅局限于構(gòu)建日常生活中通信與交流的平臺(tái)。同時(shí)也成功地滲透到了商業(yè)活動(dòng)當(dāng)中。現(xiàn)在，越來越多的企事業(yè)單位、政府機(jī)關(guān)均在網(wǎng)上設(shè)立了自己的門戶網(wǎng)站。為本單位增加宣傳、展示、互動(dòng)的輻射面積，并取得意想不到的收益。而隨著社會(huì)經(jīng)濟(jì)的發(fā)展和全球經(jīng)濟(jì)一體化進(jìn)程的加快，電子商務(wù)行業(yè)越來越受到人們的重視。更隨著諸如淘寶等商業(yè)網(wǎng)站的出現(xiàn)，讓人門足不出戶就可以購(gòu)買到稱心如意的商品。而所有這些，都需要通過網(wǎng)頁(yè)設(shè)計(jì)來實(shí)現(xiàn)。

一個(gè)好的網(wǎng)站，不僅能夠體現(xiàn)本站的特點(diǎn)，體現(xiàn)企事業(yè)單位的主要主體思想與理念，把所要表達(dá)的思想在網(wǎng)站中快速的展現(xiàn)到公眾的面前。更要吸引人們的目光，讓人們時(shí)時(shí)關(guān)注。而優(yōu)秀的電子商務(wù)網(wǎng)站，可以通過圖文并茂的方式，引起人們的購(gòu)買欲望。所有這些，都需要設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候用心勾畫，精心制作。如果只有文字，是無論如何都達(dá)不到理想的效果的。而網(wǎng)站中最好的設(shè)計(jì)模式就是采用圖文并茂的方式來體現(xiàn)網(wǎng)站的特色與內(nèi)容。

平面處理軟件PhotoShop 在網(wǎng)頁(yè)設(shè)計(jì)中具有著不可替代的重要的作用。要想設(shè)計(jì)一個(gè)好的網(wǎng)站，設(shè)計(jì)出圖文并茂，引人注目的網(wǎng)頁(yè)，網(wǎng)頁(yè)設(shè)計(jì)者必須根據(jù)實(shí)際情況，用Photo Shop 軟件對(duì)站點(diǎn)結(jié)構(gòu)進(jìn)行規(guī)劃。那么用平面處理軟件PhotoShop 進(jìn)行網(wǎng)站網(wǎng)頁(yè)的設(shè)計(jì)，都有著什么樣的作用呢？

首先，使用平面設(shè)計(jì)軟件PhotoShop 設(shè)計(jì)網(wǎng)頁(yè)有它獨(dú)特的多層的靈活性，和可以加快瀏覽的下載速度的優(yōu)點(diǎn)。

網(wǎng)頁(yè)制作的工具很多，目前最常用的是Dreamweaver（簡(jiǎn)稱DW），它把構(gòu)成網(wǎng)頁(yè)的文字、圖像、聲音、視頻、動(dòng)畫等元素有機(jī)的結(jié)合起來。而平面處理軟件PhotoShop（以下簡(jiǎn)稱：PS）就是網(wǎng)頁(yè)設(shè)計(jì)中圖文的主流方法。它是一個(gè)功能強(qiáng)大的圖像處理軟鐵。可以按照預(yù)想的效果和思路在PS 中分層擺放網(wǎng)頁(yè)元素，并利用自己掌握的圖像處理的技巧方法讓圖像更加的美觀，并使圖層與圖層之間過渡自然，把整個(gè)圖像文件更好地融合在一起，讓元素與整個(gè)網(wǎng)頁(yè)的主題相一致，使整個(gè)頁(yè)面成為一個(gè)協(xié)調(diào)的整體。

1、多層的靈活性。PS 的靈魂是圖層，一個(gè)完美的網(wǎng)頁(yè)設(shè)計(jì)作品往往有許許多多的元素組成。大到作為Banner 的橫幅圖像，小到一個(gè)項(xiàng)目符號(hào)的圓點(diǎn)或線條。層的功能就是能夠?qū)@些元素單獨(dú)進(jìn)行修改和編輯，而不影響其他的元素；在制作過程中，可以給圖層添加樣式、添加蒙版、改變疊放的順序；可以對(duì)每一個(gè)圖層進(jìn)行圖像的單獨(dú)設(shè)計(jì)，給這一層的圖像設(shè)置色階、飽和度、亮度、大小、曲線等等效果。PS 的各個(gè)圖層之間即是單獨(dú)存在的，又是相互聯(lián)系的。每一個(gè)圖層上的圖像位置都可以隨意的移動(dòng)而不會(huì)影響到其他圖層中圖像的位置。如此靈活的功能，完全可以讓設(shè)計(jì)者自己發(fā)揮和創(chuàng)意，靈活運(yùn)用，設(shè)計(jì)出理想的網(wǎng)頁(yè)。

2、加快瀏覽的速度。互聯(lián)網(wǎng)有一項(xiàng)著名的8 秒原則，即用戶在訪問Web網(wǎng)頁(yè)時(shí)，如果頁(yè)面打開的時(shí)間超過8秒，訪問者就會(huì)感到不耐煩，如果下載需要太長(zhǎng)時(shí)間，他們就會(huì)直接關(guān)閉網(wǎng)頁(yè)，放棄訪問。而用PS軟件制作網(wǎng)頁(yè)時(shí)，就可以對(duì)網(wǎng)頁(yè)的大小以及網(wǎng)頁(yè)元素的大小進(jìn)行適當(dāng)?shù)恼{(diào)整，讓最后生成的網(wǎng)頁(yè)的體積大大減小，相同的元素會(huì)因?yàn)槠涓袷降淖兓岣呦螺d的速度，因此，在一定程度上來說，PS 是提高頁(yè)面下載速度的有效的工具。

其次，Photo Shop 在網(wǎng)頁(yè)設(shè)計(jì)布局當(dāng)中可以更好地把握以下幾個(gè)方面。

1、網(wǎng)頁(yè)文檔的尺寸與分辨率。目前網(wǎng)頁(yè)查看最常使用的瀏覽器分辨率大致有：1024*768 像素、1280*768 像素、1360*800 像素、1440*900像素及1600*900像素。但瀏覽器本身還要留出一定的空間，才能保證不會(huì)出現(xiàn)水平滾動(dòng)條和垂直滾動(dòng)條。以1024*768 像素分辨率為例，網(wǎng)頁(yè)常常要設(shè)置為1001*600像素，分辨率為72像素較為合適。當(dāng)然，這也需要根據(jù)實(shí)際情況進(jìn)行調(diào)整，太高的分辨率并不能增強(qiáng)效果，反而會(huì)降低下載的速度。

2、網(wǎng)頁(yè)設(shè)計(jì)前的準(zhǔn)備元素。要考慮到頁(yè)面的整體風(fēng)格，頁(yè)面的區(qū)域劃分，一般情況下把網(wǎng)頁(yè)分為以下幾個(gè)部分：背景、頭文件部分（即：header 部分)、文件主體部分（即：body 部分）、文件底部（即：footer 部分)。

3、分層的重要性。網(wǎng)頁(yè)當(dāng)中包含非常多的元素，比如，頭部的logo 標(biāo)志、廣告條banner、以及鏈接的文本，插圖、背景、漸變效果、底部菜單等等。在制作的時(shí)候，把它們分別放在不同的圖層之上，方便隨時(shí)修改或增加新的內(nèi)容。

第三，PhotoShop 在設(shè)計(jì)網(wǎng)頁(yè)布局當(dāng)中應(yīng)該遵循的原則。

一個(gè)完整的網(wǎng)頁(yè)，當(dāng)中既有文字又有圖片。根據(jù)需要，還可以添加動(dòng)畫、視頻等等。文字和圖片需要同時(shí)在網(wǎng)頁(yè)中體現(xiàn)出來，讓瀏覽網(wǎng)頁(yè)的用戶既看到了想要看的信息，又在視覺上感到愉悅。這就需要把圖片和文本進(jìn)行合理的布局和編排，使其組成一個(gè)有機(jī)的整體展示給用戶。但如何才能更好地把這些網(wǎng)頁(yè)元素進(jìn)行合理的布局呢？這就需要在設(shè)計(jì)網(wǎng)頁(yè)當(dāng)中，遵循一定的設(shè)計(jì)原則來進(jìn)行。

下面我們?cè)敿?xì)了解一下網(wǎng)頁(yè)布局中應(yīng)該遵循的原則。

1、要注意圖文混合排版。文本和圖片要具有相互補(bǔ)充的視覺效果。如果頁(yè)面中的圖像太多，文字太少，就會(huì)降低頁(yè)面的信息容量；而如果頁(yè)面中的文字太多，沒有圖像搭配，就會(huì)顯得沉雍無趣，缺乏生氣。一個(gè)優(yōu)秀的網(wǎng)站，圖片量和文字量應(yīng)該以網(wǎng)站的功能、行業(yè)和目的而定；文字與圖片相互依托，合理搭配，才能制作出形式生動(dòng)、內(nèi)容豐富多彩的網(wǎng)頁(yè)。

2、要注意疏密交錯(cuò)搭配。網(wǎng)頁(yè)中重復(fù)的形式過多，就會(huì)使頁(yè)面顯得呆板，容易使瀏覽者產(chǎn)生視覺疲勞。因此，在內(nèi)容的安排上要適當(dāng)?shù)亓舭祝m當(dāng)?shù)剡\(yùn)用空格，改變行間距和字間距來制造變化的效果。在一定程度上打破頁(yè)面過于呆板、平淡的格局；在對(duì)稱性方面，既要使用對(duì)稱美，又要兼顧獨(dú)特美，搭配均衡的網(wǎng)頁(yè)，生動(dòng)活潑富于變化，可以給網(wǎng)頁(yè)增加一定的生動(dòng)性和趣味性；在色彩的運(yùn)用上，可以適當(dāng)使用顏色對(duì)比，用以形成鮮明的視覺效果。在網(wǎng)頁(yè)中體現(xiàn)個(gè)體和主體的統(tǒng)一和協(xié)調(diào)。以免產(chǎn)生顏色搭配不合理的情況，也要避免顏色太多，給人一種不協(xié)調(diào)的感覺。

3、要注意強(qiáng)調(diào)整體性。這在網(wǎng)頁(yè)設(shè)計(jì)中占據(jù)著關(guān)鍵的位置，起著主導(dǎo)的作用。網(wǎng)頁(yè)上的整體包括內(nèi)容和形式上的整體性。在用PhotoShop 設(shè)計(jì)網(wǎng)頁(yè)中，主要體現(xiàn)在設(shè)計(jì)形式上的整體性。從網(wǎng)頁(yè)的版面、色彩、風(fēng)格入手。在網(wǎng)頁(yè)中所有的元素設(shè)計(jì)都要進(jìn)行整體考慮，以周密的結(jié)合和精確的定位，來獲得頁(yè)面的整體效果。不論使用什么樣的結(jié)構(gòu)，都要經(jīng)過巧妙的整合，使頁(yè)面產(chǎn)生和諧的美感。

4、要注意突出主題。一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)作品必須條理清晰，主題分明。網(wǎng)頁(yè)的設(shè)計(jì)緊緊圍繞著網(wǎng)站的主題進(jìn)行。從空間層次、視覺次序、主次關(guān)系等進(jìn)行有條理的把握和運(yùn)用。在空間設(shè)計(jì)上要放大主體；從視覺出發(fā)上，重心一般放在中間偏上的位置，這個(gè)位置最能吸引瀏覽者的目光；在主次方面，應(yīng)該在視覺中心以外的地方安排一些稍微次要的內(nèi)容，或者增加一些空白，讓被強(qiáng)調(diào)的主體形象更加地鮮明突出。

第四，Photo Shop中的“裁切”工具是聯(lián)系Dreamweaver的橋梁。

在PhotoShop 中設(shè)計(jì)的網(wǎng)頁(yè)布局效果圖，是不能直接在網(wǎng)頁(yè)編輯軟件Dreamweaver 當(dāng)中使用的，必須用“裁切”的工具，正確的裁切以后，才能在Dreamweaver 中對(duì)效果圖進(jìn)行有效的整合。這讓Photo Shop 在網(wǎng)頁(yè)設(shè)計(jì)中的作用發(fā)揮到了極致。在“裁切”的過程中需要注意以下幾個(gè)方面：

1、要以參考線為依托。在設(shè)計(jì)時(shí)要用參考線，切圖時(shí)更要用好參考線。參考線能夠保證我們切出的圖片的尺寸和表格的尺寸相統(tǒng)一，有效避免“留白”的情況。參考線可以保證我們切出的圖在同一表格中的尺寸同一協(xié)調(diào)。

2、要注意按照網(wǎng)頁(yè)各部分結(jié)構(gòu)來劃分切片。設(shè)計(jì)中的虛線、圓角必須單獨(dú)切片，這些都是在Dreamweaver 中實(shí)現(xiàn)不了的。大圖必須切成均勻的小圖，這樣可以提高網(wǎng)頁(yè)下載的速度。特殊文字必須單獨(dú)切片，這樣可以避免瀏覽器的不兼容。

3、除保存好原文件外，要有效地存儲(chǔ)切片。即存儲(chǔ)切片時(shí)，使用“文件”菜單下的“存儲(chǔ)為WEB 所用格式”命令進(jìn)行保存。切片的格式要求存為GIF 格式，這種格式壓縮比高，占用體積較小，要求高的圖像存儲(chǔ)為JPEG 格式，JPG 格式可以顯示更多的圖片細(xì)節(jié)。

現(xiàn)在，網(wǎng)頁(yè)中的藝術(shù)設(shè)計(jì)，越來越被網(wǎng)站建設(shè)者所重視。一個(gè)好的網(wǎng)頁(yè)就是藝術(shù)與技術(shù)的結(jié)合，既要內(nèi)容詳實(shí)，又要視覺新穎，宏觀大氣。還要布局合理，把內(nèi)容的層次性和空間性突顯出來，現(xiàn)代網(wǎng)絡(luò)不斷地更新發(fā)展，網(wǎng)頁(yè)設(shè)計(jì)只有掌握了各種網(wǎng)絡(luò)的技術(shù)規(guī)律，通過多樣的視覺形式，設(shè)計(jì)樣式，注重技術(shù)與功能和藝術(shù)之間的關(guān)系，相輔相成。才能滿足未來大眾對(duì)網(wǎng)頁(yè)信息的高層次要求。

總之，PHotoShop 在網(wǎng)頁(yè)設(shè)計(jì)中發(fā)揮著至關(guān)重要的作用。在網(wǎng)頁(yè)設(shè)計(jì)的每一個(gè)環(huán)節(jié)，都有PS 的影子。網(wǎng)頁(yè)設(shè)計(jì)人員應(yīng)該在網(wǎng)頁(yè)設(shè)計(jì)中，正確輸出圖像、優(yōu)化網(wǎng)頁(yè)速度以及進(jìn)行網(wǎng)頁(yè)布局等等方面，著手對(duì)PhotoShop 在網(wǎng)頁(yè)設(shè)計(jì)中的作用進(jìn)行分析，才能更好地利用PS設(shè)計(jì)出更多優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)作品。