本教程主要使用Photoshop設(shè)計(jì)一個(gè)漂亮的網(wǎng)頁(yè)按鈕,分層的設(shè)計(jì)和質(zhì)感的表現(xiàn),整體都非常的漂亮,下面讓我們一起來(lái)學(xué)習(xí).

讓我們一起來(lái)看看這個(gè)教程吧

Step 1

我們將首先在Photoshop創(chuàng)建一個(gè)新文檔。 讓我們有1024 × 768px

Step 2

為了填補(bǔ)你的背景，選擇漸變工具(G)的漸變編輯器打開(kāi)了，并輸入您的顏色值按下面的圖像

Step 3

讓我們創(chuàng)造了我們的按鈕的機(jī)構(gòu)。 使用圓角矩形工具(U)，現(xiàn)在只是創(chuàng)造了約320 × 95px，對(duì)5px半徑和填充任何顏色(它的矩形，因?yàn)槲覀儗⑻砑右粋€(gè)漸變疊加)。

我們將加強(qiáng)它如何給予它一些圖層樣式外觀。 首先，套用陰影。

內(nèi)發(fā)光效果…

斜面和浮雕…

最后，一個(gè)漸變疊加

Step 4

現(xiàn)在，讓我們繼續(xù)創(chuàng)造箭頭機(jī)構(gòu)。 我們將首先創(chuàng)建一個(gè)約60 × 55px的矩形使用矩形工具(U)。

繼續(xù)下去，并給它一些圖層樣式。 下面的圖片以供參考使用

為了確保它的垂直和對(duì)齊，選擇這兩個(gè)層次，其中包含按鈕和箭頭機(jī)構(gòu)(概括地講，我們只有兩個(gè)層迄今)和對(duì)齊單擊控制條垂直中心

創(chuàng)建一個(gè)小的矩形，如在下面的圖片1()。然后轉(zhuǎn)到“編輯>變換>斜交>V：30

給它同樣的圖層樣式

Step 5

使用自定義形狀工具(U)創(chuàng)建一個(gè)約30 ×箭頭。

給它一些圖層樣式根據(jù)下面的圖像

Step 6

讓我們創(chuàng)造我們的分離。 使用橢圓選框工具(M)，創(chuàng)建一個(gè)類似下面的選擇。 設(shè)置你的前景色黑色(#000000)，然后單擊轉(zhuǎn)移+ Backspace鍵得到填補(bǔ)

為了使它看起來(lái)有點(diǎn)模糊。 濾器“>模糊”高斯模糊 – 半徑：3.0px

請(qǐng)?jiān)谒淖筮叢糠值倪x擇(見(jiàn)下面的參考)圖像，然后按下刪除

減少這層不透明度為：50%。

打開(kāi)你的漸變編輯器并設(shè)置顏色值按下面的圖像。

在選擇分離器的層上添加單擊圖層蒙板。 然后拖動(dòng)與梯度(我們剛剛成立的頂部)上下。

Step 7

創(chuàng)建另一個(gè)在左側(cè)的三維形狀，使用上面我們已經(jīng)解釋過(guò)相同的技術(shù)

Step 8

輸入字體

應(yīng)用一些圖層樣式給它。 Use the image below for reference.下面的圖片以供參考使用。

得到最終效果