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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最后效果