界面設(shè)計,快速設(shè)計炫酷界面(5)
這種界面背景制作其實方法很簡單,畫好一個橢圓形,然后調(diào)整角度和不透明度顏色等即可,大家一起學(xué)習(xí)一下吧。
第1步
繪制圖形
新建圖層選擇畫板(ps cc 2015才有的功能),選這iPhone6的尺寸大小。
新建完圖層后我們使用工具欄中的橢圓工具繪制一個橢圓形。雙擊形狀圖層將形狀的顏色改為黑,
透明圖設(shè)置為5%。
選擇形狀圖層,Ctrl+J復(fù)制出同樣的一個形狀。
選擇復(fù)制出來的圖層,【Ctrl+T】將旋轉(zhuǎn)的角度調(diào)整為45°。使用同樣的方式Ctrl+J進(jìn)行復(fù)制圖層,
再Ctrl+T進(jìn)行旋轉(zhuǎn),重復(fù)3次同樣的操作后繪制以下的形狀效果。
將繪制好的圖層全部選中【Ctrl+G】對圖層進(jìn)行編組,方便后面的制作。
第2步
添加顏色,加強(qiáng)細(xì)節(jié)
在圖層面板中底部找到【新建圖層】按鈕點擊,新建一個空白圖層。
使用工具欄中的【畫筆工具】繪制顏色。在繪制的前可以調(diào)整畫筆的大小和顏色,雙擊工具欄中的顏色進(jìn)行設(shè)定前景色和背景色。通過使用【畫筆工具】將顏色繪制成從藍(lán)色到桃紅色的漸變效果。
漸變顏色圖層繪制好后,在圖層與編組之間按住【Alt】鍵進(jìn)行圖層與編制之間的嵌套,讓漸變的顏色嵌套到下面的編組上。從而完成以下的效果。
選擇圖層編組,Ctrl+J復(fù)制新的編組。選擇復(fù)制的編組Ctrl+T進(jìn)行變換,縮放的時候后按住shift+Alt鍵拖動邊緣的方塊對圖形進(jìn)行進(jìn)等比縮放。將圖形比例調(diào)整到合適的大小,讓形狀顯得更有層次和空間。
為了讓顏色嵌套到所有的圖層上,選中形狀的兩個編組【Ctrl+G】把圖層下面的兩個編組合成為一個編組。然后在顏色層與編制之間按住【Alt】將圖層嵌套到合成的編組上,這時候背景的主要形狀就繪制好了。
背景效果制作完后,使用工具欄中的【文字工具】制作字體,文字顏色設(shè)置為白色,大小設(shè)定280px。
Alt鍵拖動復(fù)制字體圖層,改成副標(biāo)題的文案。在【窗口】中找到【字符】面板調(diào)整文字的字間距到合適的間距,將字體大小為42px,文字字間距為60。
文字制作好后,再次豐富一下背景的效果。選擇路徑【橢圓工具】,在繪制的時候按住【Shift】繪制一個正圓。
雙擊繪制好的路徑圖層打開【圖層樣式】面板選擇【漸變疊加】。
在【漸變疊加】面板中雙擊‘“漸變條”調(diào)出漸變編輯器調(diào)整藍(lán)色到紫色的漸變效果。
做好一個圓形的漸變效果后,選擇圖層【Ctrl+J】復(fù)制一個新的圖層。然后【Ctrl+T】對新的圖層進(jìn)行縮放。
將圓形調(diào)整到合適的大小后,再雙擊圖層調(diào)整漸變?yōu)榉较驗榉错懀瑥亩訌?qiáng)兩個圓形之間的層次效果。
但炫酷的效果完成后,我們可以對整體的頁面進(jìn)行功能布局。繪制好功能的按鈕及子功能的ICON圖標(biāo)等,從而讓頁面變得更加的豐富和細(xì)膩。
好了,今天的教程就講到這里。
學(xué)習(xí) · 提示
相關(guān)教程