Photoshop在網(wǎng)頁設(shè)計中的應(yīng)用與方法

現(xiàn)在已經(jīng)進(jìn)入數(shù)字化信息時代，隨著網(wǎng)絡(luò)的飛速發(fā)展，人們的生活逐漸邁向了新時代，無法想象，哪天沒有了網(wǎng)絡(luò)會怎樣，呵呵，開個玩笑了，網(wǎng)絡(luò)只會一天比一天精進(jìn)，所以網(wǎng)絡(luò)知識的普及是必須的！

1、圖像局部截取和圖像尺寸調(diào)整

---

做網(wǎng)頁設(shè)計時經(jīng)常要用到的某張圖像一部分，這就需要截取圖像的局部。圖像局部截取的方法很多，但使用Photoshop操作起來更方便。具體操作步驟如下：

（1）在Photoshop中打開原始圖像；

（2）在工具欄中選擇相應(yīng)的選區(qū)工具，如矩形選框工具或橢圓選框工具，在圖像上需要截取的局部建立選區(qū)。為了截取更精確，通常在選擇選區(qū)工具以后，在工具選項欄中“樣式”里設(shè)定選區(qū)的尺寸，如“固定大小”，并設(shè)定寬度和高度值，這樣單擊圖像就可以建立固定尺寸的選區(qū)；

（3）建立好選區(qū)后，可以將鼠標(biāo)按住選區(qū)內(nèi)部拖拽移動選區(qū)位置，使截取的內(nèi)容符合需要；

（4）單擊菜單“編輯-拷貝”或者我們熟悉Ctrl+C復(fù)制選區(qū)內(nèi)容；

（5）單擊菜單“文件-新建”或按下快捷鍵Ctrl+N新建畫布，此時畫布的尺寸默認(rèn)就是選區(qū)的尺寸，單擊菜單“編輯-粘貼”或按下快捷鍵Ctrl+V將選區(qū)內(nèi)容粘貼到新畫布中；

（6）在新文件圖像中根據(jù)需要進(jìn)一步操作，如添加文字等，最后將新文件保存。
注：圖像尺寸的調(diào)整也是網(wǎng)頁設(shè)計中的常用操作，網(wǎng)頁中的圖像文件大小在保證清晰度的情況下應(yīng)該盡量小，不然會影響網(wǎng)頁打開速度，所以頁面中用到的圖像都有調(diào)整到相應(yīng)尺寸。在Photoshop中打開圖像，單擊“圖像-圖像大小”菜單或者Ctrl+Alt+I進(jìn)行尺寸修改，調(diào)整完后保存即可。

2、透明背景圖像的制作

---

有些圖像放在網(wǎng)頁中需要背景透明才能達(dá)到效果，比如在已有背景色的區(qū)域放置一個圖像，這個圖像只有背景透明才能融合在區(qū)域中。在Photoshop中制作透明背景圖像可以通過以下步驟來操作：

（1）在Photoshop中打開原圖像，使用選取工具將需要保留的圖像部分選中，如果原圖像背景色單一，可以使用魔棒工具很方便地選取背景色，然后單擊菜單“選擇-反向”反向選中需要保留的部分；

（2）單擊菜單“編輯-拷貝”或按下快捷鍵Ctrl+C復(fù)制選區(qū)內(nèi)容，單擊菜單“文件-新建”或按下快捷鍵Ctrl+N新建畫布，注意新建畫布的“背景內(nèi)容”項選擇“透明”；

（3）單擊菜單“編輯-粘貼”或按下快捷鍵Ctrl+V將選區(qū)內(nèi)容粘貼到新畫布中；

（4）按下快捷鍵Ctrl+T適當(dāng)調(diào)整粘貼內(nèi)容的尺寸，調(diào)整完后按回車鍵，還可以使用移動工具調(diào)整內(nèi)容的位置；

（5）單擊菜單“文件-存儲”或按下快捷鍵Ctrl+S保存為gif或png格式文件。

3、圖像融合

---

