圖標(biāo)教程,設(shè)計鐘表UI圖標(biāo)教程

來源:站酷 作者:全棧UI筆記 學(xué)習(xí):11496人次

本篇UI圖標(biāo)教程教大家如何設(shè)計一枚時鐘主要的UI圖標(biāo),教程難度中等,主要是繪畫部分,質(zhì)感制作主要由圖層樣式來處理,該部分主要是數(shù)值的設(shè)置,難度不算大,分享給新手學(xué)習(xí)吧。

最終效果:

圖標(biāo)教程,設(shè)計鐘表UI圖標(biāo)教程_theoat.com.cn
theoat.com.cn

老規(guī)矩先來分析一下,這里我們主要分為三個部分:底座、表盤、指針,底座指針問題都不大,主要是表盤部分需要用到多個圖層及圖層樣式來表現(xiàn)圖標(biāo)的立體感,騷年分析完已經(jīng)成功一半了,離成功還會遠(yuǎn)么?噢耶。!

圖標(biāo)教程,設(shè)計鐘表UI圖標(biāo)教程_theoat.com.cn

步驟一:

首先新建畫布1500px*1000px畫布,命名為鐘表,填充背景顏色#4b4b4b,添加圖案疊加圖層樣式。

圖標(biāo)教程,設(shè)計鐘表UI圖標(biāo)教程_theoat.com.cn

圖標(biāo)教程,設(shè)計鐘表UI圖標(biāo)教程_theoat.com.cn

步驟二:

使用圓角矩形、繪制一個600px*600px圓角矩形,圓角半徑為90px的圖層,并為它添加圖層樣式。

圖標(biāo)教程,設(shè)計鐘表UI圖標(biāo)教程_theoat.com.cn

圖標(biāo)教程,設(shè)計鐘表UI圖標(biāo)教程_theoat.com.cn

步驟三:

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

圖標(biāo)教程,設(shè)計鐘表UI圖標(biāo)教程_theoat.com.cn

圖標(biāo)教程,設(shè)計鐘表UI圖標(biāo)教程_theoat.com.cn

步驟四:

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

圖標(biāo)教程,設(shè)計鐘表UI圖標(biāo)教程_theoat.com.cn

圖標(biāo)教程,設(shè)計鐘表UI圖標(biāo)教程_theoat.com.cn

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
Elyvan2020-05-06 12:31
我的作業(yè):

12018-04-26 01:49
鐘我的作業(yè):
joker2018-04-23 11:25
大神
損友2017-09-30 02:41
我的作業(yè):
沖刺在愛情前方2017-08-13 11:38
時鐘圖標(biāo)作業(yè)我的作業(yè):
IMWIM2017-08-11 04:05
感謝大神分享!順便提一下,左邊應(yīng)該是W,右邊是E是吧?
我辣么萌是不是愛上我辣2017-08-09 02:29
我的作業(yè):
何為無不曾有2017-08-07 02:54
我的作業(yè): 學(xué)習(xí)了,沒想到鏡面還可以這么做的
和尚不恰肉2017-07-26 03:13
想仔細(xì)了解一下
涼城舊愛i2017-07-26 11:22
謝謝老師 多多學(xué)習(xí)
骨頭收集狂2017-07-26 11:14
學(xué)習(xí)學(xué)習(xí)
眼角的夏沫秋涼2017-07-26 08:53
感覺就是在裝B
天上的太陽之歌2017-07-26 07:33
謝老師分享。。。。!
小白白臉2017-07-26 04:19
簽到
角落里的寂靜2017-07-26 04:19
簽到

關(guān)注大神微博加入>>

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