PhotoShop網(wǎng)頁設(shè)計的技巧研究

張成忠

摘要：自改革開放以來，隨著社會的發(fā)展，科技日新月異，網(wǎng)絡(luò)已經(jīng)成為人們生活中不可缺少的一部分，網(wǎng)頁設(shè)計也越來越受到人們的追捧，其在網(wǎng)絡(luò)發(fā)展過程中的重要作用亦日漸凸顯出來。特別是近些年來，PhotoShop在網(wǎng)頁設(shè)計中的應(yīng)用越來越多，它在網(wǎng)頁規(guī)劃布局中起著不可替代的作用。文章首先簡單介紹了PhotoShop在網(wǎng)頁設(shè)計中的重要作用，讓讀者對PhotoShop有一定的了解，明白為什么學習PhotoShop，繼而著重分析如何加強PhotoShop在網(wǎng)頁設(shè)計中的應(yīng)用，使其具有一定的技巧。

關(guān)鍵詞：PhotoShop；網(wǎng)絡(luò)；網(wǎng)頁設(shè)計；技巧；研究

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2015）20-0152-03

Study on the Technique of PhotoShop Webpage Design

ZHANG Cheng-zhong

（Dehong Teachers College， Dehong 678400， China）

Abstract： since the reform and opening up， with the development of society， science and technology change rapidly， the network has become an indispensable part of people's life， Webpage design is becoming more and more popular， its important role in the network development process are also increasingly prominent. Especially in recent years， PhotoShop is used more and more in Webpage design， it plays an irreplaceable role in the Webpage layout. This paper first briefly introduces the important role of PhotoShop in Webpage design， so that the readers can have a certain understanding of PhotoShop， why to learn PhotoShop， then focuses on the analysis of how to strengthen the application of PhotoShop in the Webpage design， so it has certain skills.

Key words： PhotoShop； network； Webpage skills； research design

隨著社會的發(fā)展，科技日新月異，人們已經(jīng)進入網(wǎng)絡(luò)高速發(fā)展的時代，大家在互聯(lián)網(wǎng)上花費的時間越來越多，網(wǎng)頁設(shè)計必然成為一個受人追捧的行業(yè)。網(wǎng)頁設(shè)計不僅僅是一門技術(shù)活，還是一門藝術(shù)活，需要設(shè)計者具有一定的專業(yè)知識與技巧，這樣才能使網(wǎng)頁實用性強，也更加美觀。如今，PhotoShop作為一種先進的圖像處理軟件，有很多優(yōu)點：功能強大，易于人們學習，能夠被廣泛應(yīng)用于網(wǎng)頁設(shè)計，這些優(yōu)點使之成為近些年來網(wǎng)頁設(shè)計者的一大利器[1]。

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

PhotoShop在網(wǎng)頁設(shè)計中起著至關(guān)重要的作用，它對網(wǎng)頁的美觀效果有著深刻的影響，特別是文字、圖像以及文字與圖像的有機結(jié)合。但是部分人對PhotoShop這個圖像處理軟件的認識還不足，不能夠正確運用或者運用的時候不能充分發(fā)揮軟件的優(yōu)勢，在此，我將通過自身實踐的經(jīng)驗以及查閱文獻資料的結(jié)果，敘述PhotoShop在網(wǎng)頁設(shè)計中的重要意義，使人們加深對PhotoShop的研究。

1.1 PhotoShop輸出圖像，加快網(wǎng)頁加載速度

人們在瀏覽網(wǎng)頁的時候，都希望網(wǎng)頁的加載速度快些，能夠趕快加載出我們所需要的信息，節(jié)省不必要的時間。所以，優(yōu)化網(wǎng)頁的速度至關(guān)重要，此時，我們就可以利用PhotoShop輸出圖像來優(yōu)化網(wǎng)速[2]。我將從以下三方面來進行闡述：

