PhotoShop 在網頁設計中的作用

智慧 河南省交通高級技工學校

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

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

平面處理軟件PhotoShop 在網頁設計中具有著不可替代的重要的作用。要想設計一個好的網站，設計出圖文并茂，引人注目的網頁，網頁設計者必須根據實際情況，用Photo Shop 軟件對站點結構進行規劃。那么用平面處理軟件PhotoShop 進行網站網頁的設計，都有著什么樣的作用呢？

首先，使用平面設計軟件PhotoShop 設計網頁有它獨特的多層的靈活性，和可以加快瀏覽的下載速度的優點。

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

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

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

其次，Photo Shop 在網頁設計布局當中可以更好地把握以下幾個方面。

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

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

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

第三，PhotoShop 在設計網頁布局當中應該遵循的原則。

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

下面我們詳細了解一下網頁布局中應該遵循的原則。

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

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

3、要注意強調整體性。這在網頁設計中占據著關鍵的位置，起著主導的作用。網頁上的整體包括內容和形式上的整體性。在用PhotoShop 設計網頁中，主要體現在設計形式上的整體性。從網頁的版面、色彩、風格入手。在網頁中所有的元素設計都要進行整體考慮，以周密的結合和精確的定位，來獲得頁面的整體效果。不論使用什么樣的結構，都要經過巧妙的整合，使頁面產生和諧的美感。

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

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

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

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

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

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

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

總之，PHotoShop 在網頁設計中發揮著至關重要的作用。在網頁設計的每一個環節，都有PS 的影子。網頁設計人員應該在網頁設計中，正確輸出圖像、優化網頁速度以及進行網頁布局等等方面，著手對PhotoShop 在網頁設計中的作用進行分析，才能更好地利用PS設計出更多優秀的網頁設計作品。