本篇UI教程跟大家分享如何設計翻頁日歷圖標，整體風格由灰白紅組成，顏色十分大氣，想學UI設計的同學快來學習一下吧。

我們來看看效果圖：

www.16xx8.com

老規矩，先來分析一下。這里我們主要分為二個部分：底座、日歷，其它問題都不大，主要是日歷部分、需要用到多個圖層來表現圖標的立體感，騷年分析完已經成功一半了，離成功還會遠么，噢耶?。?！

步驟一：

首先新建畫布900px*900px畫布，命名為日歷圖標，為背景添加圖層樣式。

步驟二：

使用圓角矩形工具、繪制一個530px*530px圓角半徑為90px底座，并為它添加圖層樣式。

步驟三：

高逼格的底座一下就出來了，有木有?。。〗酉聛砝^續使用圓角矩形工具、繪制一個398px*398px圓角半徑為40px日歷，并為它添加圖層樣式。

步驟四：

復制日歷圖層，將復制的圖層移動到合適的位置。

步驟五：

再次復制日歷圖層，利用形狀圖層布爾運算，減去頂部，命名為變形圖層，并合并形狀組件。

步驟六：

我們復制變形圖層吧， ctrl+t調整中心點垂直翻轉一下，調節高度，右鍵透視調節合適形狀，合并兩個形狀清除之前的圖層樣式，并從新添加圖層樣式吧。

步驟七：

現在我們來繪制右側裝飾，制一個14px*56px圓角半徑為3px的矩形顏色為#101010，并為它添加圖層樣式。

步驟八：

選擇橢圓工具，繪制一個寬高8px*4px的橢圓，并添加高斯模糊命令，復制出另外三個并移動到合適位置。

步驟九：

將右側裝飾打組，復制裝飾組移動到左側位置。

步驟十：

現在我們來繪制文字部分，字體方正蘭亭黑簡體 R.大小200點，顏色為#92181a，復制文字，將兩個文字右鍵柵格化文字，刪除不需要的位置。

步驟十一：

將文字下圖層，ctrl右鍵執行透視效果，并添加圖層樣式。

步驟十二：

現在我們來繪制最后一個橫線吧，用直線工具、繪制一個寬度360px粗細3px的直線，為它添加圖層樣式，并添加高斯模糊效果就完成這個案例了哦。

以上就是本次UI教程的全部內容，主要是學習運用圖層樣式來制作出圖標的質感，大家可以活學活用，制作出其他質感的圖標。歡迎大家分享自己的學習經驗。