當前位置:才華齋>計算機>photoshop>

網頁設計常用photoshop技巧

photoshop 閱讀(8.69K)

對於網頁設計師來說,使用Photoshop的目的大多是進行網頁排版,當然有時候需要製作一些效果,在更多的時候網頁設計師使用PS相比平面設計師要更簡單一點,下面是小編分享的網頁設計常用photoshop技巧,一起來看一下吧。

網頁設計常用photoshop技巧

1.改變圖示的背景顏色

作為一個網頁開發員,我用Photoshop最常要做的是改變圖示的背景顏色或者是把圖示背景變透明。

就拿RSS(聚合內容)圖示為例。這種圖示會有不同的形狀和尺寸。

當你找到了最合適的圖示,但你還需要做些修改。最常見的問題是網站的背景和圖示的背景可能是不同的,為了把他們搭配在一起,我們需要做一些工作。

如果影象是GIF格式的,建議先把它轉換成PNG格式,他們是類似的,但是PNG格式檔案比較小。

具體做的方法是:

第一步:在Photoshop中開啟影象,然後點選檔案->儲存為Web和裝置所用格式(快捷鍵Ctrl/Cmd+Alt/Option+Shift+S),然後在預設右邊的下拉框中選擇PNG-8或者PNG-24格式。你可以對比下哪種格式的質量和尺寸更好一些。

接著關閉GIF檔案開啟你剛儲存的圖片。

開啟圖層面板(如果沒顯示,按F7鍵讓它可見),你可以看到有一個背景圖層。

右擊那個圖層,從選單裡選擇背景圖層,點選確定。

第二步:使用魔術棒工具。

1.在工具面板中點選魔術棒工具。

2.確保容差設在20左右,消除鋸齒和連續是勾選上的,如下圖:

然後點選環繞這個圖示的白色(或其他顏色)背景。

確保選中的區域儘可能不要包含圖示下的陰影部分。如果陰影部分被包含住了,適當的調整容差(用魔術棒重新選擇背景)。

去除背景顏色

簡單的點選Delete鍵我們就可以去除背景並把它變透明。點選檔案->儲存為Web和裝置所用格式,勾選透明選項。

改變背景顏色

1.點選前景色在拾色器中選擇你想要的顏色,點選確定。

2.點選油漆桶工具(快捷鍵G)。如果你沒有發現油漆桶工具,右擊漸變工具然後選擇油漆桶工具。

接著,用它在圖示旁邊填充上你剛選擇的顏色。

2.用自動選擇工具選擇圖層

選擇一個圖層很簡單:在圖層面板中點選那個圖層(如果沒出現面板按下F7)。

如果在你的面板中有很多圖層或者圖層沒有直觀得命名,那麼找相關的圖層會變得很煩人。

有一種辦法是開啟自動選擇工具:

1.在工具面板中點選移動工具。

2.選擇自動選擇右邊下拉框中的圖層。

3.勾選自動選擇選項。

啟用了自動選擇,在畫布上隨意點選就可以選中相關圖層。

3.用Ctrl/Cmd+滑鼠左鍵點選選擇圖層。

用移動工具(快捷鍵V)來選擇圖層的另一種方法是用Ctrl/Cmd+滑鼠左鍵點選在畫布上選擇一個特定圖層,注意應該把自動選擇功能去掉。

4.分割一個圖層

選擇一個圖層後,你也許想把它複製到新檔案中從而把它儲存為一個新的圖片。

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

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

1.按住Ctrl/Cmd鍵並且點選圖層的'縮圖。這樣就會自動選擇那個圖層裡所有的東西。

2.按下Ctrl/Cmd+C(編輯->複製的快捷鍵)

3.按下Ctrl/Cmd+N來建立一個新的檔案。Photoshop能自動幫你複製和建立一個同樣大小的圖層的檔案。

4.按下Ctrl/Cmd+V把它複製到新的圖層。

5.用拖放的方式把一個圖層從一個檔案複製到另一個檔案

有許多方法可以用來把一個圖層或一組圖層從一個PSD檔案複製到另一個檔案。然而最簡單的方法是拖放。

1.從檔案中選擇你要複製的圖層。如果你要複製多個圖層,按住Ctrl鍵在圖層面板中選擇圖層。

2.選擇移動工具(快捷鍵V).

在畫布中點選任何地方然後把圖層拖到你需要複製到的新建檔案裡。

這個檔案會被啟用,放開滑鼠把複製的圖層放在你想要的地方。

6.擴充套件或收縮影象。

在第一個技巧中,我演示瞭如何選擇一個圖示的背景。在有些情況下,選區不準確,也許你想放大或縮小選區。

首先,為了看清楚你選擇的部分,按下Ctrl+ +來放大這個影象。

點選選擇->修改->擴充套件

選擇->修改->收縮

輸入你想要擴充套件或收縮的畫素然後點選確定。

7.使用圖層複合

當有多個圖層時,獲取圖層的可見狀態會是操作更有效。換言之,只顯示你想要看見的圖層。

1.顯示圖層複合:視窗->圖層複合。

2.在圖層複合選單中選擇新建圖層複合或者直接在面板下點選新建圖層複合快捷鍵。

3.命名這個新的圖層複合,勾選可見性的選項,確定。

應用圖層複合

點選在這個圖層右邊圖示來隱藏或顯示圖層複合。

8.基本影象處理:改變顏色

Photoshop中另一個常見的問題是複製部分圖層並改變其顏色。

這裡有一個例子。下面這個圖示用作選單按鈕:

如何只把其中的房子複製出來,把它變成黑白色彩?當你需要做滑鼠觸控效果時,這個技巧經常會被用到。

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

2.在畫布中選擇這個房子。然後用Ctrl/Cmd+J把他複製到一個新的畫布上。

3.按下Ctrl/Cmd+U調整新圖層的色相和飽和度。把飽和度調整到左邊來把房子調為黑白。

結果:

但是彩色版的房子還在。要想看到它,把它設為可見。

9.利用測量工具

作為一個網頁設計員,為了能製作適合網頁的影象,我們常需要精確到畫素來測量影象。一個常用的例子是計算清楚選單欄的尺寸以用作CSS影象拼合。

有兩種方法來進行測量:

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

1.點著不放把左上角的量尺拖向畫布。

2.在你想要放座標的地方釋放滑鼠。

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

建議:雙擊量尺本身或者點開編輯->首選項->單位和標尺來開啟選擇框,選擇你想用的測量單位(比如從英寸到像量尺工具(快捷鍵I)

1.在工具面板中點選量尺工具(如果沒有看見,右擊吸管工具轉換為量尺工具)。

2.點選後從起點拖到終點來進行測量。

3.檢測這部分的寬度和高度。