當前位置:首頁>ps實例教程>ps網(wǎng)頁設計>UI設計教程>教程內(nèi)容

UI教程,ps設計音樂主題UI圖標實例(7)

來源:優(yōu)設 作者:看不見的敵人 學習:11466人次

教程教大家怎么樣設計出一個音樂主題的圖標,教程不難,有一點基礎應該也能看的懂,想學的同學就跟著教程一起練練手吧,記得做完交作業(yè)。

最終效果圖:

UI教程,ps設計音樂主題UI圖標實例

新建一個600*600畫布。

UI教程,ps設計音樂主題UI圖標實例

來個白到灰的徑向漸變。

UI教程,ps設計音樂主題UI圖標實例

橢圓工具畫個300*300的圓。

UI教程,ps設計音樂主題UI圖標實例

直接選擇工具選中這兩個點。

UI教程,ps設計音樂主題UI圖標實例

右鍵,自由變換點,在箭頭標注的W位置輸入80。

UI教程,ps設計音樂主題UI圖標實例

UI教程,ps設計音樂主題UI圖標實例

重復上一步驟,選中上面兩個點,在H位置輸入80。

UI教程,ps設計音樂主題UI圖標實例

居中下,調(diào)整下大小自己感覺合適即可。

UI教程,ps設計音樂主題UI圖標實例

給調(diào)整好的圓角矩形添加圖層樣式,投影,漸變疊加。內(nèi)陰影,斜面浮雕。

UI教程,ps設計音樂主題UI圖標實例

UI教程,ps設計音樂主題UI圖標實例

UI教程,ps設計音樂主題UI圖標實例

UI教程,ps設計音樂主題UI圖標實例

調(diào)整圖層樣式后的圓角矩形變的更有立體感。

UI教程,ps設計音樂主題UI圖標實例

畫一個圓大小自定,用漸變疊加調(diào)處金屬質(zhì)感。

UI教程,ps設計音樂主題UI圖標實例

接著添加斜面浮雕和投影。

UI教程,ps設計音樂主題UI圖標實例

UI教程,ps設計音樂主題UI圖標實例

再畫一個圓。

UI教程,ps設計音樂主題UI圖標實例

添加圖層樣式,先來個漸變疊加。

UI教程,ps設計音樂主題UI圖標實例

投影,內(nèi)陰影,斜面浮雕。

UI教程,ps設計音樂主題UI圖標實例

UI教程,ps設計音樂主題UI圖標實例

UI教程,ps設計音樂主題UI圖標實例

調(diào)整后的效果:

UI教程,ps設計音樂主題UI圖標實例

ok,這一步來教同學做光碟上的拉絲效果,使它更為逼真,新建圖層,拉個圓形套索,填充白色。

UI教程,ps設計音樂主題UI圖標實例

濾鏡添加雜色。

UI教程,ps設計音樂主題UI圖標實例

濾鏡徑向模糊。

UI教程,ps設計音樂主題UI圖標實例

剪輯蒙版。

(有同學反映插入后就不見了,方法是:調(diào)出圓形的圖層樣式,混合選項里,勾上“將內(nèi)部效果混合成組”勾選掉,把剪貼圖層混合成組。就ok了)

UI教程,ps設計音樂主題UI圖標實例

模式改為疊加,調(diào)整不透明度。

UI教程,ps設計音樂主題UI圖標實例

這樣拉絲效果就出現(xiàn)了,也更加逼真點。

UI教程,ps設計音樂主題UI圖標實例

再畫個圓形添加漸變疊加。

UI教程,ps設計音樂主題UI圖標實例

把拉絲圖層拷貝出來,剪進去,透明度調(diào)低點,給它也添加拉絲效果。

UI教程,ps設計音樂主題UI圖標實例

再畫一個圓形填充紅色。

UI教程,ps設計音樂主題UI圖標實例

添加圖層樣式,投影,內(nèi)陰影(參數(shù)可自己調(diào)整)。

UI教程,ps設計音樂主題UI圖標實例

拷貝拉絲圖層剪輯進去。

UI教程,ps設計音樂主題UI圖標實例

再畫一個圓形,填充淡紅色,也添加拉絲效果,即有倆紅色圓形。

UI教程,ps設計音樂主題UI圖標實例

再畫個小圓形填充白色。

UI教程,ps設計音樂主題UI圖標實例

添加投影,內(nèi)陰影。

UI教程,ps設計音樂主題UI圖標實例

UI教程,ps設計音樂主題UI圖標實例

畫個白色小圓放在這個位置,來做支架。

UI教程,ps設計音樂主題UI圖標實例

添加漸變疊加和斜面浮雕。

UI教程,ps設計音樂主題UI圖標實例

UI教程,ps設計音樂主題UI圖標實例

畫個白色小圓,添加一像素描邊,

UI教程,ps設計音樂主題UI圖標實例

支架部分很簡單,同學們試著去做下,全都是用形狀工具做的。

UI教程,ps設計音樂主題UI圖標實例

搞定后最終效果:

UI教程,ps設計音樂主題UI圖標實例

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
汪明2016-03-22 02:38
還有沒其他方法?(有同學反映插入后就不見了,方法是:調(diào)出圓形的圖層樣式,混合選項里,勾上“將內(nèi)部效果混合成組”勾選掉,把剪貼圖層混合成組。就ok了)不行啊
付碧2015-07-28 02:54
145401fdsxv8zbmnwe747l.jpg
海綿寶寶去泡澡2015-05-30 01:54
音樂圖標
子非路2015-05-04 01:06
c2da0df3gw1eqsc3jg4veg20go0goadi.gif

關注大神微博加入>>

網(wǎng)友求助,請回答!