Photoshop平面設計案例教程:網頁導航案例一?

Tags: 教程, 網頁, 案例,

PhotoShop作為平面設計中應用最廣的圖形處理軟件,它的使用已經進入千家萬戶。小編用自己學到的一些知識,教大家怎樣用好photoshop這款軟件。

工具/原料

PhotoShop CS6

方法/步驟

我們已經學習完了PS的全部工具,今天開始,我們就學習一些關於平面設計的案例,來加深我們對PS的理解。同時希望大家自己多熟練一下PS這款軟件。

Photoshop平面設計案例教程:網頁導航案例一

首先,我們新建一張畫布,800dpi乘600dpi,然後確定。因為這個大小一般就是14寸屏幕的大小。

Photoshop平面設計案例教程:網頁導航案例一

然後,我們只做導航的主體部分。當然,得用矩形工具。因為純靠手繪我們很難繪製出規則的導航色塊。選擇矩形工具,繪製即可。

Photoshop平面設計案例教程:網頁導航案例一

Photoshop平面設計案例教程:網頁導航案例一

下一步當然是填充顏色,我們選擇一個比較適宜當做導航工具的顏色,來進行填充。首先點選前景色,選取顏色。

Photoshop平面設計案例教程:網頁導航案例一

選擇好顏色以後,按下alt+delete填充。

Photoshop平面設計案例教程:網頁導航案例一

然後我們取消選區(ctrl+D),為了讓導航看起來有立體感,我們必須進行分割。首先新建一個圖層,方便分割色塊的編輯。

Photoshop平面設計案例教程:網頁導航案例一

然後選擇視圖——標尺,因為我們無法嚴格按照等分來分塊,所以調用標尺工具,並改為百分比顯示。

Photoshop平面設計案例教程:網頁導航案例一

在左側標尺拖出幾條基線,分別拖動到25,50,75.

Photoshop平面設計案例教程:網頁導航案例一

然後放大鏡工具放大,拖動小矩形。

Photoshop平面設計案例教程:網頁導航案例一

接下來我們選擇比較淡一點的顏色和比較深一點的顏色,對選區進行填充和複製。

Photoshop平面設計案例教程:網頁導航案例一

然後分別複製該分隔色塊至其他基線處。按住alt拖動就可以。

Photoshop平面設計案例教程:網頁導航案例一

選擇視圖,關掉標尺,並清除參考線。我們的一個簡單的導航頁面就做成了。

Photoshop平面設計案例教程:網頁導航案例一

插入文字,是不是瞬間感覺高大上了。

Photoshop平面設計案例教程:網頁導航案例一

這是最簡單的案例哦,希望能多少幫到大家。

注意事項

如果還想深入學習,關注並點贊哦~

教程, 網頁, 案例,
相關問題答案