圖形（Graph）和圖像（Image）都是多媒體系統(tǒng)中的可視元素，雖然它們很難區(qū)分，但確實(shí)不是一回事。圖形是矢量圖（Vector Drawn），它是根據(jù)幾何特性來(lái)繪制的。圖形的元素是一些點(diǎn)、直線、弧線等。圖像是位圖（Bitmap），它所包含的信息是用像素來(lái)度量的。

對(duì)任何一個(gè)網(wǎng)頁(yè)開(kāi)發(fā)員來(lái)說(shuō)，掌握基本的Photoshop技巧比如把PSD文件分割為XHTML/CSS文件是必不可少的。同時(shí)，我們還應(yīng)該懂得更多其它的PS技巧，如修改圖標(biāo)背景色、使用多種方式進(jìn)行PS摳圖、使用快捷鍵快速選擇PS圖層等等......下面為大家講述幾個(gè)相當(dāng)有用的PS技巧。

(一)改變圖標(biāo)的背景顏色

作為一個(gè)網(wǎng)頁(yè)開(kāi)發(fā)員，我用Photoshop最常要做的是改變圖標(biāo)的背景顏色或者是把圖標(biāo)背景變透明。

就拿RSS(聚合內(nèi)容)圖標(biāo)為例。這種圖標(biāo)會(huì)有不同的形狀和尺寸。

圖01

當(dāng)你找到了最合適的圖標(biāo)，但你還需要做些修改。最常見(jiàn)的問(wèn)題是網(wǎng)站的背景和圖標(biāo)的背景可能是不同的，為了把他們搭配在一起，我們需要做一些工作。

如果圖像是GIF格式的，建議先把它轉(zhuǎn)換成PNG格式，他們是類似的，但是PNG格式文件比較小。請(qǐng)閱讀在網(wǎng)站中用GIF和PNG圖像的利弊。

具體做的方法是：

第一步：在Photoshop中打開(kāi)圖像，然后點(diǎn)擊文件->存儲(chǔ)為Web和設(shè)備所用格式(快捷鍵Ctrl/Cmd+Alt/Option+Shift+S)，然后在

預(yù)設(shè) 右邊的下拉框中選擇PNG-8或者PNG-24格式。你可以對(duì)比下哪種格式的質(zhì)量和尺寸更好一些。(參看教你如何存儲(chǔ)Web所用格式的圖片。)

接著關(guān)閉GIF文件打開(kāi)你剛存儲(chǔ)的圖片。

打開(kāi)圖層面板(如果沒(méi)顯示，按F7鍵讓它可見(jiàn))，你可以看到有一個(gè)背景圖層。

右擊那個(gè)圖層，從菜單里選擇背景圖層，點(diǎn)擊確定。

第二步：使用魔術(shù)棒工具。

1.在工具面板中點(diǎn)擊魔術(shù)棒工具。

2.確保容差設(shè)在20左右，消除鋸齒和連續(xù)是勾選上的，如下圖：

圖02

然后點(diǎn)擊環(huán)繞這個(gè)圖標(biāo)的白色(或其他顏色)背景。

