編者按：制作炫酷的UI界面可以說(shuō)是剛需，尤其是對(duì)于從事游戲UI設(shè)計(jì)和電商設(shè)計(jì)的同學(xué)而言。這次教程給我們帶來(lái)的UI界面設(shè)計(jì)教程就是與此有關(guān)。最終效果可能并不符合你的需求，但是最重要的是學(xué)習(xí)制作的思路和方法。

先看一下最終效果~

應(yīng)用軟件: Photoshop – CS6

今天給“小伙伴”們帶來(lái)一個(gè)酷炫的《UI設(shè)計(jì)小教程》，讓我們一起來(lái)打造一枚流光質(zhì)感界面吧~。

1.創(chuàng)建畫布

新建一張790*400的畫布（不要忘記文件命名哈~）

2.制作背景

Alt+Delete 填充背景色為 #1c46e3，并為其添加漸變疊加圖層樣式 (如下圖所示）

3.創(chuàng)建界面底托

選擇圓角矩形工具，創(chuàng)建 250*90圓角半徑2像素 的白色圓角矩形，并為其添加 圖層樣式 (如下圖所示）

到此為止的效果如下圖~（親，你有跟上節(jié)奏嗎）

4.為底托添加效果

新建圖層，選擇橢圓選區(qū)工具畫一個(gè)如下圖的選區(qū)，并進(jìn)行羽化(50px) ,Alt+Delete填充黑色 (如下圖所示）

將繪制好的“黑色羽化圖形” Ctrl+T 變得扁一些 (如下圖所示）

為該圖層添加蒙版結(jié)合畫筆和選區(qū)工具制作 (如下圖所示）

調(diào)整為柔光模式 (如下圖所示）

5.制作彩色Loading條

矩形工具繪制288*2的矩形，并為其添加 漸變疊加圖層樣式 ，在其下繪制1PX黑色直線 (如下圖所示）

6.現(xiàn)在給整個(gè)界面增加細(xì)節(jié)

這一步主要是通過(guò)直線工具和選取工具對(duì)界面進(jìn)行細(xì)化 (如下圖所示）

大家可以按照上述方法繪制其余的細(xì)節(jié)（效果如下圖）

7.為界面添加文字，并將loading修改到36%狀態(tài)

加入文案，為其添加1px修飾效果，將彩色loading添加圖層蒙版，做成36%狀態(tài) (如下圖所示）

8.為L(zhǎng)oading添加加載時(shí)的預(yù)期動(dòng)畫效果

這里主要是靈活運(yùn)用選區(qū)工具，畫筆工具，鉛筆工具（鉛筆工具作用于繪制1px點(diǎn)）進(jìn)行仿光效繪制 (如下圖所示）

9.放上自己心愛(ài)的小icon，做適當(dāng)修飾~

因?yàn)檎麄€(gè)界面風(fēng)格是簡(jiǎn)約風(fēng)，所以在選擇icon的時(shí)候也要選用風(fēng)格相對(duì)一致的喲~ (如下圖所示）

10.最后為icon和文字添加光效修飾，再加入屬于你自己的印記，大功告成~

光效運(yùn)用了這里的素材-http://bbs.16xx8.com/thread-167548-1-1.html (如下圖所示）

/ 小結(jié) /

小伙伴本有木有在觀看的過(guò)程中發(fā)現(xiàn)什么？
……
>沒(méi)錯(cuò)！
就是那些12px的細(xì)節(jié)繪制啦！
在你具備了一些初級(jí)設(shè)計(jì)能力之后，細(xì)節(jié)的處理就成為了，你進(jìn)階的重中之重啦！
所以大家一定要記得培養(yǎng)“細(xì)節(jié)的處理能力”哈！