search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

【 PS創意設計 】Photoshop繪製金屬質感的網頁進度條效果 | PS筆刷工廠-

Photoshop繪製金屬質感的網頁進度條效果

這一次的教學是屬於PS教程領域中的設計教程的相關教學。

文章出處是來自未知的PS教程類文章,寫教學的作者是情非得已,感謝情非得已提供設計教程的實作教學。

教學大綱:

今天帶同學們來繪製一個金屬質感的進度條,重點依然是圖層樣式的練習,作者P大點S微博貼心給了源文件,已經有不少同學交作業了,而且完成效果特別棒,喜歡的朋友讓我們一起來學習吧。


設計教程教學開始

今天帶同學們來繪製一個金屬質感的進度條,重點依然是圖層樣式的練習,作者P大點S微博貼心給了源文件,已經有不少同學交作業了,而且完成效果特別棒,喜歡的朋友讓我們一起來學習吧。

教程源文件:金屬質感的網頁進度條PS教程源文件

最終效果:

Photoshop繪製金屬質感的網頁進度條效果

新建文檔,這裡我們用的依舊是800*800像素,我們為背景圖層添加一個圖層樣式。

Photoshop繪製金屬質感的網頁進度條效果

Photoshop繪製金屬質感的網頁進度條效果

設置完圖層樣式,我們得到如下效果:

Photoshop繪製金屬質感的網頁進度條效果

下面,我們為背景圖層添加一個雜色。 執行“濾鏡—雜色—添加雜色”,設置數量為“1%”,高斯分佈,勾選單色。

Photoshop繪製金屬質感的網頁進度條效果

執行“濾鏡—濾鏡庫—畫筆描邊—噴濺”,設置噴色半徑為6,平滑度為5

Photoshop繪製金屬質感的網頁進度條效果

現在,我們完成了背景的創建,效果如下。

Photoshop繪製金屬質感的網頁進度條效果

下面,我們開始進度條的繪製。用圓角矩形工具,畫一個620*45像素的圓角矩形。

Photoshop繪製金屬質感的網頁進度條效果

將其命名為“外形”,為其添加一個圖層樣式。

Photoshop繪製金屬質感的網頁進度條效果

Photoshop繪製金屬質感的網頁進度條效果

Photoshop繪製金屬質感的網頁進度條效果

Photoshop繪製金屬質感的網頁進度條效果

設置完圖層樣式,我們將得到如下效果。

Photoshop繪製金屬質感的網頁進度條效果

現在輪廓外形已基本呈現,但是質感略嫌不足,我們來改進一下。複製一層“外形”圖層,將其更改名為“輪廓投影”,並將其置於“外形”圖層下層,清除其圖層樣式,將填充更改為0,重新設置一個圖層樣式,設置如下:

Photoshop繪製金屬質感的網頁進度條效果

Photoshop繪製金屬質感的網頁進度條效果

現在我們得到如下效果。

Photoshop繪製金屬質感的網頁進度條效果

用圓角矩形工具畫一個500*30像素的圓角矩形。

Photoshop繪製金屬質感的網頁進度條效果

為這個白色的圓角矩形設置一個圖層樣式。

Photoshop繪製金屬質感的網頁進度條效果

Photoshop繪製金屬質感的網頁進度條效果

Photoshop繪製金屬質感的網頁進度條效果

Photoshop繪製金屬質感的網頁進度條效果

Photoshop繪製金屬質感的網頁進度條效果

現在我們得到如下效果:

Photoshop繪製金屬質感的網頁進度條效果

下面,我們添加一個按紐,用橢圓工具畫一個60*60像素的圓。

Photoshop繪製金屬質感的網頁進度條效果

為其添加一個圖層樣式。

Photoshop繪製金屬質感的網頁進度條效果

Photoshop繪製金屬質感的網頁進度條效果

Photoshop繪製金屬質感的網頁進度條效果

Photoshop繪製金屬質感的網頁進度條效果

到這裡,進度條就算搞定了。

Photoshop繪製金屬質感的網頁進度條效果

最後,我又添加了兩個按紐,沒什麼好說的,只是加了點字,加了點外發光,有興趣的可以下載我們的PSD看看。

Photoshop繪製金屬質感的網頁進度條效果

Photoshop繪製金屬質感的網頁進度條效果

— —

文章永久連結為: Photoshop繪製金屬質感的網頁進度條效果



熱門推薦

本文由 wwwfreebrushscom 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