UI設(shè)計(jì)教程，教你設(shè)計(jì)一個(gè)iCloud圖標(biāo)

PSD參考文件鏈接：http://pan.baidu.com/s/1DBJem 密碼：9djs
今天的教程是來畫一個(gè)icloud圖標(biāo)，貌似也是錘子rom里面的，從網(wǎng)上面看到的，看了下，不難，就臨摹了一下，大家可以跟著一起來學(xué)習(xí)下。很完記得交作業(yè)。
先來看下效果圖：

高大上的分解圖來了，一看就會(huì)了，哈哈。

看完分解圖，是不是覺得很簡(jiǎn)單了呢，大家臨摹的時(shí)候可以多多的這樣分析思考一下，難度會(huì)降低很多哦。
1、新建畫布1000*1000，添加純屬漸變。

2、用圓角矩形工具新建一層，命名為底板，并添加圖層樣式。

好了，大概效果出來了，接下來我們?cè)偌?xì)化一下底板，添加高光和底部反光，方法很簡(jiǎn)單，兩個(gè)圓角矩形相減就能得到開關(guān)，然后羽化一兩個(gè)像素。

記得CTRL+G給他們編個(gè)組，命名為底板。
對(duì)了，我還在這里疊加了一層高光，做法就是形狀直接羽化然后創(chuàng)建剪切蒙版，分解圖上面就能看出來。

3、搞定底板后，我們開始來做云，形狀工具畫四個(gè)正圓加一個(gè)矩形，大小自己把握，不過要注意的是要保持他們?cè)谕粋�(gè)圖層。命名為云層底，保持圖層整潔。圖層樣式如下，數(shù)值僅供參考。

接下來我們要做的是云層中部，這里我的方法比較笨，我是把底層的每個(gè)圓縮小二十像素，嘗試過直接自由變換縮小，但是效果很差，每個(gè)圓銜接的地方對(duì)不上，所以用笨的方法，有知道簡(jiǎn)便方法的同學(xué)還請(qǐng)告訴我。中層就不用加圖層樣式了，填充顏色為e9e9e9就行了。

頂層的方法也是一樣，中層基礎(chǔ)上再縮小10像素即可，添加內(nèi)陰影和投影。

其實(shí)做到這里就差不多結(jié)束了，還有最后一步就是給云層底部加個(gè)反光，也是布爾運(yùn)算減去頂層再羽化。