第一，網(wǎng)頁設(shè)計者要把握圖像的精度。讀者在瀏覽網(wǎng)頁時，由于顯示器的特性，會有合適的圖像精度，也就是會有合適的屏幕分辨率，有些人認為分辨率越高越好，其實不然，分辨率會影響加載的速度，兩者是成反比的，分辨率越高，加載速度越慢，而且在大多數(shù)情況下，沒必要用太高的分辨率，因此，網(wǎng)頁設(shè)計者利用PhotoShop來正確把握圖像的精度，優(yōu)化網(wǎng)頁速度。

第二，網(wǎng)頁設(shè)計者要把握顏色深度。現(xiàn)在網(wǎng)頁大部分圖像文件都是gif格式的，這種圖像的顏色深度越少，它所占的內(nèi)存就越小，因此，在不影響讀者瀏覽的情況下，減少這種圖像文件的顏色深度，有利于降低文件所占的空間，從而提高了圖像文件的加載速度。例如以下gif格式的圖像文件：小按鈕、背景圖片等，這些圖像都對色彩的要求都不高，可以適當?shù)慕档皖伾疃?，?jié)省空間。最終，網(wǎng)頁設(shè)計者利用PhotoShop處理這些圖像文件，就可以在某種程度上優(yōu)化網(wǎng)頁速度。

第三，網(wǎng)頁設(shè)計者要選擇合適的圖像格式[3]。一種圖像格式可以采用不同的壓縮方法，但是壓縮后產(chǎn)生的顯示效果差異也會很大，這時候就需要網(wǎng)頁設(shè)計者根據(jù)不同的色彩需要來用不同的壓縮方法壓縮圖像，如果所需要的圖像顏色深度比較小，就可以采用壓縮后輸出為gif格式的文件，如果所需要的圖像顏色深度比較大，就需要采用壓縮后輸出為jpg格式的文件。因此，網(wǎng)頁設(shè)計者可以利用PhotoShop這一圖像處理軟件來加工圖像，選擇合適的圖像格式進行輸出，加快網(wǎng)頁加載速度。

1.2 PhotoShop應(yīng)用于網(wǎng)頁布局

合理的網(wǎng)頁布局不僅增加了網(wǎng)頁的美觀程度，更重要的是使人們感到舒適，能夠很快的找到自己所需要的信息，節(jié)省時間，因此，網(wǎng)頁布局在網(wǎng)頁設(shè)計中是至關(guān)重要的。我將從以下三方面闡述PhotoShop在網(wǎng)頁布局中的重要作用：

第一，網(wǎng)頁設(shè)計者應(yīng)用PhotoShop進行布局規(guī)劃。PhotoShop可以在網(wǎng)頁設(shè)計中布局多個圖層，每個圖層與每個圖層之間可以是相互獨立存在的，也可以是存在鏈接的，這樣的操作，前者可以使設(shè)計者在設(shè)計網(wǎng)頁時，隨意移動圖片位置；后者是讓圖片之間存在必然的聯(lián)系，方便設(shè)計者進行系統(tǒng)設(shè)計。

第二，網(wǎng)頁設(shè)計者應(yīng)用PhotoShop掌握網(wǎng)頁的布局要點。網(wǎng)頁文檔主要有兩種像素規(guī)格，一種規(guī)格是1007*600的像素，另一種規(guī)格是708*800的像素，分辨率一般為72dpi。大多時候，很少有網(wǎng)站多于三屏的，即使是大型網(wǎng)站。為了使讀者便于觀看，網(wǎng)頁的背景顏色往往與信息的顏色是相互協(xié)調(diào)的，同時為了避免出現(xiàn)瀏覽器不兼容的情況，耽誤讀者時間卻沒能其瀏覽網(wǎng)頁，所以導航字體多用黑體，而正文字體多用宋體。要想用其他的字體來突顯頁面設(shè)計的個性，就需要網(wǎng)頁設(shè)計者應(yīng)用PhotoShop來處理，在PhotoShop中“制作”，然后“切分”。只要網(wǎng)頁設(shè)計者利用PhotoShop把握好網(wǎng)頁的布局要點，將會使自己設(shè)計的網(wǎng)頁蓬蓽生輝。

