UI教程,ps設(shè)計(jì)計(jì)算器主題ICON教程

來源:學(xué)UI網(wǎng) 作者:UISTAR 學(xué)習(xí):5110人次

今天給大家?guī)淼慕坛淌清N子ROM里面自帶的應(yīng)用,錘子計(jì)算器ICON教程,趕緊打開寧,開始擼吧。

PSD文件鏈接:http://pan.baidu.com/s/1gdw40Iv 密碼:3p2z

先看一下效果:

UI教程,ps設(shè)計(jì)計(jì)算器主題ICON教程

UI教程,ps設(shè)計(jì)計(jì)算器主題ICON教程
還不錯(cuò),有點(diǎn)小質(zhì)感,F(xiàn)在大多都全部扁平化了,國內(nèi)貌似只有錘子還一直堅(jiān)擬物,看起來還是蠻精致的。
開始臨摹之前我們還是要先來分析一下,這個(gè)ICON基本上可以分為三個(gè)部分,底板層,按鍵層,還有顯示屏,用的圖層樣式主要就是內(nèi)陰影,漸變疊加和投影。這里投影相對(duì)來說關(guān)鍵一點(diǎn),其他都不難,對(duì)了,還有一個(gè)液晶字體,大家可以到這里下載:http://bbs.16xx8.com/thread-169762-1-1.html


1、新建畫布800*800,填充背景顏色為#7c7c7c

UI教程,ps設(shè)計(jì)計(jì)算器主題ICON教程
2、用圓角矩形工具來新建底板,大小隨意,顏色也隨意,因?yàn)楹竺嫣砑訄D層樣式會(huì)覆蓋,記得命名好,保持圖層整潔。

UI教程,ps設(shè)計(jì)計(jì)算器主題ICON教程
接著添加圖層樣式。

UI教程,ps設(shè)計(jì)計(jì)算器主題ICON教程

UI教程,ps設(shè)計(jì)計(jì)算器主題ICON教程

UI教程,ps設(shè)計(jì)計(jì)算器主題ICON教程

UI教程,ps設(shè)計(jì)計(jì)算器主題ICON教程
然后把剛剛的底板層復(fù)制一層,清除圖層樣式,這里我們主要是要做出下面的倒角效果,一個(gè)內(nèi)陰影就搞定。

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

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
********2017-05-20 10:45
交作業(yè) 哈哈
賤了一點(diǎn)點(diǎn)2015-10-22 11:34
ps設(shè)計(jì)計(jì)算器主題ICON

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

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