在界面設(shè)計(jì)中我們經(jīng)常會(huì)看到像晶格化效果的背景樣式。讓界面看起來(lái)豐富而有細(xì)節(jié)。那么這樣的效果是用形狀工具繪制出來(lái)的呢？還是有其他什么簡(jiǎn)單的方法？所以這一期MICU教大家圖和快速制作晶格化的界面效果。喜歡的朋友一起來(lái)學(xué)習(xí)吧。

先看看效果圖

第1步

建立漸變背景

首先在PS中新建一個(gè)iphone6(750X1334)的畫布。

然后新建一個(gè)圖層并雙擊圖層，在【圖層樣式】中選擇【漸變疊加】，“混合模式”為正常，“樣式”為線性，“角度”為-90度。

點(diǎn)擊“漸變條”，設(shè)置為深藍(lán)色到黑藍(lán)色的漸變，兩個(gè)顏色不要過(guò)度要太強(qiáng)烈。

使用工具欄中的【橢圓工具】繪制一個(gè)200×200的正圓形。

找一張照片素材Ctrl+T縮放發(fā)到合適的大小，按住Alt鍵在照片與圓形形狀圖層中點(diǎn)擊，添加剪切蒙版。

第2步、生成晶格化背景

制作好頭像效果后，再用頭像照片素材制作晶格化背景效果。下載好的插件(插件在MICU設(shè)計(jì)公眾號(hào)中回復(fù)27即可下載，運(yùn)行插件需要安裝java程序)

安裝好后，打開(kāi)插件應(yīng)用程序。點(diǎn)擊插件的第一個(gè)按鈕選擇頭像照片，導(dǎo)入素材。

導(dǎo)入好素材后，在圖片中點(diǎn)擊關(guān)鍵點(diǎn)，點(diǎn)越多生成出來(lái)的晶格會(huì)越密集，點(diǎn)越少則越稀疏。

繪制好關(guān)鍵點(diǎn)后，點(diǎn)擊插件中的最后一個(gè)按鈕生成。設(shè)置命名后進(jìn)行保存。

將生成好的晶格化背景用PS打開(kāi)。

把素材丟入到界面的畫布中，將晶格圖層置于漸變圖層下面，調(diào)整到合適的大小。

然后將漸變圖層的透明度為90%，可以看到晶格的效果就融入到背景里了。

為了讓晶格的顏色更通透，在晶格化圖層上創(chuàng)建調(diào)整層，選擇【色相飽和度】，將飽和度調(diào)整到-100。從而讓背景顏色變得更為統(tǒng)一。

第3步

豐富細(xì)節(jié)及內(nèi)容

Alt鍵拖動(dòng)復(fù)制圓形的路徑層，【Ctrl+T】調(diào)整一下圓形的大小。將路徑形狀的填充關(guān)閉，描邊設(shè)置為2px，顏色為綠色。

Ctrl+J復(fù)制一個(gè)圓形路徑層，然后將描邊改到4px，使用鋼筆工具在左上角及右下角添加錨點(diǎn)。再使用錨點(diǎn)選擇工具選擇多余的錨點(diǎn)，Delete刪除，制作出下圖中的效果。

選擇【文字工具】輸入數(shù)據(jù)文字，包括卡路里、時(shí)間、步數(shù)。調(diào)整文字大小為90px.

添加昵稱文字，將文字大小設(shè)置為42px。文字樣式選擇蘋方字體，字體顏色選擇主色彩的綠色。

繼續(xù)添加輔助的地理位置信息、數(shù)據(jù)描述性的文字，文字大小為24px,顏色#ffffff 透明度50%。大文字和描述性文字間距為20px。

使用【鋼筆工具】繪制出曲線形狀，描邊大小設(shè)置為8px，描邊顏色設(shè)定為統(tǒng)一的綠色。將形狀顏色填充，填充設(shè)置為0%。

雙擊圖層形狀打開(kāi)【圖層樣式面板】選擇漸變疊加，“混合模式”選擇正片疊底，“角度”為90°，“樣式”為線性。

雙擊漸變條，打開(kāi)“漸變編輯器”面板，調(diào)整漸變條為白色到深色的過(guò)度效果。

為了讓曲線變得更為自然，選擇描邊的漸變模式，將描邊調(diào)整到為深綠到綠色再到深綠的過(guò)度效果。度數(shù)設(shè)置為0°。

繪制好曲線后，使用橢圓形狀工具繪制出數(shù)據(jù)點(diǎn)。

再使用【文字工具】添加上曲線上的數(shù)據(jù)文本。

最后再將界面中的底部導(dǎo)航繪制出來(lái)，讓界面變得更為整體和工具化。

在設(shè)計(jì)中要注意選中按鈕與未選中按鈕的顏色對(duì)比，選中的顏色采用了主色彩的綠色，而未選中的圖標(biāo)為淺灰色。

最后在來(lái)看看設(shè)計(jì)完成的界面效果，是不是很炫酷~