アプリを作成する場合、iOS、Android、Windows の各デバイスでアプリアイコンや起動画面に使用する様々な画像が必要になります。Android アプリでは 1 つの画像のみ、Windows アプリでは 3 つの画像が必要ですが、iOS 用のすべてのグラフィックを作成するには、サイズの組み合わせが複雑になります。Asset Generator.psd ファイルと Adobe Photoshop CC の Generator 機能を使用すれば、これらのファイルの制作をまとめて自動化することができます。

Adobe Photoshop CC には、レイヤー名に基づいて Web グラフィックファイルの作成を自動化する Generator 機能が導入されています。Asset Generator.psd ファイルでは、Generator を利用して、アプリの作成時に画像ファイルを作成します。Generator により、それぞれのファイルとフォルダー構造が作成され、3 つのプラットフォーム用のファイルが整理されます。

InDesign を使用して起動イメージを作成する

Photoshop の代わりに InDesign を使用してデザイン作業を行うために、必要な PNG ファイルの作成と書き出しに InDesign を使用できるように InDesign テンプレートが Keith Gilbert 氏によって作成されています。スプラッシュスクリーンテンプレート(英語)を参照してください。

Photoshop Asset Generator の使用

  1. zip ファイルをダウンロードして解凍または展開し、Asset Generator.psd ファイルを既知の場所(AEM Mobile パブリッシングに必要なアセットの保存場所など)に移動またはコピーします。

    ダウンロード

  2. Adobe Photoshop CC で Asset Generator.psd ファイルを開きます。

  3. Generator を有効にするには、Photoshop CC でファイル/生成/画像アセットを選択します。

    このオプションを選択すると、Photoshop によりレイヤーパネルで定義したレイヤー名やグループ名に基づいてファイルが生成されます。Photoshop では、Asset Generator ファイルが保存されている場所に、ファイル名に基づいてアセットフォルダーが作成されます。アセットファイルのタイプ、画質、サイズ、名前およびフォルダー構造は、Photoshop ファイル内のレイヤー名やレイヤーグループ名によって決まります。

  4. スマートオブジェクトを編集するには、レイヤーのサムネールをダブルクリックします。スマートオブジェクトが別の一時的な Photoshop ファイルとして開きます。ファイル内には、レイヤーや別のスマートオブジェクトが含まれている場合があります。

    Asset Generator ファイルでは、Photoshop のスマートオブジェクトが多く使用されています。すべてのアイコンは 1 つのスマートオブジェクトを複製したものです。そのため、1 つのアイコンを編集すると、他のすべてのアイコンも自動的に更新されます。起動イメージの大半には、独立した個別のスマートオブジェクトが使用されています。

    緑のラベルが付いたレイヤーは、カスタマイズが必要なスマートオブジェクトです。緑のレイヤーは、レイヤーパネル、およびレイヤーパネルの起動イメージフォルダー内に含まれています。コンテンツを編集すると、アセットが再生成されます。

  5. 編集を行い、スマートオブジェクトファイルを保存して閉じます。メインの Photoshop ファイルに戻ると、スマートオブジェクトのすべての複製が自動的に更新されます。

    スマートオブジェクトのサムネールをダブルクリックして、コンテンツを編集します。ベクトルスマートオブジェクトは Adobe Illustrator で開くと編集できます。Illustrator でベクトルスマートオブジェクトを編集したら、Illustrator でファイルを保存して閉じ、Photoshop に戻ってコンテンツが自動的に更新されていることを確認します。

    Asset Generator ファイルに戻る前にすべてのスマートオブジェクトを保存して閉じると、スマートオブジェクトのすべての複製が更新されます。

  6. スマートオブジェクトのサムネールをダブルクリックして、コンテンツを編集します。ベクトルスマートオブジェクトは Adobe Illustrator で開くと編集できます。Illustrator でベクトルスマートオブジェクトを編集したら、Illustrator でファイルを保存して閉じ、Photoshop に戻ってコンテンツが自動的に更新されていることを確認します。Asset Generator ファイルに戻る前にすべてのスマートオブジェクトを保存して閉じると、スマートオブジェクトのすべての複製が更新されます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー