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

開關按鈕,用PS制作漸變風格的音樂播放圖標(3)

來源:站酷 作者:全棧UI筆記 學習:6629人次

本篇教程通過PS打造一款特別的漸變風格的音樂旋轉按鈕圖標,教程主要還是用圖層樣式來完成,同學們感受到圖層樣式在圖標中的重要作用了沒,幾乎我們做的大多圖標都是需要用到它,這次再次來襲,同學們還不趕緊操練起來。

最終效果:

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn
m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

步驟一:

首先新建畫布1000px*1000px畫布,命名為旋轉按鈕,為背景添加漸變疊加圖層樣式。

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

步驟二:

使用橢圓工具、繪制一個700px*700px底座,并為它添加圖層樣式。

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

步驟三:

高逼格的底座一下就出來了,有木有。!接下來繼續(xù)使用橢圓工具、繪制一個等大的圓,并為它添加圖層樣式,圖案疊加追加灰度紙,選擇纖維紙圖案。

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

步驟四:

現(xiàn)在繪制一下底座的線條吧,選擇直線工具繪制一條長度700px粗細3px的直線吧,顏色為#909090。

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

步驟五:

復制直線執(zhí)行自由變換命令,調整中心點至畫布中心,旋轉60度,并執(zhí)行重復上一命令并復制操作shift+ctrl+alt+t復制出另外1個直線段,并添加一下圖層樣式吧。

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

步驟六:

接下來使用橢圓工具、繪制一個450px*450px的正圓,并為它添加圖層樣式。

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

步驟七:

繼續(xù)使用橢圓工具、繪制一個400px*400px的正圓,并為它添加圖層樣式。

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

步驟八:

我們繼續(xù)使用橢圓工具、繪制一個350px*350px的正圓,并為它添加圖層樣式。

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

步驟九:

現(xiàn)在我們趕緊來繪制最后一個圓吧,使用橢圓工具繪制一個30px*30px正圓,給它起名叫小內圓吧,并為它添加圖層樣式。

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

步驟十:

就剩文字部分了哦,選擇文字工具微軟雅黑,字體大小50點,顏色白色,輸入文字放到合適的位置,并添加圖層樣式。

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

完成:

開關按鈕,用PS制作漸變風格的音樂播放圖標_m.tgudhdp.cn

步驟有點多哦,但是只要勤加練習,會很大程度上提高你的PS水平。

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
元真2019-08-26 04:26
這是cs幾啊
楊布布2018-10-30 03:09
亂室宅男2017-11-29 09:59
辛苦 了。
冷雪中惆悵2017-11-29 09:48
比較猛比較猛,就是那個太麻煩了沒看懂
大俠配美女2017-11-29 08:15
太棒了
很冒險的夢2017-11-29 03:34
有些步驟不會!
閃龍蒼穹2017-11-29 03:15
真復雜啊~~~~~
莎士比亞282017-11-29 02:45
學到了很多

關注大神微博加入>>

網友求助,請回答!