UI教程,ps設(shè)計(jì)計(jì)算器主題ICON教程(3)
今天給大家?guī)淼慕坛淌清N子ROM里面自帶的應(yīng)用,錘子計(jì)算器ICON教程,趕緊打開寧,開始擼吧。
PSD文件鏈接:http://pan.baidu.com/s/1gdw40Iv 密碼:3p2z
先看一下效果:
還不錯(cuò),有點(diǎn)小質(zhì)感,F(xiàn)在大多都全部扁平化了,國(guó)內(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
2、用圓角矩形工具來新建底板,大小隨意,顏色也隨意,因?yàn)楹竺嫣砑訄D層樣式會(huì)覆蓋,記得命名好,保持圖層整潔。
接著添加圖層樣式。
然后把剛剛的底板層復(fù)制一層,清除圖層樣式,這里我們主要是要做出下面的倒角效果,一個(gè)內(nèi)陰影就搞定。
看出區(qū)別來了嘛?下面的多了,三像素的內(nèi)陰影哦。
這樣底板就做好了,CTRL+G我們來編個(gè)組,就命名為底板。
3、接著我們來做顯示屏,就是三個(gè)圓角矩形疊在一起,咱們一個(gè)一個(gè)來,先新建最上面那個(gè),命名為外框。添加圖層樣式。
繼續(xù)新建圓角矩形,命名為中框,并添加圖層樣式。
接下來是內(nèi)框,方法一樣一樣的。
記得CTRL+G編個(gè)組,命名為顯示屏,效果就出來了。
4、下面有意思的1024來了,咳咳,我說的顯示屏上的數(shù)字啦,用剛才我們下載好的液晶字體打出來就好了,自己調(diào)整大小,不過要注意的是8888那一層透明度降低,20%左右就夠了。
大家這步到這里應(yīng)該是這個(gè)樣子了,因?yàn)楸容^簡(jiǎn)單我就帶過了,相信大家都能做出來的。
5、到了稍微復(fù)雜一點(diǎn)的按鍵部分了,別著急,可以稍微休息一下,或者喝口水,喝完我們繼續(xù)。
如上圖,新建圓角矩形,命名為按鍵。添加圖層樣式。
接下來把按鍵層復(fù)制一層,清除圖層樣式,這里我們重新添加內(nèi)陰影,就是做按鍵底部的倒角效果。這里記得填充給0
然后就是加號(hào)了,你用鍵盤打出來也行,用兩個(gè)矩形加起來也行,
這里我想說一下投影,觀察一下可以看出,下面的投影很細(xì)膩柔和,非常自然,大家可以通過圓角矩形羽化10個(gè)像素中,具體自己把握,然后轉(zhuǎn)為智能對(duì)象,加動(dòng)感模糊,最后可以加蒙版擦一下,這樣做出來的投影會(huì)比較自然。搞不懂這步的可以看看我下面的源文件。
做到這步就完成一大半了,這里還是要縮個(gè)組,命名為加號(hào),然后就是復(fù)制加號(hào)組了,復(fù)制三個(gè),擺擺好,然后把加減號(hào)什么的換掉就行了,對(duì)了,等號(hào)那里要加個(gè)弱漸變。
別擔(dān)心,其他數(shù)值都是一樣的,就改個(gè)漸變就搞定。
到這里,這個(gè)錘子計(jì)算器差不多就完成啦,我想想還有沒有哪里忘記了,檢查下哪里還可以優(yōu)化一下的。
我發(fā)現(xiàn)了,底盤的投影不行,不自然,我們可以用上面按鍵的投影方法來做,對(duì)了,還可以添加一層雜色,來體現(xiàn)按鍵的質(zhì)感。
6、好吧,最后一步,新建一層填充黑色,轉(zhuǎn)為智能對(duì)象,然后執(zhí)行濾鏡 》 雜色 》添加雜色,自己把握,因?yàn)槭侵悄軐?duì)象,添加完濾鏡就變成智能濾鏡了,可以無限修改,很強(qiáng)大有沒有。最后把透明度調(diào)下就可以了。
終于大功造成了,趕緊交作業(yè)吧。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- ui設(shè)計(jì)
- ps網(wǎng)頁設(shè)計(jì)
- UI設(shè)計(jì)教程
- ui制作
- 錘子圖標(biāo)
學(xué)習(xí) · 提示
相關(guān)教程
- UI圖標(biāo)教程,用PS繪制一個(gè)獨(dú)特的漸變風(fēng)格播放器圖標(biāo)
- UI圖標(biāo)教程,用PS制作一個(gè)音樂圖標(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)
- 插畫制作,用PS繪制簡(jiǎn)約沙漏插畫效果圖片
- 圖案設(shè)計(jì),用PS快速制作一個(gè)心形圖案
- 手機(jī)圖標(biāo),用PS繪制華為手機(jī)圖標(biāo)
- 相機(jī)圖標(biāo),用UI制作簡(jiǎn)單的彩虹相機(jī)圖標(biāo)
推薦教程
- UI教程:設(shè)計(jì)電池icon
- ps設(shè)計(jì)盒子圖標(biāo)
- UI知識(shí),設(shè)計(jì)師必須知道的優(yōu)秀UI設(shè)計(jì)原則
- ps設(shè)計(jì)折紙效果風(fēng)格的短信軟件圖標(biāo)
- 地圖圖標(biāo),設(shè)計(jì)簡(jiǎn)潔的地圖主題UI圖標(biāo)教程
- ps日歷圖標(biāo)
- UI視頻, 設(shè)計(jì)中得美術(shù)基礎(chǔ)
- UI知識(shí),做UI的工作方式與流程
- 相機(jī)UI圖標(biāo)設(shè)計(jì)教程
- PS繪制磚塊ICO圖標(biāo)