Photoshop CC 2015 リリースより、アセット抽出機能はこの記事で説明されている形式では使用できなくなりました。アートボード、レイヤー、レイヤーグループ、ドキュメントを画像アセットとして書き出す、より直観的な機能が Photoshop に導入されています。

新しい書き出しオプションについて詳しくは、アートボード、レイヤーなどの書き出しを参照してください。

「アセットを抽出」は Photoshop(2014)以前に含まれる機能で、Photoshop ファイルから Web やスクリーンのデザイン用にアセットをすばやく抽出するため、Adobe Generator の上にインターフェイスを表示します。Photoshop でレイヤーまたはレイヤーグループを選択し、グラフィカルユーザーインターフェイスを使用して JPG、PNG、SVG または GIF 画像アセットとして抽出します。

「アセットを抽出」で実行できる内容:

  • PSD から 1 つ以上の画像アセットに、レイヤーまたはレイヤーグループを抽出する
  • PNG、JPG、GIF または SVG の画像アセットを作成する
  • すべての画像アセットについて 1x、2x またはそれ以上のバージョンを設定する
  • 各画像アセットをプレビューする
  • 目的のフォルダーに簡単にアセットを抽出する
  • PSD が変更されたら必ず、抽出されるアセットが更新されるようにする

レイヤーまたはレイヤーグループを抽出する

複数のレイヤーまたはレイヤーグループを抽出するよう選択した場合、選択した項目ごとに個別のアセットを生成するオプションが提示されます。

  1. 1 つ以上のレイヤーまたはレイヤーグループを選択します。
  2. 次のいずれかの操作を実行します。
  • 選択した項目を右クリックして、コンテキストメニューからアセットを抽出を選択します。
  • Cmd+Opt+Shift+W(Mac)または Ctrl+Alt+Shift+W(Windows)のキーボードショートカットを使用します。
  • ファイル/アセットを抽出を選択します。

注意:

「アセットを抽出」は、Photoshop Generator の構文に従うレイヤー名を優先します。例えば、layer.gif という名前のレイヤーからアセットを抽出しようとすると、アセットを抽出ダイアログには、画像アセットに対する初期設定の形式として GIF が表示されます。

  1. アセットを抽出ダイアログで、生成する各アセットに対して次の設定を指定します。

    アセット形式:
    PNG-8、PNG-24、PNG-32、GIF、JPG、または SVG を選択します。
    画質スケール:
    JPEG アセットの場合、アセットの品質として 0 ~ 100% の値を指定できます。適切な方向にスライダーを調節します。
  1. 複数のバージョンのアセットを抽出するには、アセットを抽出ダイアログでアセットの隣にある + アイコンをクリックします。アセットごとに異なる形式、画質および拡大・縮小パラメーターを指定できます。
  2. 抽出をクリックします。
  3. アセットの抽出を継続するには、レイヤーの名前を変更する必要があると Photoshop から通知されます。これは、Generator の構文に従ってアセットを作成する場合、基礎となる Generator フレームワークを使用するためです。「OK 」をクリックして、アセットの抽出を継続します。
  4. 保存するフォルダーに、生成されたアセットを移動します。
  5. 抽出をクリックします。Photoshop は画像アセットを作成し、Finder(Mac)または Windows Explorer でこれらのフォルダーを開きます。アセットの作成中に、Photoshop Generator の構文に従って関連のあるレイヤーの名前が自動的に変更されます。

注意:

次回に画像アセットの抽出機能を実行すると、画像アセットとして抽出されるレイヤー/レイヤーグループがアセットを抽出ダイアログに表示されます。

アセットの解像度を指定する

あらかじめ生成された多数の設定の組み合わせを使用して、異なる目的に対して抽出の設定を指定し、アセットを指定することができます。例えば、Retina ディスプレイ用のアセットを生成できます。指定した設定は、ドキュメント全体に適用されます。

  1. 右側にある「アセットを抽出」セクションで、1 つ以上の解像度を指定します。
  2. リストに含まれない解像度を使用する場合、または別の解像度で抽出するアセットの保存先サブフォルダーを変更する場合、「設定」をクリックします。
  3. 解像度ごとの初期設定の接尾辞を使用するか、独自の接尾辞を追加します。
  4. 解像度ごとの初期設定のサブフォルダーを使用するか、必要に応じて異なるサブフォルダー名を指定することもできます。
  5. アセットを抽出ダイアログで「完了」をクリックすると、これらの設定がドキュメントに保存されます。次回アセットを作成したときは必ず、同じ設定が使用されます。今後のすべてのアセットは、Photoshop CC のどのインスタンスでも、ドキュメントを開くと、ここで選択された解像度を使用して作成されます。

アセットを自動で生成

必要に応じて、「ドキュメントの更新時にアセットを自動で生成」オプションを選択できます。このオプションは、Photoshop Generator の生成/「画像アセット」オプションと同期されます。「アセットを抽出」オプションを有効にすると、Generator のオプションも自動的に有効になります。

開発者との共有

  1. Creative Cloud と同期される、Creative Cloud のフォルダーに PSD ファイルを保存します。
  2. アセットを抽出」(ファイルアセットを抽出)を開いて、必要なアセットを追加します。「抽出」をクリックして初期設定の保存先フォルダーを選択します。
  3. Creative Cloud で PSD を開くと、抽出したアセットのリストと一緒に Photoshop ファイルを表示できるようになります。
  4. Creative Cloud による共同作業により開発者と作成した PSD およびアセットを共有できるようになりました。

一般的なエラー

「アセットを抽出」のレイヤーが空ダイアログ

空のレイヤーまたは画像をレンダリングできないレイヤーは、アセットを抽出ダイアログで表示できません。これらのレイヤーは、クリッピングマスク、調整レイヤーまたはピクセルのないレイヤーである可能性があります。

アセット名が競合

同じ名前のレイヤーを別のグループに分割している場合、アセットは通常一つのディレクトリにレンダリングされるため、お互いを上書きします。これを回避するために、Photoshop は競合を検知するとレイヤーの名前を自動的に変更します。

名前の変更を上書きすると、選択した名前を持つ既存のアセットが上書きされることを防止するため、このエラーが表示されます。

アセット名に無効な文字が含まれている場合にも、このエラーが表示されます。この問題を解決するには、無効な文字を使用しないでファイル名を変更します。

画像はドキュメントの範囲外にあります

カンバスを裁ち落としたため、抽出で画像をレンダリングできませんでした。カンバス内に収まるように画像を移動します。

不明なエラーが発生しました

このエラーは、アセットを抽出ダイアログボックスが開いているときに Adobe Generator が応答しなくなると発生します。この問題を修正するには「完了」をクリックして、アセットを抽出ダイアログを閉じ、ファイルを保存して、Photoshop を再起動します。

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

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