UI圖標(biāo)教程,用PS繪制一個(gè)獨(dú)特的漸變風(fēng)格播放器圖標(biāo)(4)
本篇教程通過(guò)PS設(shè)計(jì)一個(gè)獨(dú)特的漸變風(fēng)格播放圖標(biāo),教程依然是我們的圖層樣式,同學(xué)們不要覺(jué)得圖層樣式煩,圖標(biāo)根本離不開(kāi)它,所以我們這個(gè)朋友呢,一定跟它搞熟悉關(guān)系,同學(xué)們一起來(lái)試著做一下吧。
效果圖:
操作步驟:
老規(guī)矩,先來(lái)分析一下。這里我們主要分為三個(gè)部分:底座、外圓、內(nèi)圓,其它問(wèn)題都不大,主要是外圓部分、需要用到多個(gè)圖層來(lái)繪制線(xiàn)條,騷年分析完已經(jīng)成功一半了,離成功還會(huì)遠(yuǎn)嗎?
步驟一:
首先新建畫(huà)布900px*900px畫(huà)布,命名為播放按鈕,為背景添加顏色#3d3835。
步驟二:
使用圓角矩形工具、繪制一個(gè)615px*615px圓角半徑為90px底座,并為它添加圖層樣式。
步驟三:
高逼格的底座一下就出來(lái)了,有木有!。〗酉聛(lái)繼續(xù)使用橢圓工具、繪制一個(gè)400px的正圓,并為它添加圖層樣式。
步驟四:
在繪制一下底座的線(xiàn)條吧,選擇直線(xiàn)工具繪制一條長(zhǎng)度30px粗細(xì)1px的直線(xiàn)吧,顏色為#818181。
步驟五:
復(fù)制直線(xiàn)執(zhí)行自由變換命令,調(diào)整中心點(diǎn)至畫(huà)布中心,旋轉(zhuǎn)15度,并執(zhí)行重復(fù)上一命令并復(fù)制操作shift+ctrl+alt+t復(fù)制出另外余下的直線(xiàn)段,并添加一下圖層樣式吧。
步驟六:
接下來(lái)使用橢圓工具、繪制一個(gè)330px*330px的正圓,并為它添加圖層樣式。
步驟七:
我們繼續(xù)使用橢圓工具、繪制一個(gè)260px的正圓,并為它添加圖層式。
步驟八:
現(xiàn)在繼續(xù)繪制一下底座的線(xiàn)條吧,選擇直線(xiàn)工具繪制一條長(zhǎng)度8px粗細(xì)1px的直線(xiàn)吧,顏色為#898989。
步驟九:
復(fù)制直線(xiàn)執(zhí)行自由變換命令,調(diào)整中心點(diǎn)至畫(huà)布中心,旋轉(zhuǎn)15度,并執(zhí)行重復(fù)上一命令并復(fù)制操作shift+ctrl+alt+t復(fù)制出另外余下的直線(xiàn)段。
步驟十:
重復(fù)上面步驟繪制長(zhǎng)度32px粗細(xì)1px的直線(xiàn)吧,顏色為#898989,并復(fù)制旋轉(zhuǎn)90度。
步驟十一:
現(xiàn)在我們來(lái)繪制內(nèi)圓的部分,用橢圓工具、繪制一個(gè)170px*170px的正圓,并為它添加圖層樣式。
步驟十二:
繼續(xù)繪制內(nèi)圓的部分,用橢圓工具、繪制一個(gè)130px*130px的正圓,并為它添加圖層樣式。
步驟十三:
現(xiàn)在我們來(lái)繪制最后一個(gè)小圓吧,用橢圓工具、繪制一個(gè)15px*15px的正圓,顏色為#60a500并為它添加圖層樣式,復(fù)制小圓,將顏色改為#fe0000,放到合適的位置就完成這個(gè)案例了哦。
完成:
同學(xué)只要勤加練習(xí),就可以做到自己想要的效果,不能一味模仿,我們練習(xí)多了要有創(chuàng)新精神,創(chuàng)作屬于我們自己的東西。
學(xué)習(xí) · 提示


點(diǎn)評(píng)建議:做這個(gè)要花多少時(shí)間?我的作業(yè): 音美仔 發(fā)表于 2019-12-23 10:04

點(diǎn)評(píng)建議:這個(gè)做的太棒的,無(wú)可挑剔呀~~~我的作業(yè): 音美仔 發(fā)表于 2019-12-23 10:04

點(diǎn)評(píng)建議:這個(gè)做的太棒的,無(wú)可挑剔呀~~~我的作業(yè): 音美仔 發(fā)表于 2019-12-23 10:04












相關(guān)教程
- UI圖標(biāo)教程,用PS制作一個(gè)音樂(lè)圖標(biāo)
- 圖標(biāo)設(shè)計(jì),用PS繪制索尼PSP圖標(biāo)
- UI圖標(biāo)教程,在PS中繪制一枚炫酷的鐘表圖標(biāo)
- UI圖標(biāo)教程,用ps制作浪漫的冰晶圖標(biāo)
- 圖標(biāo)制作,用PS繪制一款簡(jiǎn)約風(fēng)格的解密游戲圖標(biāo)
- 插畫(huà)制作,用PS繪制簡(jiǎn)約沙漏插畫(huà)效果圖片
- 圖案設(shè)計(jì),用PS快速制作一個(gè)心形圖案
- 手機(jī)圖標(biāo),用PS繪制華為手機(jī)圖標(biāo)
- 相機(jī)圖標(biāo),用UI制作簡(jiǎn)單的彩虹相機(jī)圖標(biāo)
- 圖標(biāo)制作,制作一款玻璃質(zhì)感的圖標(biāo)
推薦教程
- UI圖標(biāo),用PS制作一個(gè)寫(xiě)實(shí)的插頭圖標(biāo)
- UI教程,ps設(shè)計(jì)西服主題圖標(biāo)實(shí)例
- UI圖標(biāo)圓角的設(shè)計(jì)技巧
- 如何設(shè)計(jì)iOS7風(fēng)格圖標(biāo)UI教程
- 設(shè)計(jì)音樂(lè)UI圖標(biāo)教程
- 用PS設(shè)計(jì)APP過(guò)程中改進(jìn)IOS設(shè)計(jì)流程的30個(gè)密訣
- 畫(huà)ICON外框的簡(jiǎn)單方法
- UI設(shè)計(jì)知識(shí),基礎(chǔ)界面制作&細(xì)節(jié)把握
- 圖標(biāo)制作,用PS制作時(shí)尚的郵件圖標(biāo)
- APP設(shè)計(jì)教程,快速設(shè)計(jì)下載APP