UI圖標，設(shè)計相機主題UI圖標教程(4)

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

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

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

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

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

接著，我們再選擇形狀工具-橢圓工具，繪制一個200*200像素的圓角矩形  定勾選從中心，這樣繪制的園也是以畫布中心點為圓心。

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

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

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

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

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

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

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

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

最后效果