App Icon好難做?如何快速設計App Icon與產生(How to Design and Add App icon)
上面App icon你認得出幾個?
光看到icon就可以想到該品牌以及其提供服務
icon的重要性我想不言而諭
做好一個功能齊全強大的App當然也要美美的icon 搭配才行
看看市面上成功的App 無一例外都有鮮明簡約好看的icon
吸引使用者並注入品牌的形象
你會學到什麼
你將會設計出一個專屬的 APP LOGO
並且將它應用於開發的APP中
如何設快速設計出App Icon
設計Icon的方式有很多,專業的軟體如Photoshop , Illustrator 等
這邊要介紹的是一款簡單設計而且免安裝 線上的網站 Canva
「 Canva 」在設計、排版、下載、協同合作功能上都是免費的非常佛除了部分設計要花一美金,可以設計的東西非常多ex:海報,履歷,簡報,卡片……等等這邊先不多加介紹 著重在App Icon
Step1 自訂尺寸1024*1024
首先註冊好Canva的帳號後在首頁的右下方自訂要製作圖的尺寸
設定1024*1024 按下建立
Step2 開始設計
接下就是你發揮想像力的時候了,開始設計屬於自己的icon吧!
不會設計也沒關係旁邊有許多範本可以供你參考
讓你站在設計大神的肩膀上設計出出色的Icon
這邊我打算替上一篇文章 人生倒數器LifeCountdowns App 設計Icon,因為Icon要簡單明暸,元素不要太多所以我在這邊採用元素來設計。並搜尋我的關鍵字Time
設計好後按下右上方下載就可以得到圖片了
設計完成:
如何產生App Icon
App Icon Generator 網站
這邊我們使用App Icon Generator這個網站 它可以非常快速的替你產生出
各式尺寸的icon圖檔並且是免費 ,佛心網站 不用嗎??
進入網站後添加圖片在按下Generate就可以產生了
下載解壓縮檔案把當中的Assets.xcassets 與 現在App中的Assets.xcassets替換
就可以看到icon改變囉
這邊我在LaunchScreen加了一樣的icon來讓App更具有完整性
在 LaunchScreen 上多停留幾秒
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {// Override point for customization after application launch.Thread.sleep(forTimeInterval: 0.4) // Sleep:0.4sreturn true}
使用 Thread.sleep
或是 sleep
都可以達成凍結效果
參考自<讓我們在啟動畫面(Launch Screen)做一些怪怪的事吧!>
後記
設計是一門博大精深的課程,需要花一輩子去學習
但像我這種設計菜雞可以藉由網路上設計大神的幫助下
在20分鐘產生出一個icon,也是頗有成就感的
最後看看業界設計的標竿 蘋果公司 創辦人之一 Steve Jobs 怎麼談設計
希望這篇文章能夠幫助到你(妳)
如有錯誤指正
I hope you found this guide helpful. If not, then please let me know either in the comments below, I’m AlberLee
Swift daily#5