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è)吧。