做 App Icon 好簡單,丟一張圖搞定所有大小(外加一點點作圖教學)
◆作業2–1:為 App 製作 Icon(使用 App Icon Generator)◆
Step1:作圖
因為習慣的關係,這裡使用 Photoshop 及 Illustrator(以下簡稱 PS 及以拉)
一般製作可以不用用那麼麻煩的方法,也有其他線上免費編輯軟體可使用
想說都寫文章了順便記錄流程,或許能幫助到其他人,所以沒興趣或是沒 Adobe 能用可以直接跳到下一步(つ´ω`)つ
在 PS 開一個 1024 x 1024 px 的檔案
因為蘋果要求最大要1024px,由大圖縮小才不會變成糊糊的
解析度:72 dpi(因為是螢幕用只要72就可以了)
色彩:RGB(螢幕專用)
因為 App 內容是跟這部動畫作品的角色有關,想要拿動畫 Logo 中間的「愛心&告」當做App Icon
這裡偷偷用以拉秘技─影像描圖(小聲)
用影像描圖可以快速把圖片變成向量圖,其實直接開 PS 去背也可以,但是點陣圖去背完還是點陣,影像描圖出來的向量圖可以無限放大也不會糊掉
不過如果原本的圖檔本身就很糊,就算描圖完還是會有很多雜訊der,沒有這麼神 (ㆆᴗㆆ)(而且影像描圖出來的路徑通常很不美麗(題外話))
註:因為這裡是純粹練習,所以才用這種快速的方法做
請不要!不要!不要!抓別人的插圖/Logo/Icon 偷偷分解拿去營利或當自己作品用,偷圖 BAD (メ゚Д゚)メ
Step2:使用 App Icon Generator 快速製作一堆 Icon
第一次點開網址,預設是所有裝置都勾起來的。因為只需要iPhone、iPad,所以只留上面兩個就好
然後上傳做好的圖、按下 Generate,做好之後會自動跳儲存 zip 檔的視窗
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彡゚