手把手教你用PS制作炫酷的UI界面

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

　　手把手教你用PS制作炫酷的UI界面

　　1.創(chuàng)建畫(huà)布

　　新建一張790*400的畫(huà)布(不要忘記文件命名哈~)

　　2.制作背景

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

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

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

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

　　4.為底托添加效果

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

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

　　為該圖層添加蒙版結(jié)合畫(huà)筆和選區(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)畫(huà)效果

　　這里主要是靈活運(yùn)用選區(qū)工具，畫(huà)筆工具，鉛筆工具(鉛筆工具作用于繪制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://www.zcool.com.cn/gfx/ZMzA1Njgw.html (如下圖所示)

　　在你具備了一些初級(jí)設(shè)計(jì)能力之后，細(xì)節(jié)的處理就成為了，你進(jìn)階的重中之重啦!

　　所以大家一定要記得培養(yǎng)“細(xì)節(jié)的處理能力”哈!