UI設計教程:製作可愛擬物手機APP圖標

本次教程是用ps製作出微擬物風格的手機主體圖標,整體形狀相對簡單,難度不算很大,但是在顏色選擇方面一定要慎重哦!要讓整體作品看起來乾淨清爽才能更好體現出這個主題圖標的特點。

在製作主題圖標的過程的時候,要先選好參考的圖標內容,圖標顏色。仔細觀察其他作者的作品中是如何表示出各個圖標的。這裡選擇了時間、播放器、天氣、相機、計算器、相冊。

在確定好自己的構思之後,先畫一個大致的草圖,然後就用軟件開始製作。在製作過程中,要注意光影、體積等。這裡的圖標是半擬物風格,可以用圖層樣式來實現。

在圖標製作好之後,排列順序可以按照顏色深淺明暗進行排列,讓整個畫面顯得有序規整,更好的體現出主題圖標的特點。

在整個創作過程中,圖標的光影體積是重點,應定要選擇乾淨明亮的顏色,才能突出這組圖標的特色,如若用色不當,會讓整體看起來不夠乾淨整潔,並且所有圖標都應該色澤統一,明暗統一,投影大小統一。

通過學習主題圖標的製作,讓我更進一步的瞭解軟件的應用,各個功能,並且能熟練使用,對今後製作各種原創作品有了更大的幫助,多做原創,對自己的思維、審美、設計都會有很大的益處,所以應多進行原創,提高自己的能力。

終稿


UI設計教程:製作可愛擬物手機APP圖標


教程步驟

一 、信息圖標

步驟 01 建立文檔並製作背景

新建文檔,大小3600*2800px,分辨率72。新建圖層,命名背景,填充前景色#f9dfb6,圖層模式改為正片疊底,不透明度32%。

步驟 02 製作底座

新建720*720px的圓角矩形,圓角半徑為200px,命名底座,填充顏色#ff7f8c,並添加圖層樣式來製造體積感。如圖。


UI設計教程:製作可愛擬物手機APP圖標


UI設計教程:製作可愛擬物手機APP圖標


UI設計教程:製作可愛擬物手機APP圖標


步驟 03 製作信息的基本形狀

新建430*320px的圓角矩形,再用鋼筆工具勾出信息圖形的小尾巴。將兩個圖層合併,命名為信息形狀,並添加圖層樣式,如圖。


UI設計教程:製作可愛擬物手機APP圖標


UI設計教程:製作可愛擬物手機APP圖標


UI設計教程:製作可愛擬物手機APP圖標


步驟 04 製作省略號

新建70*70px的橢圓,複製粘貼,得到3個圓,並且排列對齊,然後合併圖層,命名為省略號,調整參數,如圖。


UI設計教程:製作可愛擬物手機APP圖標


步驟 05 完成製作


UI設計教程:製作可愛擬物手機APP圖標


二 、天氣圖標

步驟 01 製作底座

新建720*720px的圓角矩形,圓角半徑為200,命名底座,填充顏色c6da8f,並添加圖層樣式來製造體積感,如圖。


UI設計教程:製作可愛擬物手機APP圖標


UI設計教程:製作可愛擬物手機APP圖標


UI設計教程:製作可愛擬物手機APP圖標


步驟 02 雲朵形狀的製作

按住shift,用橢圓工具製作2個240*240px和1個200*200px的圓,並製作一個矩形,將四個圖形合併,命名為雲朵,填充顏色#def1f1,如圖。


UI設計教程:製作可愛擬物手機APP圖標


添加圖層樣式,如圖。


UI設計教程:製作可愛擬物手機APP圖標


UI設計教程:製作可愛擬物手機APP圖標


步驟 03 製作太陽

用橢圓工具製作一個200*200的圓,填充顏色f39800,並命名為太陽。添加圖層樣式,如圖。


UI設計教程:製作可愛擬物手機APP圖標


UI設計教程:製作可愛擬物手機APP圖標


將太陽圖層放在雲朵圖層下面,完成製作。


UI設計教程:製作可愛擬物手機APP圖標


三 、時鐘圖標

創作思路:形狀比較簡單,主要製作刻度和時針、分針。指針通過調整圖層樣式突出該圖標的立體感以及光影感,用漸變疊加來給指針添加高光。


UI設計教程:製作可愛擬物手機APP圖標


四 、相冊圖標

創作思路:製作相冊主題圖標時,最難的部分就是用鋼筆工具勾出山的形狀,山一定要帶些弧度才能符合貼切主體圖標的風格。在圖形繪製好之後,一定要記得做出高光、漸變等效果。


UI設計教程:製作可愛擬物手機APP圖標


五 、相機圖標

相機主題圖標形狀基本由圓角矩形、正六邊形和圓形構成,在製作過程中一定要注意鏡頭的明暗變化,並且鏡頭需要做出投影突出它的立體感。實物鏡頭一般是黑色,但是在製作過程中一定要選擇合適的顏色,讓鏡頭和機身比較相配,不會突兀。


UI設計教程:製作可愛擬物手機APP圖標


六 、播放器圖標

播放器圖標的構成比較簡單,選擇的形狀製作相對容易,但是按鈕部分的三角形形狀需要帶一點弧度或者圓角,這個時候可以用AI製作出帶圓角的三角形,然後拖入PS中,這樣播放器的整體風格看起來就比較圓潤可愛啦。

UI設計教程:製作可愛擬物手機APP圖標


結語

本期教程到這裡就結束了,希望大家在練習過程中多思考、理解制作思路和操作方法,活學活用。

感謝您的閱讀,記得幫小編的文章點看、關注和分享哦! 如果對文章有自己的看法歡迎在下方評論區吐槽。你們的支持是我最大的動力!


分享到:


相關文章: