読者です 読者をやめる 読者になる 読者になる

からたちねみち

歌を作っています。Vocaloid、主に結月ゆかり、またはiPhoneアプリ開発

アイコン(AppIcon)のサイズ調整とXcodeへの設定方法

iPhoneアプリ開発

アプリのアイコンを設定する方法です。

バージョン情報

  • Xcode7.2

作業項目

  1. アイコンを設定する場所を確認
  2. 画像を用意
  3. 画像サイズを調整
  4. Xcodeに画像を貼り付け
  5. 実機で確認

 

アプリのアイコンは、iPhoneやiPadなど各環境ごとにそれぞれサイズを用意する必要があります。

まずは作成したアイコンの写りを実機で確認するため、手持ちのiPhoneまたはiPadのサイズにあったものだけを設定してみます。iPhone5sでやってみます。

アイコンを設定する場所を確認

アイコンは、XcodeのAssets.xcassetsのAppIconという場所にpngファイルをペタペタと貼り付けていきます。

f:id:bettychang:20160105181734p:plain

右側の点線の箇所に画像をドラッグする

 

画像を用意

ではアイコンに使用する画像を用意します。ファイルの種類(拡張子)はpngです。

 

画像のサイズを調整

アイコンはサイズが小さいので、決められたサイズに縮小する必要があります。まず用意したファイルをコピーしてください。コピーしたらダブルクリックしてプレビューを開いてください。

f:id:bettychang:20160105175523p:plain

 

このファイルをアイコンファイルサイズに縮小します。

必要なサイズはXcodeのAppIconの画面に表示されています。

f:id:bettychang:20160105181925p:plain

 

そうとうな数がありますね。とりあえずiPhone5sでアイコンの写りを確認したいので一つだけ用意します。真ん中のiPhoneApp7-9用の画像を用意します。

  • 60ptの2×

こちら見方ですが、

60ピクセルの2倍、つまり120ピクセル×120ピクセルの画像を設定するという意味です。

ptと書いてあるのでポイントかと思ったのですが、120ポイントだとサイズエラーになります。なんだかよくわかりませんが、正解はピクセルのようです。

ではプレビューソフトで画像を120×120ピクセルに縮小してみましょう。

f:id:bettychang:20160105182937p:plain

  1. プレビューソフトのメニューのツールを選択
  2. サイズを調整...をクリック

 

調整用ウインドウが開きますのでサイズを設定します。

f:id:bettychang:20160105183645p:plain

  1. サイズをあわせる:カスタム
  2. 縦横比を固定のチェックを外す
  3. ピクセルを選択
  4. 幅と高さを入れる(今回なら120)
  5. OKをクリック

 

するとサイズが小さく表示されます。

f:id:bettychang:20160105183901p:plain

 

Xcodeに画像を貼り付け

縮小した画像をFinderで開き、Xcodeにドラッグします。場所はXcode左のツリー上にあるAssets.xcassets - AppIcon - iPhoneApp 7-9 60pt  - 2xです。

f:id:bettychang:20160105184126p:plain

 

実機で確認

ではアプリをiPhoneで実行してみます。

f:id:bettychang:20160105184802p:plain

無事表示されました。

余談ですが、今回例にだしたアイコンはいま製作中のアプリなのですが、アイコンにタイトルの文字を入れてみました。が、ぜんぜんちいさくて見えないですね...。調整しようと思います。

iPhoneで気に入ったアイコンが表示されたら、その画像をiPadなど他の画像も上記同様にXcodeに取り込んでエラーがないことを確認します。

以上です。

ご覧いただき、ありがとうございました。