第三，網(wǎng)頁設(shè)計者應(yīng)用PhotoShop正確“切片”。網(wǎng)頁設(shè)計有很多工具，目前最受人們喜愛并被廣泛接受的工具是Dreamweaver，它的實質(zhì)是將元素組合起來，例如在網(wǎng)頁中出現(xiàn)的圖片、聲頻、音頻、文字等等。而用PhotoShop做完“切片”后，需要用Dreamweaver進行組合元素，要想充分組合這些元素，就要正確“切片”。如何正確“切片”呢？一方面是切片時要有合適的參考線，使切片后的結(jié)果能夠協(xié)調(diào)統(tǒng)一，例如網(wǎng)頁設(shè)計中有Banner和Logo時，應(yīng)用PhotoShop切片，將大圖像切分成基本相同的小圖像，優(yōu)化網(wǎng)頁速度，然后在Dreamweaver中用Banner和Logo的源文檔替換。另一方面是切片后，存為gif格式，這種格式占空間較小，也有利于提高頁面的加載速度。

2 PhotoShop在網(wǎng)頁設(shè)計中的應(yīng)用技巧

通過上面對PhotoShop在網(wǎng)頁設(shè)計中作用的敘述可以看出，PhotoShop作為一個強大的圖像處理軟件，網(wǎng)絡(luò)設(shè)計者很有學習的必要，甚至是利用PhotoShop創(chuàng)造出屬于自己風格的網(wǎng)頁，贏得大家的認可。為此，我結(jié)合自身的經(jīng)驗以及查閱文獻的結(jié)果，著重從以下幾方面介紹PhotoShop在網(wǎng)頁設(shè)計中的應(yīng)用技巧。

2.1 網(wǎng)頁構(gòu)圖

要想充分利用好PhotoShop來設(shè)計網(wǎng)頁，就要了解一些網(wǎng)頁的基本知識，例如網(wǎng)頁構(gòu)圖[4]。通常網(wǎng)頁包括以下幾部分：Logo、導航、正文等等，因此，要規(guī)劃好整個頁面的構(gòu)圖，就需要網(wǎng)頁設(shè)計者把握好Logo放在哪個區(qū)域，導航放在哪個區(qū)域，正文在什么位置更能吸引讀者等，我們在瀏覽網(wǎng)頁第一眼的時候，就能判斷出這個網(wǎng)頁是否布局合理，因為在構(gòu)圖不合理的情況下，人們會感到不舒服，觀看起來別扭，這就是頁面布局不合理導致的結(jié)果。

網(wǎng)頁布局通常有以下幾種類型：第一，方向式布局。電子科技、旅游自駕、商務(wù)通、汽車汽修等通常都用方向式布局，方向式布局又分為水平型、垂直型、斜向型三種框架。水平型框架是指將頁面分為左右結(jié)構(gòu)，左邊是企業(yè)的Logo，導航等，右邊是關(guān)于企業(yè)的正文。它的優(yōu)勢在于人們?yōu)g覽頁面時具有很強的整體感，布局簡單大方，結(jié)構(gòu)清晰，便于讀者觀看，節(jié)約時間。垂直型框架與水平型框架優(yōu)勢基本相同，唯一不同的就是它是上下結(jié)構(gòu)。斜向型框架就比較個性些，有很多種情況，舉一例說明，有的網(wǎng)頁最上面是標題以及重要標志，而在網(wǎng)頁的左右兩側(cè)確是關(guān)于網(wǎng)頁內(nèi)容的鏈接或者圖片，中間是正文，在網(wǎng)頁的最下面則是一些聯(lián)系方式等輔助信息，這樣的結(jié)構(gòu)優(yōu)勢在于讀者在瀏覽網(wǎng)頁時，可操作性強，主次分明。第二，曲線式布局。曲線比較柔和，適合抒情，能夠表達出一種浪漫的情懷，因此，它的優(yōu)勢是具有一種藝術(shù)感，適用于交友網(wǎng)站、教育教育等方面。第三，其他結(jié)構(gòu)式布局。這樣的布局相對沒有規(guī)則，優(yōu)勢在于趨向表現(xiàn)自己的特性，適用于建筑設(shè)計、美術(shù)設(shè)計等方面。

