UI圖標(biāo)，設(shè)計(jì)相機(jī)主題UI圖標(biāo)教程(4)

@平面設(shè)計(jì)-嚴(yán)恒： 近來很多小伙伴開始咨詢UI的事情，這里簡單闡述一下，UI其實(shí)就是用戶界面設(shè)計(jì)，通俗一點(diǎn)大家手機(jī)所用的APP圖標(biāo)，例如微信、QQ的軟件圖標(biāo)也是UI，都是屬于平面設(shè)計(jì)范疇，當(dāng)然不僅是軟件圖標(biāo)，同樣也包括交互設(shè)計(jì)、聊天界面窗口、動(dòng)效都是UI設(shè)計(jì)所需學(xué)西的知識(shí)。下面為大家簡單演示一下，我們平常所用的手機(jī)軟件圖標(biāo)是如何繪制的？

效果圖預(yù)覽一下：相機(jī)UI圖標(biāo)，過程還是比較簡單的，僅僅是用圖層混合模式解決的，注意光和陰影的處理技巧

Tips：如果你沒有任何基礎(chǔ)建議去跟從我們老師從0開始學(xué)，遠(yuǎn)程視頻教學(xué)，圖文的教程適合有些基礎(chǔ)的學(xué)員，同樣只看不做，你永遠(yuǎn)也學(xué)不會(huì)，學(xué)習(xí)效率自身一定要有一個(gè)清楚的認(rèn)知。百度無法給你解決你都不知道如何描述的問題。

首先新建一個(gè)500*500像素的畫布，快捷鍵ctrl+N，將橫排幾豎排參考系拖至畫布中心形成一個(gè)交點(diǎn)，選擇形狀工具-圓角矩形工具 屬性欄半徑我們改為20像素，鼠標(biāo)放置參考系交

點(diǎn)處，同時(shí)按住shift鍵及alt鍵，按住鼠標(biāo)左鍵向外拖動(dòng)，按回車鍵確認(rèn) 這樣就繪制了一個(gè)以畫布中心為圓心300*300圓角矩形，填充為白色我們要做光和陰影的關(guān)系，所以我們打開fx圖層混合模式，添加一個(gè)投影，具體參數(shù)如下【自己分布合理即可，無需死記硬背】

接著，我們?cè)龠x擇形狀工具-橢圓工具，繪制一個(gè)200*200像素的圓角矩形  定勾選從中心，這樣繪制的園也是以畫布中心點(diǎn)為圓心。

同樣我們也是添加圖層混合模式，中心圓我們需要做一個(gè)從中間凹下去的感覺，所以我們需要根劇所做的光和陰影去構(gòu)架，這里我們思考一個(gè)問題，光是哪邊打過來的，那么近光出是高光，背光處為陰影，那如果是凹陷處，它剛好會(huì)有些相反，所以我們要注意事物的原理，并不是隨意做光和陰影的。

首先我們添加內(nèi)陰影，因?yàn)楦鶕?jù)光的方向，如果是凹面的話在其凹陷邊緣肯定是較暗些的，具體參數(shù)做參考：

之后我們需要做漸變疊加，上面為陰影，下面為高光；顏色我們選取的是一個(gè)白色到暗灰色漸變，作為一個(gè)柔和的光到陰影的過度，參數(shù)自己調(diào)試即可，這樣會(huì)對(duì)知識(shí)有一個(gè)比較深刻的認(rèn)識(shí)。

最后就是投影了，投影就是物體通過光照留下的影子，這個(gè)都好理解

然后再繪制一個(gè)正圓，同樣按照剛才方法，用橢圓工具繪制從中心開始的100*100像素正圓，這里和剛才的區(qū)別就是我們需要將投影加大點(diǎn)參數(shù)，漸變疊加方向需要和剛才的相反，內(nèi)陰影不變 原因是為什么？大家可以思考一下，不要機(jī)械的模仿教程。當(dāng)燃可以添加一個(gè)斜面浮雕，看起來就更有質(zhì)感。

然后再繪制一個(gè)90*90像素正圓，填充白色，為其添加內(nèi)陰影，這部分就是鏡頭了，角度不變

然后再繪制一個(gè)85*85像素的正圓，為其填充一個(gè)黑色，新建一個(gè)圖層，這次我們是做鏡片部分，鏡頭我們給他做一個(gè)紫色的效果，新建一個(gè)75*75像素的正圓，然后選擇漸變疊加，選擇一個(gè)從亮紫色到暗紫色的漸變。

最后就是做一些點(diǎn)綴，我們用橢圓工具繪制一個(gè)一橫一豎的橢圓，填充白色，至于紫色圓形內(nèi)，然后降低不透明度至20左右

最后效果