#1 iOS App Icon 製作工具推薦
iOS App 在桌面顯示所用到的 Icon 有很多尺寸,雖然我有所有尺寸表、也有繪圖軟體可以自己做,但是借助一些工具可以更快的完成。
本文介紹二個 Icon 製作工具:
1. App icon Generator
線上 iOS App Icon 製作工具,以前都是用 Adobe XD 或是 Figma 自己做,這個網站只要把圖做好之後上傳就給你各種尺寸的 icon 圖。
- 前往 App icon Generator 網站
2. 上傳圖片:將預先製作好的 1024 X 1024 尺寸的圖片拖拉到網頁左邊 Click or drag image file
的灰色方塊裡
3. 右邊勾選要輸出的裝置,因為只需要手持裝置的icon,所以是勾選 iPhone 與 iPad
4. 點擊 Generate
下載 Icon,會獲得一個 AppIcons.zip 的壓縮檔
5. 解壓縮之後可以看到有多種規格的png圖片
6. 打開 Xcode 專案,點選 Assets.xcassets 選擇 AppIcon 按下 Delete 鍵刪除它。
7. 從剛剛解壓的檔案裡面找到 AppIcon.appiconset
按 Cmd + C 拷貝
8. 回到 Xcode 專案,點選 Assets.xcassets 右邊的空白處,按 Cmd + V 貼上。Xcode 就會把各種尺寸的 Icon 整理到對應的格子。
9. 按下編譯執行APP,可以看到模擬器上,自製的 Icon 已經出現在桌面上了。
2. Figma 工具
介紹完超方便的線上工具,再來介紹一下以前用 Figma 如何製作 App Icon。這邊只介紹 Icon 製作方式,至於 Figma 的基礎操作以後有機會再寫教學。
Figma 的好處是有很多分享的模板可以下載,不用自己辛苦從無到有。
- 前往 Figma 網站,下載 ICONKIT 的樣板
https://www.figma.com/community/file/823028816343077563
2. 按右上角的 ↓ Duplicate
把模版拷貝到自己的 Figma
3. 登入或註冊 Figma
必須要先有 Figma 帳號才能把模版加到到自己的 Drafts ,這邊先略過註冊過程直接登入,選擇用 Google帳號登入。
4. 進入 Drafts 草稿分頁後,就可以看到剛剛載的 ICONKIT,可以自己重新做檔案命名,在 ICONKIT 卡片上點二下打開檔案。
5. 模版首頁有 Icon 的製作步驟說明
- 設計你的 Icon圖案
- 打開 Icon 設計的 Layer
- 選擇 Hide Layer Content
- 把你設計好的圖貼進 Frame 裡
6. 按 Cmd + C 拷貝事先設計好的 Icon 檔,尺寸是 512 x 512
7. 左邊 Layer 點 Icon App Design 的小箭頭展開組件,選擇 [Hide Layer] 按下 Cmd + V 貼上
8. 貼上後的樣子
9. 左邊的 Layer 切換 Preview & Export iOS
是 iOS 的 Icon,第三個 Layer 是 Android 的 Icon。可以看到 Icon 全部按照尺寸填入。
10. 匯出 Icon,滑鼠選取要輸出的 Icon,右下 Export 選擇輸出格式為 PNG ,按下 Export
按鈕,會在桌面看到一個壓縮檔 ICONKIT (Community).zip
11. 解壓縮之後獲得的檔案列表
問題來了,其實這個列表並不齊全所以要自己補全缺少的尺寸,而且命名最好是與 Xcode裡的一樣會比較省事。
放入 Xcode的方式參照上面 App icon Generator 的方式
為什麼 Figma 比較麻煩還是要寫呢? 因為以前就是這麼過來的,沒有比較就沒有傷害啊😭
但是如果 你很熟 Figma 的話,其實可以自己改良這個 Icon 組件,讓它可以一個步驟就產生所有我們要的尺寸。就是一開始設定會比較花時間,之後就可以跟線上匯出 Icon一樣快了