圖像融合是指將兩張或更多的圖像合成一張圖像，這個操作在網(wǎng)頁設(shè)計中也經(jīng)常用到，比如給網(wǎng)頁做個banner圖像或背景圖像等，下面以兩張相同高度圖像拼接融合為例來說明操作過程，基本步驟如下：

（1）在Photoshop中打開第一張圖像，然后使用移動工具將第二張圖像拖進(jìn)來并調(diào)整到合適的擺放位置；

（2）如果兩張圖像的色調(diào)不太一致，可以對色相、飽和度等屬性進(jìn)行調(diào)整；

（3）選擇第二張圖像所在圖層，建立蒙版，選擇漸變工具從兩張圖像的結(jié)合處拖拽形成黑白漸變，再適當(dāng)調(diào)整不透明度。

4、圖像倒影和陰影制作

---

圖像倒影效果在網(wǎng)頁中也很常見，倒影不僅增強(qiáng)圖像的立體感覺，也使得圖像表現(xiàn)力更強(qiáng)。倒影效果一般分為平面倒影和立體倒影，平面倒影的制作可以通過以下步驟實現(xiàn)：

（1）在Photoshop中將需要做倒影的素材導(dǎo)入文檔，按下快捷鍵Ctrl+J復(fù)制該圖層；

（2）單擊菜單“編輯-變換-垂直翻轉(zhuǎn)”將翻轉(zhuǎn)的圖層拖至原始圖層的下方；

（3）為翻轉(zhuǎn)的圖層添加圖層蒙版，選中漸變工具并選擇線性漸變，在圖層蒙版上拖出漸變就產(chǎn)生了倒影效果。
　　陰影效果也是常用的圖像效果，具體實現(xiàn)步驟如下：

（1）把需要做陰影效果的圖層復(fù)制并建立選區(qū)，填充為黑色；

（2）按下快捷鍵Ctrl+T并右鍵單擊鼠標(biāo)選擇“扭曲”，拖動鼠標(biāo)調(diào)整陰影的形狀和大小；

（3）減少陰影圖層的透明度，然后單擊菜單“濾鏡-模糊-高斯模糊”，再把陰影圖層放置在原圖層的下面。

5、特殊字體的使用

---

文字是圖像處理中頻繁使用的元素，網(wǎng)頁設(shè)計中的圖像上通常都需要添加一些文字內(nèi)容，如廣告宣傳語、導(dǎo)航文字等。文字的添加可以使用Photoshop的文字工具來完成，通常圖像上的文字都采用特殊字體，而計算機(jī)中默認(rèn)情況下卻都不具備這些字體，這就需要我們?nèi)ゾW(wǎng)上下載所需字體并安裝在計算機(jī)中才能使用。舉例說明，比如我們要在圖像上添加一種“方正粗倩簡體”的文字，很明顯，計算機(jī)中默認(rèn)沒有該字體，我們必須進(jìn)行以下步驟操作：

（1）從網(wǎng)上下載“方正粗倩簡體”字體?？梢栽诎俣戎兴阉鳌白煮w下載”關(guān)鍵字，很多網(wǎng)站都提供字體下載；

（2）安裝字體。下載的字體通常是一個.ttf格式的文件，直接復(fù)制該文件，打開C:WindowsFonts文件夾并進(jìn)行粘貼，這樣就完成了字體安裝；

（3）重啟Photoshop軟件，可以看到字體列表中就有了新安裝的字體，當(dāng)然，計算機(jī)中的其他軟件都可以使用這種字體。當(dāng)然如果你有能力的話也可以自己設(shè)計字體，但是對一些初中級的學(xué)生來說，下載是最好的辦法了，省去了很多時間，你懂的！

6、繪制網(wǎng)站LOGO

---

網(wǎng)站標(biāo)志或稱LOGO，它是一個網(wǎng)站的名片，是能夠體現(xiàn)網(wǎng)站形象的一個重要元素。一個好的網(wǎng)站LOGO能夠體現(xiàn)出網(wǎng)站的內(nèi)涵并能傳遞給瀏覽者一些關(guān)于網(wǎng)站的理念信息。一般來說，網(wǎng)站LOGO的設(shè)計是很重要的，它不僅要契合網(wǎng)站同時也要獨具個性，能吸引網(wǎng)站瀏覽者。網(wǎng)站LOGO可以采用Photoshop軟件進(jìn)行繪制，具體可以采用以下步驟：

