Photoshop繪製金屬質感的網頁進度條效果
這一次的教學是屬於PS教程領域中的設計教程的相關教學。
文章出處是來自未知的PS教程類文章,寫教學的作者是情非得已,感謝情非得已提供設計教程的實作教學。
教學大綱:
今天帶同學們來繪製一個金屬質感的進度條,重點依然是圖層樣式的練習,作者P大點S微博貼心給了源文件,已經有不少同學交作業了,而且完成效果特別棒,喜歡的朋友讓我們一起來學習吧。
設計教程教學開始
今天帶同學們來繪製一個金屬質感的進度條,重點依然是圖層樣式的練習,作者P大點S微博貼心給了源文件,已經有不少同學交作業了,而且完成效果特別棒,喜歡的朋友讓我們一起來學習吧。
教程源文件:金屬質感的網頁進度條PS教程源文件
最終效果:
新建文檔,這裡我們用的依舊是800*800像素,我們為背景圖層添加一個圖層樣式。
設置完圖層樣式,我們得到如下效果:
下面,我們為背景圖層添加一個雜色。 執行“濾鏡—雜色—添加雜色”,設置數量為“1%”,高斯分佈,勾選單色。
執行“濾鏡—濾鏡庫—畫筆描邊—噴濺”,設置噴色半徑為6,平滑度為5
現在,我們完成了背景的創建,效果如下。
下面,我們開始進度條的繪製。用圓角矩形工具,畫一個620*45像素的圓角矩形。
將其命名為“外形”,為其添加一個圖層樣式。
設置完圖層樣式,我們將得到如下效果。
現在輪廓外形已基本呈現,但是質感略嫌不足,我們來改進一下。複製一層“外形”圖層,將其更改名為“輪廓投影”,並將其置於“外形”圖層下層,清除其圖層樣式,將填充更改為0,重新設置一個圖層樣式,設置如下:
現在我們得到如下效果。
用圓角矩形工具畫一個500*30像素的圓角矩形。
為這個白色的圓角矩形設置一個圖層樣式。
現在我們得到如下效果:
下面,我們添加一個按紐,用橢圓工具畫一個60*60像素的圓。
為其添加一個圖層樣式。
到這裡,進度條就算搞定了。
最後,我又添加了兩個按紐,沒什麼好說的,只是加了點字,加了點外發光,有興趣的可以下載我們的PSD看看。
— —
文章永久連結為: Photoshop繪製金屬質感的網頁進度條效果