2.2 PhotoShop處理簡單圖像

在了解網(wǎng)頁構(gòu)圖后，就能合理布局，這時候就需要進一步細致的處理圖片，將圖片布置到網(wǎng)頁中去。網(wǎng)頁設(shè)計里面很多時候都會用到圖片的某一部分，需要網(wǎng)頁設(shè)計者掌握如何截取圖片[5]。截圖的方法有很多種，如果使用PhotoShop，那將會更加簡便。首先，打開PhotoShop，然后找出原圖片，在工具欄中選中所需要的工具，截取圖片。倘若需要更加準確的截取，就在工具選項欄中找到“樣式”，在“樣式”里就可以設(shè)定需要的尺寸，例如“固定大小”，設(shè)定固定的寬度和高度，單擊圖像即可確定選區(qū)，用鼠標拖住選區(qū)移動到要截取的地方，即可獲得截取的圖片。單擊“菜單-編輯-拷貝”，就可以復(fù)制圖片，單擊“菜單-文件-新建”，就可以新建畫布，將剛剛復(fù)制的圖片粘貼到新建的畫布上，單擊“菜單-編輯-粘貼”即可，最后保存圖片。利用PhotoShop截圖就算是完成了。

2.3 PhotoShop處理圖像使其背景透明

運用PhotoShop處理圖像，使其背景透明在網(wǎng)頁設(shè)計中應(yīng)用特別廣泛，舉一例說明，有些時候需要將一張圖片中的人物摳出來放到另一個背景中，這就需要將人物圖片的背景透明，只有這樣，才能將這張人物圖片中的人物與另一個背景融合，成為一體。網(wǎng)頁設(shè)計者可以這樣應(yīng)用PhotoShop：首先打開PhotoShop，找出原圖片，利用選取工具選中需要的圖像，保留下來，倘若原圖片是單一的背景顏色，那就能用魔棒工具選中背景顏色，單擊“菜單-選擇-反向”，利用反向選中需要保留的圖片，然后同上述PhotoShop處理圖像中復(fù)制的操作一樣開始復(fù)制圖片，新建畫布，在畫布的“背景內(nèi)容”項中選擇“透明”，其次粘貼圖片，這樣就將所需要的內(nèi)容從原圖片中摳出來了，調(diào)整尺寸，最后保存圖片。

2.4 應(yīng)用PhotoShop使圖像融合

網(wǎng)頁設(shè)計者在給網(wǎng)頁做背景圖片或者做banner圖像時會發(fā)現(xiàn)，很多情況下都需要將兩張或者兩張以上的圖像進行合成，成為一張圖片，這時候，如果應(yīng)用PhotoShop，會使合成圖片更容易一些。舉一例說明，將兩張高度相同的圖片進行合成，其操作如下：首先在PhotoShop中打開第一張圖片，找到第二張圖片，用鼠標將其拖進來，調(diào)整放置的位置，倘若兩張圖片有不協(xié)調(diào)的地方，可以利用工具欄中的工具一一進行調(diào)整，使其統(tǒng)一，然后在第二張圖片所在的圖層建立蒙版，選擇漸變工具，拖拽兩張圖片的結(jié)合處，使其變成黑白漸變，其次調(diào)整其不透明度，最后保存圖片，兩張圖像的融合就完成了。

2.5 在PhotoShop中使用特殊字體

