Just a Computer Graphics Studio & My Life

[iOS] 設定App Icon和Launch Image

一個APP給人的第一印象,決定這位使用者想要使用它的程度!所以有必要好好設計App Icon和Launch Image~那我這篇要講的是如何設定App Icon和Launch ImageXcode每次改版,就讓開發者要重學一次設定方法,不過好在過程都還滿簡單,只要鼓起勇氣去「踹」,失敗了大不了git checkout呀~

happyman icons2

從線上工具製作而成的icon們~

我在App icon size和Launch image size已提到,製作App Icon和Launch Image的尺寸為何,甚至有現成的線上工具可以使用,只要將影像上傳,馬上就可以拿到精美的App Icon!

happyman icons

從本機資料夾裡看從線上工具製作而成的icon們~

接下來其實很簡單,我幾個圖示就能很清楚表達⋯⋯當然要先開啟Xcode,然後點擊專案檔~

App Icon

可以見到App Icons有分三種設置:App、Spotlight、Settings,當然我們iPhone螢幕有不同的大小,而作業系統也有不同的版本,此外還要考慮視網膜螢幕,林林種種加起來其實還算滿多的!過去我一直以為,我只要準備最大的就好了,猜想程式軟體會自動幫我縮圖呀~但實際上它只負責「顯示」,不處裡「縮放」,大概是因為要效能好,寧願花點空間放圖檔。

Launch Image

 

Launch Images同樣需要考慮iPhone螢幕有不同的大小,而作業系統也有不同的版本,此外還要考慮視網膜螢幕⋯⋯

把圖檔拖曳到小資料夾匯入完之後,我們點擊Use Asset Catalog後進入更視覺化的設定頁面~

App Icon2

App Icons的詳細資料完全顯現在眼前!

Launch Image2

 

同樣Launch Images也是~

接著查看專案底下的資料夾Images.xcassets,存放著圖檔群和.json檔。

app icons catalog

App Icons的Content.json檔內容如下:

{
  "images" : [
    {
      "size" : "57x57",
      "idiom" : "iphone",
      "filename" : "icon57.png",
      "scale" : "1x"
    },
    {
      "size" : "57x57",
      "idiom" : "iphone",
      "filename" : "icon114.png",
      "scale" : "2x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "icon120.png",
      "scale" : "2x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "icon29.png",
      "scale" : "1x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "icon58.png",
      "scale" : "2x"
    },
    {
      "size" : "40x40",
      "idiom" : "iphone",
      "filename" : "icon80.png",
      "scale" : "2x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

launch images catalog

Launch Images的Content.json檔內容如下:

{
  "images" : [
    {
      "orientation" : "portrait",
      "idiom" : "iphone",
      "filename" : "Default~iphone.png",
      "minimum-system-version" : "7.0",
      "scale" : "2x"
    },
    {
      "orientation" : "portrait",
      "idiom" : "iphone",
      "filename" : "Default-568h@2x.png",
      "minimum-system-version" : "7.0",
      "subtype" : "retina4",
      "scale" : "2x"
    },
    {
      "orientation" : "portrait",
      "idiom" : "iphone",
      "filename" : "Default.png",
      "scale" : "1x"
    },
    {
      "orientation" : "portrait",
      "idiom" : "iphone",
      "filename" : "Default~iphone.png",
      "scale" : "2x"
    },
    {
      "orientation" : "portrait",
      "idiom" : "iphone",
      "filename" : "Default-568h@2x.png",
      "subtype" : "retina4",
      "scale" : "2x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

總算知道它怎麼記錄這些圖檔相關聯性的資料啦:)~

參考:Icon Slayer – Generates all the icon sizes you need for iOS and Android apps.。

廣告

Comments on: "[iOS] 設定App Icon和Launch Image" (2)

  1. 您好,想請教一下,如果在app執行中想更換icon,像iPhone的行事曆一樣不用更新就會更換日期,這是可行的嗎?

    按讚數

    • 目前只有內建的App才能做到,除非Apple開放SDK給開發者,那就有機會能實現這功能喔!

      觀察Google日曆App,它並沒有隨著日期更換icon,因此猜測它雖然想做,但SDK卻還沒支援。

      按讚數

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: