當前位置:首頁>ps實例教程>ps網頁設計>按鈕圖標>教程內容

ps矩形網頁按鈕(4)

來源:未知 作者:LOGO設計 學習:4325人次

效果圖

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

讓我們開始!創(chuàng)建一個新的文件,本ps教程分辨率為500×300,填補這個白色畫布。然后選擇圓角矩形工具(半徑30像素)繪制一個形狀使用#d61d23的顏色。

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

之后,應用下面的圖層樣式到這一層:

內陰影

漸變疊加

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

您的按鈕應該看起來像我的:

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

現在,時間,使反射按鈕。使用Ctrl + J鍵復制當前層,然后創(chuàng)建一個新的,然后將其翻轉復制的圖層,得到一個層中的所有圖層樣式。之后,翻轉,垂直與編輯>變換>垂直翻轉上我的照片下面:

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

 

為了使反射更透明的底部的圖片適用于快速蒙版模式,梯度如下:

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

然后返回到標準模式,F在,我們有一些選擇的區(qū)域。按刪除所選區(qū)域到清晰的圖像。

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

Ctrl + D鍵刪除選擇。進入到下一步驟。我想添加的按鈕,有些刺眼。要做到這一點,選擇圓角矩形工具(半徑:80像素),并創(chuàng)建一個新的形式使用白色。

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

柵格化這個圖層與圖層>柵格化>形狀。之后,應用快速蒙版模式更多的時間和填充下一個漸變:

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

回到標準模式,我們收到了再次選擇的區(qū)域。按刪除,清除選定部分的圖像。

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

取消選擇選擇的區(qū)域,按Ctrl + D和改變圖層模式疊加,為當前層。

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

我們完成了按鈕,F在,移動到下一個步驟。我認為它會看起來更好時,我們將會把它的一些設計元素上。要做到這一點得到我的照片下面用白色的橢圓工具,創(chuàng)建圓潤的造型:

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

 

之后,應用這些混合選項到這一層:

內陰影

內發(fā)光

漸變疊加

行程

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

結果如下:

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

時間帶來了一些圖片,我們的圓形設計元素。地球上找到了一些圖片,谷歌圖片或使用地雷,或找到它的地方。打開它,并減少一點點,然后將圖片,如下圖所示。

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

好,那么它的黑色和白色圖像>調整>去色(按Ctrl + Shift + U),并改變圖層模式為疊加,這一層:

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

選擇銳化工具(刷:100像素,模式:普通,強度:40%),以使該片段的清晰度。

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

我們需要做的最后一件事,。要完成的教程讓我們添加一些文字。的橫排文字工具,并喜歡上我的照片下面寫出來的白色的東西。

Photoshop設計金屬質感的網頁按鈕,PS教程,16xx8.com教程網

 

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
寒冰殤2018-06-30 09:23
加油
數學一只驢2017-05-28 10:04
學習學習

關注大神微博加入>>

網友求助,請回答!