UI教程，設(shè)計(jì)聯(lián)系人和短信圖標(biāo)(3)

Step02：把圓角矩形圖層命名為di，然后右鍵選擇【混合選項(xiàng)】，設(shè)置：

【描邊】：大小1px，內(nèi)部，漸變90°，# 157acf — #78bbff，

【漸變疊加】：線性漸變，色值從上到下為 # 1479cf — # 3a9bff，角度為90°；

Step03：選擇【橢圓工具】，按住Shift鍵，畫(huà)一個(gè)正圓，填充顏色為# 9eceff，圖層命名為message，再選【鋼筆工具】（快捷鍵P，可按Shift+P切換），在選項(xiàng)欄里【路徑操作】選擇【合并形狀】，并選中路徑，畫(huà)一個(gè)三角形；右鍵選擇【混合選項(xiàng)】，設(shè)置：

【投影】：顏色#789bc0；角度120°，距離1px，擴(kuò)展0，大小1px；

復(fù)制圖層message命名為message_ceng，填充顏色為# 4da2f9，載入圖層選區(qū)向上移動(dòng)三像素，反向選區(qū)，再點(diǎn)擊【圖層】窗口的【添加圖層蒙版】；

再?gòu)?fù)制圖層message命名為message_bian，填充顏色為# c7e3ff，載入圖層選區(qū)向上移動(dòng)一像素，反向選區(qū)，再點(diǎn)擊【圖層】窗口的【添加圖層蒙版】；

Step04：載入message圖層選區(qū)，填充顏色#134573，取消選區(qū)（快捷鍵Ctrl+D），點(diǎn)擊【濾鏡】 — 【模糊】 — 【動(dòng)感模糊】和【高斯模糊】，

【動(dòng)感模糊】：角度90°，距離7；

【高斯模糊】：半徑3；

把圖層不透明度設(shè)置為50%，并把圖層向下移動(dòng)五像素；

Step05：繪制短信圖標(biāo)上笑臉部分，選擇【橢圓工具】，按住Shift鍵，畫(huà)一個(gè)正圓，填充顏色為# 0675d5，大小適中即可，并復(fù)制圖層（快捷鍵Ctrl+J或者選擇【移動(dòng)工具】Ctrl+V，按住Alt鍵拖動(dòng)），再選擇【文字工具】（快捷鍵T，可按Shift+T切換），輸入字符“）”，文字顏色為# 0675d5，大小適中，這里的文字大小為30px，組合成為一個(gè)笑臉字符：） 完成圖標(biāo)的繪制。

END：繼續(xù)duang~ duang~ duang~，一套華麗麗的微扁平化的主題圖標(biāo)就這樣出爐啦~