（1）新建畫布，使用鋼筆工具大致勾畫出LOGO輪廓路徑；

（2）選擇“轉(zhuǎn)換點工具”，將某些直線路徑轉(zhuǎn)換為曲線并調(diào)整相應(yīng)的弧度；

（3）選擇“直接選擇工具”，根據(jù)需要移動一些錨點的位置，通過曲線弧度調(diào)整逐步達(dá)到設(shè)計效果；

（4）按下快捷鍵Ctrl+Enter，將路徑轉(zhuǎn)換為選區(qū)，然后對選區(qū)進(jìn)行填充；

（5）根據(jù)需要添加文字等內(nèi)容并保存文檔。   

7、網(wǎng)頁繪制和切圖

---

Dreamweaver等網(wǎng)頁設(shè)計軟件在圖像處理方面的功能很弱，只使用該軟件進(jìn)行網(wǎng)頁設(shè)計會給網(wǎng)頁美觀帶來局限性，所以通常先采用圖像處理軟件繪制網(wǎng)頁效果圖，然后采用切圖等手段轉(zhuǎn)換為網(wǎng)頁。繪制網(wǎng)頁的工具很多，Photoshop是一個很不錯的選擇，方法如下：

（1）首先新建一個畫布，在當(dāng)前普遍1024*768以上分辨率的情況下，畫布的寬度設(shè)為1002像素以內(nèi)就能保證用戶打開網(wǎng)頁時不會出現(xiàn)水平滾動條，畫布高度根據(jù)網(wǎng)頁實際內(nèi)容需要設(shè)定，接下來在新建的畫布上繪制網(wǎng)頁的界面，網(wǎng)頁各個部分采用分層和分組，便于修改。
（2）網(wǎng)頁繪制好后，需要利用切片工具和切片選擇工具對圖像進(jìn)行分割，切割圖像的原因是在瀏覽器中，一組小幅圖像比單個大幅圖像下載起來要快速得多，而且也便于網(wǎng)頁在Dreamweaver軟件中編輯。網(wǎng)頁切片時一般要借助輔助線作為參考以確保切圖的精確程度，網(wǎng)頁中輸入的文字部分在切圖時可以先隱藏。

（3）單擊菜單“文件-存儲為Web和設(shè)備所用格式”來保存文件，Photoshop會自動生成一個名為images的文件夾用于存放所有圖片。

8、各式線條的使用

---

線條在網(wǎng)頁設(shè)計中是不可或缺的元素，線條應(yīng)用得當(dāng)會使網(wǎng)頁布局清晰、層次分明，比如曲線增強(qiáng)網(wǎng)頁的靈活性和流動性，具有時尚感、飄逸感，而直線的應(yīng)用則使網(wǎng)頁顯得簡潔、大方和嚴(yán)謹(jǐn)，不同線條的使用會起到意想不到的效果。一般來說，網(wǎng)頁設(shè)計中經(jīng)常用到直線、曲線、虛線和立體分割線等，下面我們簡單介紹一下：
（1）直線
在Photoshop中繪制直線一般有兩種方法，一種是使用畫筆工具或鉛筆工具，根據(jù)直線粗細(xì)需要設(shè)置好主直徑，按住鼠標(biāo)進(jìn)行繪制，如果要繪制水平或垂直直線，需要按住Shift鍵然后繪制。
（2）曲線
Photoshop中繪制曲線一般會用到鋼筆工具、轉(zhuǎn)換點工具和直接選擇工具等，先用鋼筆工具畫出大致路徑，再用轉(zhuǎn)換點工具將直線變?yōu)榍€并調(diào)整弧度，如果錨點的位置需要移動，則再使用直接選擇工具移動，最后得到滿意的曲線。
（3）虛線
繪制虛線一般使用畫筆工具或鉛筆工具，根據(jù)要繪制的虛線的粗細(xì)選擇畫筆的主直徑，然后設(shè)置畫筆屬性面板中的“間距”值，這樣就可以繪制出虛線，如果要繪制水平或垂直虛線還可以在繪制時按住Shift鍵。
（4）立體分割線
優(yōu)秀的網(wǎng)站設(shè)計在細(xì)節(jié)方面的處理都是照顧十分周全的，立體分割線看起來有一種凹進(jìn)去的感覺，形成一種很好的分隔的感覺。立體分割線其實是由兩條粗細(xì)均為1px的直線組成的，首先繪制一條比背景色暗的直線，然后再繪制一條比背景色亮的直線，線條色彩可選用與背景色同一色系的顏色，兩條線并列排在一起，形成立體凹陷的感覺。

