UI設計-圖標教程|簡約擬物時鐘|

今天逛貼吧的時候,有個吧友在問時鐘圖標的教程,我就自己做了一個給他。感覺做起來不是很複雜,在這裡給大家出個教程!

今天在這裡給大家出一個時鐘圖標的教程,操作非常非常簡單,不會的各位可以學起來!!!

本次教程提供源文件,在文章的底部進行下載自取

老規矩:先上效果圖,供大家參考參考

UI設計-圖標教程|簡約擬物時鐘|

  1. 先在PS裡面新建一個800*800的畫布,顏色用#f3fbff(淡藍色)鋪滿!
  2. 新建一個圖層畫出560*560的圓角矩形(顏色為純白色),圓角為90!參數如下
UI設計-圖標教程|簡約擬物時鐘|

  1. 然後調整圖層形狀的斜面浮雕參數和投影參數
UI設計-圖標教程|簡約擬物時鐘|

UI設計-圖標教程|簡約擬物時鐘|

3.畫出時鐘的內錶盤,新建一個318*318的正圓並調整它的斜面浮雕參數、內陰影參數以及漸變疊加參數,如圖:

UI設計-圖標教程|簡約擬物時鐘|

UI設計-圖標教程|簡約擬物時鐘|

UI設計-圖標教程|簡約擬物時鐘|

4.調整完內錶盤和外表盤的效果圖如下:

UI設計-圖標教程|簡約擬物時鐘|

5.接下里我們畫時間刻度;新建一個7*7的正圓(顏色為#595f70),給它加個內陰影,具體參數如下

UI設計-圖標教程|簡約擬物時鐘|

現在我們要畫12個刻度讓他平均分配到對應的時間點上,怎麼畫呢?我們可以用動作來實現它

操作步驟:F9打開動作窗口,新建一個動作,開啟錄製——選中一個圓點執行ctrl+t,然後按住Alt鍵拖動中心點至畫布的中心,然後鬆開alt,按住shift,旋轉30°,結束動作錄製即可——最後再複製多個圖層,分別執行動作即可

UI設計-圖標教程|簡約擬物時鐘|

最後我們再把四個點替換成文字,就可以得到如下圖象:

UI設計-圖標教程|簡約擬物時鐘|

6.最後我們再來做指針(指針我參考的是DW經典款的指針),指針用形狀堆疊而成,再給指針加上投影就好了,最後旋轉複製時針、分針、秒針即可;

指針顏色為#69728b,投影看參數

UI設計-圖標教程|簡約擬物時鐘|

指針的軸是用了三層員堆疊而成,大家可以看看細節

UI設計-圖標教程|簡約擬物時鐘|

把這些全部整合到一塊即可,別忘了每個圖層命名,最終效果如圖

UI設計-圖標教程|簡約擬物時鐘|

總結:

1.圖層樣式的運用

2.動作錄製的運用運用

3.心態,心態,心態很重要,不要半途而廢,加油!

歡迎加入UI設計大神交流群:587751709


分享到:


相關文章: