この情報は、米国アドビシステムズ社が提供している情報をもとにローカライズし、作成したものです。日本語環境での動作保証はしておりませんのでご了承ください。

必要な知識

  • Adobe Photoshop および Adobe Digital PublishingSuite の基本的な知識

ユーザーレベル : すべて

サンプルファイル

使用許諾条件に同意し、Adobe Web サイトからソフトウェアをダウンロードします。ダウンロード前に参照してください。

注意:

注意 : この文書に関するご質問は、DPS フォーラム(英語)をご利用ください。文書に関するご質問については、テクニカルサポートでは対応しておりませんのでご了承ください。

はじめに

DPS アプリケーションのビルドには、iOS、Android、Windows デバイスに対応するアプリケーションアイコン、スプラッシュスクリーン、およびカスタムナビゲーションアイコンに使用する複数の画像が必要です。Android 用アプリケーションには単一の画像、Windows 用には 3 つの画像が必要で、iOS 用にはサイズの組み合わせが複雑な画像作成が必要です。これら 3 つのプラットフォーム用アプリケーションをビルドする際に、DPS Asset Generator.psd ファイルおよび Adobe Photoshop CC の生成機能を使用することで約 30 のファイルを自動生成することができます。

Photoshop CC の生成機能は、レイヤー名に基づいて Web 用画像ファイルを自動的に作成します。DPS Asset Generator.psd は、この生成機能の特性を利用して DPS アプリケーションビルド時に必要な画像ファイルを作成します。生成機能はフォルダー構造および個別のファイルが作成され、各プラットフォームに対応するファイルを整理できます。

Asset Generator の設定

  1. DPS のパブリッシュに必要なアセットを保存する場所など、分かりやすい場所に DPS Asset Generator.psd ファイルを移動するか、またはコピーします。

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

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

上記手順を行うと、Photoshop のレイヤーパネルで定義されたレイヤーおよびグループ名に基づいてファイルが生成されます。Photoshop はファイル名に基づいた名前のフォルダーを作成します。この場合は DPS_Asset_Generator.psd ファイルと同じ場所に 「DPS Asset Generator-assets」という名前のフォルダーが作成されます。Photoshop ファイルのレイヤーおよびレイヤーグループ名によって、アセットのファイル形式、画質、サイズ、名前、フォルダー構造を指定できます。

レイヤーパネルのレイヤーおよびレイヤーグループ名によって生成時の出力が制御されます。

DPS Asset Generator ファイルは、Retina および非 Retina(1x、2x、および 3x)両方に対応する iOS デバイス、Android、および Windows アプリケーション用の画像ファイルを作成します。生成機能は Photoshop CC 以降で利用可能です。ファイル内のいくつかのレイヤーは複数の画像ファイルを生成し、画像サイズが変更されます。生成されたファイルはフォルダー構造で整理された各プラットフォームごとのフォルダーにアセットが格納されます。

生成機能によって構築されたフォルダー構造およびファイル

Photoshop の生成機能のシンタックスおよび使用方法について詳しくは、Introducing Adobe Generator for Photoshop CC(英語)を参照するか、Photoshop の生成機能について検索してください。

関連情報

DPS Asset Generator.psd ファイルの使用

DPS Asset Generator ファイルでは多くの Photoshop スマートオブジェクトが使用されています。すべてのアイコンは 1 つのスマートオブジェクトから複製されています。このため、1 つのアイコンを編集すると他のアイコンも自動的に更新されます。スプラッシュスクリーンのほとんどは個別の独立したスマートオブジェクトを使用しています。

  1. スマートオブジェクトを編集するには、レイヤーのサムネールをダブルクリックします。一時的な Photsohop ファイルとして別のウィンドウで開きます。このファイルには、レイヤーまたは追加のスマートオブジェクトが含まれる場合があります。

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

    レイヤーのサムネールをダブルクリックして Photoshop スマートオブジェクトを編集します。

    スマートオブジェクトオブジェクトにはレイヤーと追加のスマートオブジェクトまたはベクタースマートオブジェクトが含まれる場合があります。

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

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

編集方法について

ラベルがグリーンのレイヤーは、カスタマイズが必要なスマートオブジェクトです。レイヤーパネルパネル直下と Launch Images グループ内を確認してください。コンテンツを編集すると、アセットが再生成されます。

グリーンおよびイエローラベルのスマートオブジェクトを編集します。

  • レイヤーパネル直下で「Double-click thumbnail to edit master icon design」という名前のレイヤーサムネールをダブルクリックします。
  • Launch Images are independent Smart Objects グループ内でラベルがグリーンのスマートオブジェクトを編集します。スプラッシュスクリーンはサイズや方向のデザインが異なるため、スプラッシュスクリーンの多くは独立したスマートオブジェクトになっています。16:9 の 2 つの iPhone 用画像は複製されたスマートオブジェクトで、一方を編集するともう一方は自動的に更新されます。
  • スマートオブジェクトを編集する際は、アートワークの領域内でデザインを保持し、ピクセル寸法は変更しないでください。
  • 生成されたアセット寸法を確認します。
  • 2 つの Windows スプラッシュスクリーンでは透明がサポートされます。これら 2 つのアセットに使用するスマートオブジェクトには「pixel defender」という名前のレイヤーが含まれています。「pixel defender」レイヤーは透明ですが、四隅に不透明な 1 px のペイントが含まれており、アセットの寸法を保護します。スマートオブジェクトの他のレイヤーに透明を含めることができます。

DPS App Builder でファイルを使用する

iOS 用 DPS App Builder のアイコンとスプラッシュスクリーンパネルで、各アセット用のフォルダーアイコンをクリックし、手動で各アセットを読み込むことができます。または、Mac OS の Finder からすべてのアイコンとスプラッシュスクリーンを DPS App Builder にドラッグ&ドロップできます。iOS フォルダーで nav フォルダーおよび nav フォルダー内のファイル以外をすべて選択し、アイコンとスプラッシュスクリーンパネルにドラッグ&ドロップします。ドラッグ&ドロップされたアセットは、DPS App Builder によって寸法に基づく適切なエントリフィールド内に読み込まれます。HD iPad に対してもドラッグ&ドロップの操作を繰り返し行います。アプリケーションが iPhone 用の場合は、iPhone 用 SD/HD アセットを読み込む操作を繰り返し行います。

Android または Windows アプリケーションをビルドしている場合は、アプリケーションをビルドまたは提出する際に、対応するフォルダーで生成されたアセットを使用します。Xcode を使用している場合は、生成されたファイル名の変更を選択する場合があります。

その他

この文書では、様々なプラットフォームに対応する DPS アプリケーションをビルドする際に必要なアセットを生成する方法を説明しています。これらのプラットフォームに対応するアプリケーションのビルドについて詳しくは、以下の Digital Publishing Suite ヘルプを参照してください。

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

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