UI教程,快速設(shè)計一個IOS應用圖標

來源:站酷 作者:Criscroc 學習:10961人次
教你快速打造優(yōu)美的 iOS 應用圖標

開始前,請先準備一個iOS 應用圖標模板,可以從iOS Icon Template或者App IconTemplate下載(我用的就是后者的素材)。

我的電腦屏幕上只顯示了 1024px 的大圖標,我覺得用這個模板做參考就可以了。

你可以將應用圖標模板進行裁剪,只保留 1024px 的圖標,或者處理模板上的其余元素。

AI教程,快速設(shè)計一個IOS應用圖標_www.theoat.com.cn

下面我們正式開始。

步驟 1:創(chuàng)建 iOS應用圖標的基本形狀

首先新建一個圖層并填充背景色,參考色值是#acced6。

AI教程,快速設(shè)計一個IOS應用圖標_www.theoat.com.cn

接下來,給顏色圖層添加蒙版,使其呈現(xiàn)圖標的輪廓。技術(shù)上來講這一步可要可不要,因為上傳圖片之后,蘋果官方會自動幫你切成圓角。

不過,為了呈現(xiàn)更好的視覺效果,我建議使用蒙版。

怎么操作呢?按住COMMAND(MAC 用戶)或者CTRL(Windows 用戶)鍵的同時點擊圖標模板圖層,顏色圖層就會出現(xiàn)一個選區(qū)啦。

AI教程,快速設(shè)計一個IOS應用圖標_www.theoat.com.cn

再在圖層面板的底部點擊蒙版圖標,就可以創(chuàng)建蒙版了。

步驟 2:添加漸變色

在顏色圖層點擊鼠標右鍵,在彈出的菜單中選擇混合選項。我們來給它加一個弱漸變。漸變的起始和終止色值分別為#acced6和#7cbece。

AI教程,快速設(shè)計一個IOS應用圖標_www.theoat.com.cn

漸變樣式選擇線性漸變,角度設(shè)置為135度,呈現(xiàn)出由左上角的深藍色到右下角的淺藍色漸變效果。

如果這兩種顏色順序搞顛倒了,調(diào)整角度為 -135 度或者 315 度就行了。

AI教程,快速設(shè)計一個IOS應用圖標_www.theoat.com.cn

步驟 3:創(chuàng)建內(nèi)圓

圖標中部的白色圓形是整個圖標設(shè)計的重要組成部分,我們可以利用iOS圖標柵格畫一個圓:使用橢圓工具(U)創(chuàng)建一個寬高為 890px 的正圓,

在屬性面板中可以調(diào)整它的大小以便與柵格對齊。

AI教程,快速設(shè)計一個IOS應用圖標_www.theoat.com.cn

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
受傷的心還可以愛誰2016-12-05 04:35
受傷的心還可以愛誰2016-12-05 04:35
感覺很不錯

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!