本效果用了多次圖層樣式來(lái)制作,除了制作文字效果外,還教了大家怎自定義圖案,學(xué)習(xí)點(diǎn)相對(duì)較多,推薦給新手學(xué)習(xí)了。
最終效果
1、新建一個(gè)1000 * 600像素,分辨率為72的畫布,背景填充黑色。
下載保存下面的文字素材:
再用PS打開,用移動(dòng)工具拖到新建的畫布里面,把圖層命名為“文字”,調(diào)整好位置,效果如下圖。
<圖1>
2、教程開始之前,我們先來(lái)定義一組圖案。方法非常簡(jiǎn)單,先把圖2的大圖及圖3 - 圖5都保持到本機(jī),然后用PS打開,分別選擇菜單:編輯 > 定義圖案,名稱自定。可以參考圖6,7。
<圖3>
<圖4>
<圖5>
<圖6>
<圖7>
3、雙擊圖層面板,文字縮略圖區(qū)域調(diào)出圖層樣式,然后設(shè)置參數(shù):
斜面和浮雕:
<圖8>
紋理:這是PS自帶的云彩圖案,如果沒(méi)有可以先把圖案?jìng)浞菀幌?,然后按照?qǐng)D10所示的方法找回。
<圖9>
<圖10>
4、確定后得到下圖所示的效果。
<圖11>
5、按Ctrl + J 把當(dāng)前文字圖層復(fù)制一層,效果如下圖。
<圖12>
6、按Ctrl + J 把當(dāng)前文字圖層復(fù)制一層,得到“文字副本2”圖層。然后再圖層面板縮略圖區(qū)域右鍵選擇“清除圖層樣式”,效果如圖14。
<圖13>
<圖14>
7、創(chuàng)建圖層面板“文字副本2”圖層縮略圖,調(diào)出圖層樣式,然后設(shè)置參數(shù)。
投影:顏色為暗紅色:#010101,其它設(shè)置如下圖。
<圖15>
內(nèi)陰影:顏色為暗紅色:#010101,其它設(shè)置如下圖。
<圖16>
外發(fā)光:混合模式為“顏色減淡”,顏色為橙紅色:#ee5f57,其它設(shè)置如下圖。
<圖17>
內(nèi)發(fā)光:混合模式為“顏色減淡”,顏色為白色,其它設(shè)置如下圖。
<圖18>
斜面和浮雕:高光及陰影的顏色都為白色,其它設(shè)置如下圖。
<圖19>
等高線:
<圖20>
紋理:選擇剛才定義的圖案,這里會(huì)自動(dòng)轉(zhuǎn)為黑白,其它設(shè)置如下圖。
<圖21>
光澤:顏色為白色,其它設(shè)置如下圖。
<圖22>
顏色疊加:混合模式為“顏色減淡”,顏色為白色,其它設(shè)置如下圖。
<圖23>
漸變疊加:漸變色設(shè)置為黑白,其它設(shè)置如下圖。
<圖24>
圖案疊加:也是之前定義的圖案,其它設(shè)置如下圖。
<圖25>
描邊:填充類型選擇“圖案”,再選擇之前定義的圖案,其它設(shè)置如下圖。
<圖26>
8、確定后得到小圖所示的效果。
<圖27>
9、按Ctrl + J 把當(dāng)前文字圖層復(fù)制一層,然后在圖層面板縮略圖位置右鍵選擇“清除圖層樣式”,如圖28,得到圖29所示的效果。
<圖28>
<圖29>
10、雙擊圖層面板當(dāng)前圖層縮略圖調(diào)出圖層樣式,設(shè)置參數(shù)。
內(nèi)陰影:顏色為橙黃色:#f38627,其它設(shè)置如下圖。
<圖30>
內(nèi)發(fā)光:混合模式為“疊加”,顏色為白色,其它設(shè)置如下圖。
<圖31>
斜面和浮雕:
<圖32>
等高線:
<圖33>
圖案疊加:混合模式為“點(diǎn)光”,圖案為之前定義的圖案,其它設(shè)置如下圖。
<圖34>
11、確定后把填充改為:0%,得到下圖所示的效果。
<圖35>
12、按Ctrl + J 把當(dāng)前圖層復(fù)制一層,同上的方法清除圖層樣式。然后雙擊圖層面板當(dāng)前圖層縮略圖載入圖層樣式。
斜面和浮雕:高光顏色:#d4d3ce,陰影顏色:#3a2e1e,其它設(shè)置如下圖。
<圖36>
等高線:
<圖37>
紋理:這是PS自帶的圖案。
<圖38>
13、確定后把填充改為:0%,得到下圖所示的效果。
<圖39>
14、按Ctrl + J 把當(dāng)前圖層復(fù)制一層,得到“文字副本5”圖層,然后右鍵選擇“清除圖層樣式”,效果如圖41。
<圖40>
<圖41>
15、雙擊圖層面板當(dāng)前圖層縮略圖調(diào)出圖層樣式,設(shè)置參數(shù)。
投影:混合模式為“強(qiáng)光”,顏色為白色,其它設(shè)置如下圖。
<圖42>
外發(fā)光:混合模式為“線性光”,顏色為橙黃色:#ff7f00,其它設(shè)置如下圖。
<圖43>
斜面和浮雕:高光顏色為橙黃色:#ffcd02,陰影顏色為:#621702,其它設(shè)置如下圖。
<圖44>
紋理:
<圖45>
16、確定后把填充改為:0%,效果如下圖。
<圖46>
最后把整體銳化一下,完成最終效果。
在我們制作界面的時(shí)候經(jīng)常會(huì)看到網(wǎng)上有很多的絢麗的界面他們的圖形都非常炫酷。如何才能快速的制作出這樣效果呢?那么今天MICU教大家如何使用2部方法制作炫酷的APP界面。喜歡的緣友們一起來(lái)學(xué)習(xí)吧。
先看看效果圖
第1步
繪制圖形
新建圖層選擇畫板(ps cc 2015才有的功能),選這iPhone6的尺寸大小。
新建完圖層后我們使用工具欄中的橢圓工具繪制一個(gè)橢圓形。雙擊形狀圖層將形狀的顏色改為黑,
透明圖設(shè)置為5%。
選擇形狀圖層,Ctrl+J復(fù)制出同樣的一個(gè)形狀。
選擇復(fù)制出來(lái)的圖層,【Ctrl+T】將旋轉(zhuǎn)的角度調(diào)整為45°。使用同樣的方式Ctrl+J進(jìn)行復(fù)制圖層,
再Ctrl+T進(jìn)行旋轉(zhuǎn),重復(fù)3次同樣的操作后繪制以下的形狀效果。
將繪制好的圖層全部選中【Ctrl+G】對(duì)圖層進(jìn)行編組,方便后面的制作。
第2步
添加顏色,加強(qiáng)細(xì)節(jié)
在圖層面板中底部找到【新建圖層】按鈕點(diǎn)擊,新建一個(gè)空白圖層。
使用工具欄中的【畫筆工具】繪制顏色。在繪制的前可以調(diào)整畫筆的大小和顏色,雙擊工具欄中的顏色進(jìn)行設(shè)定前景色和背景色。通過(guò)使用【畫筆工具】將顏色繪制成從藍(lán)色到桃紅色的漸變效果。
漸變顏色圖層繪制好后,在圖層與編組之間按住【Alt】鍵進(jìn)行圖層與編制之間的嵌套,讓漸變的顏色嵌套到下面的編組上。從而完成以下的效果。
選擇圖層編組,Ctrl+J復(fù)制新的編組。選擇復(fù)制的編組Ctrl+T進(jìn)行變換,縮放的時(shí)候后按住shift+Alt鍵拖動(dòng)邊緣的方塊對(duì)圖形進(jìn)行進(jìn)等比縮放。將圖形比例調(diào)整到合適的大小,讓形狀顯得更有層次和空間。
為了讓顏色嵌套到所有的圖層上,選中形狀的兩個(gè)編組【Ctrl+G】把圖層下面的兩個(gè)編組合成為一個(gè)編組。然后在顏色層與編制之間按住【Alt】將圖層嵌套到合成的編組上,這時(shí)候背景的主要形狀就繪制好了。
背景效果制作完后,使用工具欄中的【文字工具】制作字體,文字顏色設(shè)置為白色,大小設(shè)定280px。
Alt鍵拖動(dòng)復(fù)制字體圖層,改成副標(biāo)題的文案。在【窗口】中找到【字符】面板調(diào)整文字的字間距到合適的間距,將字體大小為42px,文字字間距為60。
文字制作好后,再次豐富一下背景的效果。選擇路徑【橢圓工具】,在繪制的時(shí)候按住【Shift】繪制一個(gè)正圓。
雙擊繪制好的路徑圖層打開【圖層樣式】面板選擇【漸變疊加】。
在【漸變疊加】面板中雙擊‘“漸變條”調(diào)出漸變編輯器調(diào)整藍(lán)色到紫色的漸變效果。
做好一個(gè)圓形的漸變效果后,選擇圖層【Ctrl+J】復(fù)制一個(gè)新的圖層。然后【Ctrl+T】對(duì)新的圖層進(jìn)行縮放。
將圓形調(diào)整到合適的大小后,再雙擊圖層調(diào)整漸變?yōu)榉较驗(yàn)榉错懀瑥亩訌?qiáng)兩個(gè)圓形之間的層次效果。
但炫酷的效果完成后,我們可以對(duì)整體的頁(yè)面進(jìn)行功能布局。繪制好功能的按鈕及子功能的ICON圖標(biāo)等,從而讓頁(yè)面變得更加的豐富和細(xì)膩。
聯(lián)系客服