網(wǎng)頁設(shè)計中最基本的要素就是文字與圖像，上面已經(jīng)對如何應(yīng)用PhotoShop處理圖像的技巧做了簡單敘述，接下來我將著重敘述如何在PhotoShop中將特殊字體寫在圖片上。在眾多網(wǎng)頁設(shè)計中，單單是一種字體已經(jīng)滿足不了人們的需求，大家更希望出現(xiàn)一些另類的字體吸引人們的注意，但是計算機在默認情況下大都是沒有這些字體的，這就需要我們上網(wǎng)下載并安裝到計算機中去方可使用。舉一例說明，在圖片上添加一種特殊字體—“方正清刻本悅宋簡體”，這種字體一般情況下計算機上是沒有的，這就需要我們采取以下操作：首先，在網(wǎng)上下載“方正清刻本悅宋簡體”字體并安裝到電腦上，下載的字體一般都是.ttf格式的文件，復(fù)制該文件，粘貼到c盤的Windows文件夾下的Fonts文件夾下，這樣就完成了字體的安裝工作，然后關(guān)閉PhotoShop并重新啟動，就可以看到字體列表中有了“方正清刻本悅宋簡體”，其次在圖片上輸入要寫的內(nèi)容，最后保存即可。

2.6 應(yīng)用PhotoShop繪制網(wǎng)站Logo

網(wǎng)站Logo指的是網(wǎng)站的標志，它的設(shè)計在網(wǎng)頁設(shè)計中占有十分重要的地位。讀者在瀏覽網(wǎng)頁的時候，最先看到的就是網(wǎng)站的Logo，一個好的網(wǎng)站，其Logo必定能展現(xiàn)出網(wǎng)站的內(nèi)涵以及重要的信息或者理念，體現(xiàn)其獨特的風格，才能夠吸引大家的目光，增加點擊量。熟練地應(yīng)用PhotoShop繪制網(wǎng)站Logo，會使網(wǎng)頁設(shè)計更加成功，其操作過程如下：首先，在PhotoShop中新建畫布，使用鋼筆工具勾勒出網(wǎng)站Logo的輪廓，利用“轉(zhuǎn)化點工具”將某些直線變成曲線，增加柔和度，利用“直接選擇工具”調(diào)整曲線弧度，然后按Ctrl+Enter鍵，將路徑變?yōu)檫x區(qū)，填充選區(qū)，其次開始添加重要的文字，最后保存即可。

3 結(jié)束語

總而言之，PhotoShop在網(wǎng)頁設(shè)計中有著至關(guān)重要的作用，要想提高我國計算機網(wǎng)頁設(shè)計的總體水平，網(wǎng)頁設(shè)計者就必須好好學習PhotoShop這一強大的圖像處理軟件。通過上述PhotoShop在網(wǎng)頁設(shè)計中應(yīng)用技巧的簡單介紹，我們了解到只有掌握并熟悉這些技巧，才能在網(wǎng)頁設(shè)計中減少不必要的麻煩，使我們的制作效率更高，網(wǎng)頁展示效果更好。當然，PhotoShop在網(wǎng)頁設(shè)計中的技巧還有很多，我們只有不斷實踐探索，才能找到更好的方法。本文是根據(jù)筆者自身經(jīng)驗以及查閱文獻資料總結(jié)出的技巧，希望對廣大網(wǎng)頁設(shè)計者有借鑒意義。

參考文獻：

[1] 周婧.PhotoShop網(wǎng)頁設(shè)計技巧[J].科技創(chuàng)新與應(yīng)用，2012（5）：38.

[2] 許金元.Photoshop在網(wǎng)頁設(shè)計中的作用[J].信息與電腦（理論版），2010（6）：67-69.

[3] 鄧美玲，李丹.Photoshop在網(wǎng)頁設(shè)計中的作用[J].電子技術(shù)與軟件工程，2015（4）：110.

[4] 朱明秀.淺析Photoshop在網(wǎng)頁設(shè)計中的技巧及應(yīng)用[J].大眾科技，2009（10）：32-33.

[5] 洪穎.Photoshop在網(wǎng)頁設(shè)計中的應(yīng)用[J].信息與電腦（理論版），2013（6）：183-185.