當前位置:
首頁 > 最新 > 兩步打造炫酷界面!

兩步打造炫酷界面!

我們經常可以在App中看到一些配色很炫酷,圖形又很複雜的界面,這類界面中的圖形其實大部分都有規律可循。只要掌握了規律,製作起來就比較簡單了。

今天米醋就來教大家,如何兩步打造炫酷界面!

繪製基礎圖形

1

啟動PhotoshopCC 2017,按【Ctrl N】組合鍵新建一個文件,將【文檔類型】設置為【畫板】,將【畫板大小】設置為【iPhone6(750,1334)】。

在【工具箱】中選擇【橢圓工具】,然後在畫板中繪製一個橢圓圖形,將填充色設置為黑色,同時關閉描邊,接著設置圖層的【不透明度】為6%。

按【Ctrl J】組合鍵複製一個橢圓形狀,然後按【Ctrl T】組合鍵進入自由變換模式,按住【Shift】鍵將圖形順時針旋轉45°;繼續複製一個橢圓形狀,然後將其順時針旋轉90°;再次複製一個橢圓形狀,然後將其順時針旋轉135°。

同時選擇所有的橢圓形狀圖層,按【Ctrl G】組合鍵對其進行編組,以方便後面的製作。

選擇【組1】圖層組,按【Ctrl J】組合鍵複製一個圖層組,然後按【Ctrl T】組合鍵進入自由變換模式,按住【Shift Alt】組合鍵將圖形等比例縮小。

接著同時選擇兩個圖層組,按【Ctrl G】組合鍵對其進行編組。

添加顏色與細節

2

下面為圖形添加顏色。按【Shift Ctrl N】組合鍵在【組2】圖層組的上一層新建一個【圖層1】,將前景色設置為桃紅色【R:255,G:8,B:182】,背景色設置為藍色【R:0,G:138,B:255】,然後使用【畫筆工具】在畫板中單擊滑鼠左鍵,繪製一塊桃紅色,接著按【X】鍵切換前景色和背景色,最後繼續單擊滑鼠左鍵,繪製一塊藍色。

這裡提供一張隱藏了【組2】圖層組的效果供大家參考。

參考圖

選擇【圖層1】,然後【Ctrl Alt G】組合鍵將其設置為【組2】圖層組的剪貼蒙版,使其只作用於【組2】圖層組。

下面添加界面的細節

使用【橫排文字工具】在圖形的中間位置輸入數字28,然後將字體設置為Politica、大小設置為280點、顏色設置為白色。

在【工具箱】中選擇【移動工具】,然後按住【Shift Alt】組合鍵向下移動複製一個文字,將文字修改為micudesign,接著將字體大小設置為42點、字距設置為60。

下面豐富一下背景。按住【Shift】鍵使用【橢圓工具】在圖形中間繪製一個圓形,將圖層調整到【圖層2】的上一層,然後將圖層的【不透明度】調整為20%。

為圓形添加一個【漸變疊加】樣式,然後設置一個藍色到紫色的漸變色,並將【角度】調整為-29°。

複製一個圓形,然後將其等比例縮放到合適的大小,接著在【圖層樣式】對話框中勾選【漸變疊加】樣式的【反向】選項,這樣可以加強兩個圓形之間的層次效果。

最後是對整體界面進行功能布局,將按鈕和圖標排列在界面的下部,並製作好文字信息,從而讓界面效果變得更加豐富和細膩。

最終效果

回復【R】免費下載 Adobe 2020全套安裝包

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!


請您繼續閱讀更多來自 MICU設計 的精彩文章:

浮層引導頁和空白頁的重要性!
繼古天樂張家輝之後,這家網遊竟然請到歐文代言!