App Icon好難做？如何快速設計App Icon與產生(How to Design and Add App icon)

AlberLee

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

5 min readJul 14, 2020

上面App icon你認得出幾個？

光看到icon就可以想到該品牌以及其提供服務

icon的重要性我想不言而諭

做好一個功能齊全強大的App當然也要美美的icon 搭配才行

看看市面上成功的App 無一例外都有鮮明簡約好看的icon

吸引使用者並注入品牌的形象

你會學到什麼

你將會設計出一個專屬的 APP LOGO

並且將它應用於開發的APP中

如何設快速設計出App Icon

設計Icon的方式有很多，專業的軟體如Photoshop , Illustrator 等

這邊要介紹的是一款簡單設計而且免安裝線上的網站 Canva

Canva

https://www.canva.com/

「 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圖檔並且是免費，佛心網站不用嗎？？

App Icon Generator

Generate icons and images for mobile apps, android and iOS. No need to upload or download. Works on your browser

appicon.co

進入網站後添加圖片在按下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）做一些怪怪的事吧!>