iMessage用ステッカー情報配信中!

 

ステッカーを作る:

04.App Store用アイコンを作る

App Storeで表示されるアプリアイコンを作成します。

Apple Developerサイトで提供されているテンプレートを利用すると、規定のサイズのものを簡単に作成できます。

 

テンプレートの入手

  1. Apple UI Design Resourcesを開く。
  2. 「Download for Photoshop」もしくは「Download for Sketch」を選択し、次の画面で同意ボックスにチェックを入れて「Agree and Download」を選択。ダウンロードが開始される。
    Apple UI Design Resourcesのスクショ
  3. ダウンロードされた「iOS-10.0-Photoshop」フォルダの中の[Templates]-[App Icons]-[Template-iMessageAppIcons-iOS.psd]を使う。

 

テンプレートの使い方

  1. アイコンのデザインを用意する。
  2. Template-iMessageAppIcons-iOS.psdを開く。
    • ファイルを開いた時に、スマートフィルタマスクのサムネール上に無効を示す赤いバツがついている場合は、Shiftを押しながらサムネールをクリックすることでスマートフィルタマスクが有効になる
      テンプレートを開いたところ
  3. マスクの下にある、任意のグループフォルダ内のスマートオブジェクト(App Icon WideとApp Icon Squeare)サムネイルをそれぞれダブルクリックして、「Layer xx.psb」を開く。
    .psbの開き方の説明
  4. 新たに開いた.psbファイルに、アイコンのデザインを配置する。
    完成したら、ファイル名の横の「x」ボタンをクリックしファイルを保存する。
    .psbにアイコン画像を配置し保存する
    • 一つのApp Icon Wide(もしくはSqueare)に変更を加えると、リンクされた同名のスマートオブジェクト全てに同じものが反映される。App Icon Wide→楕円のアイコン App Icon Squeare→四角のアイコン
      同名のスマートオブジェクトに.psbの内容が反映された様子
      上図はApp Icon Wideを変更したところ
  5. App Icon WideとApp Icon Squeare両方のアイコンデザインを変更したら、[ファイル]-[生成]-[画像アセット」を選択。
    画像アセット機能でアイコンを自動生成する
  6. Template-iMessageAppIcons-iOS.psdと同じ場所に「Template-iMessageAppIcons-iOS-assetsフォルダ」が作られ、そこに必要なサイズのアイコンが全て自動生成される。
    自動生成の結果画面

上矢印
(c)2016 NobukoKuronuma

  1. Apple UI Design Resourcesのスクショ
    • テンプレートを開いたところ
  1. .psbの開き方の説明
  2. .psbにアイコン画像を配置し保存する
    • 同名のスマートオブジェクトに.psbの内容が反映された様子
  3. 画像アセット機能でアイコンを自動生成する
  4. 自動生成の結果画面

iMessage用ステッカー情報配信中!

  1. Apple UI Design Resourcesのスクショ
    • テンプレートを開いたところ
  1. .psbの開き方の説明
  2. .psbにアイコン画像を配置し保存する
    • 同名のスマートオブジェクトに.psbの内容が反映された様子
  3. 画像アセット機能でアイコンを自動生成する
  4. 自動生成の結果画面
  1. Apple UI Design Resourcesのスクショ
    • テンプレートを開いたところ
  1. .psbの開き方の説明
  2. .psbにアイコン画像を配置し保存する
    • 同名のスマートオブジェクトに.psbの内容が反映された様子
  3. 画像アセット機能でアイコンを自動生成する
  4. 自動生成の結果画面
  1. Apple UI Design Resourcesのスクショ
    • テンプレートを開いたところ
  1. .psbの開き方の説明
  2. .psbにアイコン画像を配置し保存する
    • 同名のスマートオブジェクトに.psbの内容が反映された様子
  3. 画像アセット機能でアイコンを自動生成する
  4. 自動生成の結果画面