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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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