確保選中的區(qū)域盡可能不要包含圖標(biāo)下的陰影部分。如果陰影部分被包含住了，適當(dāng)?shù)恼{(diào)整容差(用魔術(shù)棒重新選擇背景)。

圖03

去除背景顏色

簡(jiǎn)單的點(diǎn)擊Delete鍵我們就可以去除背景并把它變透明。點(diǎn)擊文件->存儲(chǔ)為Web和設(shè)備所用格式，勾選"透明"選項(xiàng)。

改變背景顏色

1.點(diǎn)擊前景色在拾色器中選擇你想要的顏色，點(diǎn)擊確定。

2.點(diǎn)擊油漆桶工具(快捷鍵G)。如果你沒(méi)有發(fā)現(xiàn)油漆桶工具，右擊漸變工具然后選擇油漆桶工具。

接著，用它在圖標(biāo)旁邊填充上你剛選擇的顏色。

圖04

(二)用自動(dòng)選擇工具選擇圖層

選擇一個(gè)圖層很簡(jiǎn)單：在圖層面板中點(diǎn)擊那個(gè)圖層(如果沒(méi)出現(xiàn)面板按下F7)。

如果在你的面板中有很多圖層或者圖層沒(méi)有直觀得命名，那么找相關(guān)的圖層會(huì)變得很煩人。

有一種辦法是打開(kāi)自動(dòng)選擇工具：

1.在工具面板中點(diǎn)擊移動(dòng)工具。

2.選擇自動(dòng)選擇右邊下拉框中的圖層。

3.勾選自動(dòng)選擇選項(xiàng)。

圖05

啟用了自動(dòng)選擇，在畫(huà)布上隨意點(diǎn)擊就可以選中相關(guān)圖層。

(三)用Ctrl/Cmd+鼠標(biāo)左鍵點(diǎn)擊 選擇圖層

用移動(dòng)工具(快捷鍵V)來(lái)選擇圖層的另一種方法是用Ctrl/Cmd+鼠標(biāo)左鍵點(diǎn)擊 在畫(huà)布上選擇一個(gè)特定圖層，注意應(yīng)該把自動(dòng)選擇功能去掉。

(四)分割一個(gè)圖層

選擇一個(gè)圖層后，你也許想把它復(fù)制到新文件中從而把它存儲(chǔ)為一個(gè)新的圖片。

一種方法是用裁剪工具(快捷鍵C)。

圖06

但有一種保持圖層大小不變的快捷方法：

1.按住Ctrl/Cmd鍵并且點(diǎn)擊圖層的縮略圖。這樣就會(huì)自動(dòng)選擇那個(gè)圖層里所有的東西。

2.按下Ctrl/Cmd+C (編輯->復(fù)制的快捷鍵)

3.按下Ctrl/Cmd+N來(lái)創(chuàng)建一個(gè)新的文件。Photoshop能自動(dòng)幫你復(fù)制和創(chuàng)建一個(gè)同樣大小的圖層的文件。

4.按下Ctrl/Cmd+V 把它復(fù)制到新的圖層。

(五)用拖放的方式把一個(gè)圖層從一個(gè)文件復(fù)制到另一個(gè)文件

有許多方法可以用來(lái)把一個(gè)圖層或一組圖層從一個(gè)PSD文件復(fù)制到另一個(gè)文件。然而最簡(jiǎn)單的方法是拖放。

1.從文件中選擇你要復(fù)制的圖層。如果你要復(fù)制多個(gè)圖層，按住Ctrl鍵在圖層面板中選擇圖層。

2.選擇移動(dòng)工具(快捷鍵V)。

圖07

在畫(huà)布中點(diǎn)擊任何地方然后把圖層拖到你需要復(fù)制到的新建文件里。

這個(gè)文件會(huì)被激活，放開(kāi)鼠標(biāo)把復(fù)制的圖層放在你想要的地方。

(六)擴(kuò)展或收縮圖像

在第一個(gè)技巧中，我演示了如何選擇一個(gè)圖標(biāo)的背景。在有些情況下，選區(qū)不準(zhǔn)確，也許你想放大或縮小選區(qū)。

首先，為了看清楚你選擇的部分，按下Ctrl+ +來(lái)放大這個(gè)圖像。

點(diǎn)擊選擇->修改->擴(kuò)展

選擇->修改->收縮

圖08

輸入你想要擴(kuò)展或收縮的像素然后點(diǎn)擊確定。

圖09

(七)使用圖層復(fù)合

當(dāng)有多個(gè)圖層時(shí)，獲取圖層的可見(jiàn)狀態(tài)會(huì)是操作更有效。換言之，只顯示你想要看見(jiàn)的圖層。

1.顯示圖層復(fù)合：窗口->圖層復(fù)合。

2.在圖層復(fù)合菜單中選擇新建圖層復(fù)合或者直接在面板下點(diǎn)擊新建圖層復(fù)合快捷鍵。

圖10

3.命名這個(gè)新的圖層復(fù)合，勾選可見(jiàn)性的選項(xiàng)，確定。

應(yīng)用圖層復(fù)合

點(diǎn)擊在這個(gè)圖層右邊圖標(biāo)來(lái)隱藏或顯示圖層復(fù)合。

圖11

圖12

(八)基本圖像處理：改變顏色

Photoshop中另一個(gè)常見(jiàn)的問(wèn)題是復(fù)制部分圖層并改變其顏色。

這里有一個(gè)例子。下面這個(gè)圖標(biāo)用作菜單按鈕：

如何只把其中的房子復(fù)制出來(lái)，把它變成黑白色彩?當(dāng)你需要做鼠標(biāo)觸摸效果時(shí)，這個(gè)技巧經(jīng)常會(huì)被用到。

圖13

1.選擇矩形選框工具(快捷鍵M)。

2.在畫(huà)布中選擇這個(gè)房子。然后用Ctrl/Cmd+J把他復(fù)制到一個(gè)新的畫(huà)布上。

3.按下Ctrl/Cmd+U調(diào)整新圖層的色相和飽和度。把飽和度調(diào)整到左邊來(lái)把房子調(diào)為黑白。

結(jié)果：

圖14

但是彩色版的房子還在。要想看到它，把它設(shè)為可見(jiàn)。

(九)利用測(cè)量工具

作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)員，為了能制作適合網(wǎng)頁(yè)的圖像，我們常需要精確到像素來(lái)測(cè)量圖像。一個(gè)常用的例子是計(jì)算清楚菜單欄的尺寸以用作CSS圖像拼合。

有兩種方法來(lái)進(jìn)行測(cè)量：

量尺(快捷鍵Ctrl/Cmd+R)

1.點(diǎn)著不放把左上角的量尺拖向畫(huà)布。

2.在你想要放坐標(biāo)的地方釋放鼠標(biāo)。

3.縮放(快捷鍵Ctrl/Cmd++)更好的觀察量尺刻度。

建議：雙擊量尺本身或者點(diǎn)開(kāi) 編輯->首選項(xiàng)->單位和標(biāo)尺來(lái)打開(kāi)選擇框，選擇你想用的測(cè)量單位(比如從英寸到像素)。

量尺工具(快捷鍵I)

1.在工具面板中點(diǎn)擊量尺工具(如果沒(méi)有看見(jiàn)，右擊吸管工具轉(zhuǎn)換為量尺工具)。

2.點(diǎn)擊后從起點(diǎn)拖到終點(diǎn)來(lái)進(jìn)行測(cè)量。

3.檢測(cè)這部分的寬度和高度。

圖15

矢量圖常用于框架結(jié)構(gòu)的圖形處理，應(yīng)用非常廣泛。圖形是人們根據(jù)客觀事物制作生成的，它不是客觀存在的；圖像是可以直接通過(guò)照相、掃描、攝像得到，也可以通過(guò)繪制得到。