PS(Photoshop)CC教程如何製作炫酷的UI界面?

Tags: 教程, 炫酷, 界面,

主要介紹Photoshop CC 的用法及一些小技巧。PS CC版的教程。

PS(Photoshop)CC教程如何製作炫酷的UI界面

工具/原料

Photoshop CC軟件。

方法/步驟

新建一張790*400的畫布。

PS(Photoshop)CC教程如何製作炫酷的UI界面

執行“Alt+Delete”命令, 填充背景色為 #1c46e3,併為其添加漸變疊加圖層樣式 。

PS(Photoshop)CC教程如何製作炫酷的UI界面

PS(Photoshop)CC教程如何製作炫酷的UI界面

PS(Photoshop)CC教程如何製作炫酷的UI界面

選擇圓角矩形工具,創建 250*90\圓角半徑2像素 的白色圓角矩形,併為其添加 圖層樣式 。

PS(Photoshop)CC教程如何製作炫酷的UI界面

PS(Photoshop)CC教程如何製作炫酷的UI界面

效果如下圖。

PS(Photoshop)CC教程如何製作炫酷的UI界面

新建圖層,選擇橢圓選區工具畫一個如下圖的選區,並進行羽化(50px) ,執行“Alt+Delete”填充黑色 。

PS(Photoshop)CC教程如何製作炫酷的UI界面

PS(Photoshop)CC教程如何製作炫酷的UI界面

將繪製好的“黑色羽化圖形” 執行“Ctrl+T”命令變得扁一些。

PS(Photoshop)CC教程如何製作炫酷的UI界面

為該圖層添加蒙版結合畫筆和選區工具製作。

PS(Photoshop)CC教程如何製作炫酷的UI界面

調整為“柔光模式”。

PS(Photoshop)CC教程如何製作炫酷的UI界面

矩形工具繪製288*2的矩形,併為其添加 漸變疊加圖層樣式 ,在其下繪製1PX黑色直線。

PS(Photoshop)CC教程如何製作炫酷的UI界面

PS(Photoshop)CC教程如何製作炫酷的UI界面

通過直線工具和選取工具對界面進行細化。

PS(Photoshop)CC教程如何製作炫酷的UI界面

細化後效果。

PS(Photoshop)CC教程如何製作炫酷的UI界面

加入文字,為其添加1px修飾效果,將彩色loading添加圖層蒙版,做成36%狀態。

PS(Photoshop)CC教程如何製作炫酷的UI界面

進行仿光效繪製。

PS(Photoshop)CC教程如何製作炫酷的UI界面

添加icon。

整個界面風格是簡約風,選擇icon的時候也要選用風格相對一致。

PS(Photoshop)CC教程如何製作炫酷的UI界面

最後為icon和文字添加光效修飾。

PS(Photoshop)CC教程如何製作炫酷的UI界面

相關問題答案