9、背景圖片制作

---

　　在制作網(wǎng)頁的時候，經(jīng)常需要給網(wǎng)頁設(shè)置背景圖片。除了可以到網(wǎng)上下載背景圖片外，利用Photoshop強(qiáng)大的功能也同樣可以制作出自己喜愛的背景圖案。自制的背景圖像種類很多，這里以制作一種無縫圖案背景為例來說明：
　　具體操作步驟如下：

（1）打開Photoshop，新建寬160、高120，背景為白色，分辨率為72像素/英寸的空白文檔；

（2）在工具箱中選擇自定義形狀工具并找到圖1中所示的形狀，在畫布中間繪制出該形狀，繪制時可按住Shift鍵保持同寬高比例，然后將繪制的形狀放在文檔的正中間；

（3）復(fù)制形狀圖層，對復(fù)制的圖層執(zhí)行菜單“濾鏡-其他-位移”命令，完成圖案的位移操作。位移的“水平”和“垂直”參數(shù)值是根據(jù)圖像尺寸來設(shè)置的，一般為圖像“寬度”和“高度”值的一半，本例“水平”設(shè)置為80，垂直設(shè)置為60。設(shè)置完后圖像如圖2所示；

（4）執(zhí)行菜單“文件-存儲”命令，將文件存儲為GIF格式的圖像。打開Dreamweaver軟件，將該圖像以背景圖片平鋪在網(wǎng)頁中，可以看到網(wǎng)頁背景的效果。

10、按鈕制作

---

按鈕是網(wǎng)頁設(shè)計中常用的元素，經(jīng)常用在導(dǎo)航、跳轉(zhuǎn)等鏈接位置。設(shè)計精美的按鈕能讓網(wǎng)站瀏覽者眼前一亮，目前網(wǎng)頁中常用的按鈕一般都帶有一些立體、漸變效果，這類按鈕可以大致通過以下幾步來實現(xiàn)：

（1）在Photoshop中新建畫布，繪制一個圓角矩形；

（2）雙擊該圓角矩形圖層面板，打開圖層屬性窗口，單擊勾選左側(cè)“斜面和浮雕”選項，并在右側(cè)設(shè)置相應(yīng)的屬性值；

（3）單擊勾選左側(cè)“漸變疊加”選項，在右側(cè)設(shè)置漸變顏色及其他屬性值；

（4）單擊勾選左側(cè)“描邊”選項，在右側(cè)設(shè)置描邊顏色、粗細(xì)、位置、不透明度等屬性值；

（5）選擇文字工具，在按鈕上添加文字并設(shè)定文字樣式等。通過這些設(shè)置能做出滿足一般需求的立體漸變效果按鈕，更多的效果可以在圖層屬性里面繼續(xù)設(shè)置，如內(nèi)陰影、外發(fā)光等。

另外，網(wǎng)頁中有些按鈕當(dāng)鼠標(biāo)放上去時換成另外一個按鈕，兩個按鈕大小一致，區(qū)別就在顏色或文字顏色上。其實第二個按鈕的制作很簡單，只要把第一個按鈕的圖層復(fù)制，修改背景色或文字顏色即可。