做 App Icon 好簡單，丟一張圖搞定所有大小（外加一點點作圖教學）

◆作業2–1：為 App 製作 Icon（使用 App Icon Generator）◆

先上成品 ٩(｡・ω・｡) و 有了Icon看起來就跟真的 APP 一樣了 XD

Step1：作圖

因為習慣的關係，這裡使用 Photoshop 及 Illustrator（以下簡稱 PS 及以拉）
一般製作可以不用用那麼麻煩的方法，也有其他線上免費編輯軟體可使用
想說都寫文章了順便記錄流程，或許能幫助到其他人，所以沒興趣或是沒 Adobe 能用可以直接跳到下一步(つ´ω`)つ

在 PS 開一個 1024 x 1024 px 的檔案
因為蘋果要求最大要1024px，由大圖縮小才不會變成糊糊的
解析度：72 dpi（因為是螢幕用只要72就可以了）
色彩：RGB（螢幕專用）

影像描圖有很多選項可以選，快速把有背景的點陣圖片分解成向量圖。描圖完之後「展開」、「解除群組」即可選取自己需要的部份（因為這張圖其他字是白色的，跟描圖後的白背景混在一起了，所以只剩下紅色的部份還在）

因為 App 內容是跟這部動畫作品的角色有關，想要拿動畫 Logo 中間的「愛心＆告」當做App Icon

這裡偷偷用以拉秘技─影像描圖（小聲）
用影像描圖可以快速把圖片變成向量圖，其實直接開 PS 去背也可以，但是點陣圖去背完還是點陣，影像描圖出來的向量圖可以無限放大也不會糊掉
不過如果原本的圖檔本身就很糊，就算描圖完還是會有很多雜訊der，沒有這麼神 (ㆆᴗㆆ)（而且影像描圖出來的路徑通常很不美麗（題外話））

註：因為這裡是純粹練習，所以才用這種快速的方法做
請不要！不要！不要！抓別人的插圖/Logo/Icon 偷偷分解拿去營利或當自己作品用，偷圖 BAD (ﾒﾟДﾟ)ﾒ

在以拉選取需要的部份後，貼回 PS 時記得選「智慧型物件」，放大縮小時才不會影響圖面。調整至自己滿意的大小後，按下 Enter、存檔就完成了（要留背景色不要去背喔）

Step2：使用 App Icon Generator 快速製作一堆 Icon

App Icon Generator

第一次點開網址，預設是所有裝置都勾起來的。因為只需要iPhone、iPad，所以只留上面兩個就好

然後上傳做好的圖、按下 Generate，做好之後會自動跳儲存 zip 檔的視窗

搭啦～解壓縮後所有 App 所需 Icon 就出現啦！連要用在 App Store、Google Play 商店的 Icon 圖都幫你搞定

Step3：貼進 Xcode 的 Assets ，儲存、輸出

點進專案的 Assets.xcassets →先把原本的 App Icon 刪掉→點開下載的資料夾中的「Assets.xcassets」資料夾→複製「AppIcon.appiconset」→貼上Xcode專案中的 Assets.xcassets 裡（直接看上面 GIF 操作看比較好懂）

複製貼上時要用 cmd+C、cmd+V 唷，直接右鍵複製資料夾的話會直接貼上一個資料夾在旁邊喔 XD

備註

App Icon Generator 是有離線桌機版可以用的，Mac、Windows 都有支援
不過為了節省電腦空間、現在網路也不難取得，我還是會用線上版吧 ( ﾟ∀ﾟ)o彡ﾟ

【本次參考教學文章】

從 App Icon Generator 產生 iOS App Icon