Creative Cloud アセットの無償の新機能である Creative Cloud Extract を使用すると、ブラウザーで直接 PSD (レイヤー、レイヤーカンプを含む)のコードを確認できます。Web デザイナーとデベロッパー間で PSD をやり取りする際に特に役立ち、デザイン情報を確認したり、制作用アセットをダウンロードすることもできます。Extract では、ブラウザーで次のような PSD ファイル操作を実行できます。

  • テキストおよび CSS をコピー
  • カラー、グラデーション、フォント情報の取得
  • エレメント間の距離の計測
  • 制作用に最適化された画像アセットの保存

Creative Cloud Extract を使用すると、PSD ファイルのデザインのコード化が劇的に簡素化し、煩雑な作業の繰り返しや作業者間のやり取りを大幅に削減できます。

注意:

Extract は読み取り専用です。PSD ファイルを編集することはできません。

スタイル情報の抽出

  1. Creative Cloud Web サイトにサインインします。
  2. Creative Cloud アカウントの「アセット」セクションに移動します。
  3. PSD ファイルを「ファイル」セクションにドラッグ&ドロップするか、「ファイルを選択」オプションを使用して PSD ファイルをアップロードします。 以前アップロードした PSD ファイルを開くこともできます。
  4. PSD ファイルのサムネールをクリックして、Extract ビューで開きます。
Extract ビューでファイルが開く

Extract ビューでは、ブラウザー内で様々な PSD デザインを確認できます。レイヤー階層を移動し、様々なレイヤーカンプを表示できます。PSD の一部を新しい画像ファイルとして抽出することもできます。PSD プレビューで任意のエレメントをクリックすると、レイヤーが選択され、その情報が表示されます。選択されたレイヤーで次の操作ができます。

エレメントの座標とサイズを表示およびコピー

PSD ファイルで 1 つのエレメントをクリックすると、情報パネルが表示されます。このパネルには、エレメントの幅と高さ、デザインでのエレメントのレイヤーの xy の位置が表示されます。

ピクセル(px)で表示されたデザインエレメントの座標とサイズ
パーセント(%)で表示されたデザインエレメントの座標とサイズ

注意:

W、H、X、Y などの値をクリックすると、その値がクリップボードにコピーされます。

Extract での計測値は、ピクセルまたはパーセント単位で表示できます。1 つのエレメントを選択した場合、PSD デザインの幅および高さの合計値を基準にした幅および高さの割合がパーセントで示されます。一方のエレメントが完全に他方のエレメントに含まれる 2 つのエレメントを選択した場合、内側のエレメントの幅と高さが、外側のエレメントのサイズを基準にして報告されます。

外側のエレメントの計測値を基準にして表示された内側のエレメントの計測値

注意:

値をクリックして、クリップボードにコピーします。

2 つのエレメント間の距離の表示

2 つのエレメント間の距離を表示するには、Shift キーを押しながらエレメントをクリックします。エレメント間の距離を知っておくと、マージンとパディングの情報を指定する際に役立ちます。

2 つのエレメント間の距離

CSS コードをコピー

PSD デザインでエレメントが選択された状態で、青い情報パネルで「CSS をコピー」をクリックして、エレメントの CSS をコピーします。CSS インスペクターでも、CSS コードを表示してコピーできます。

CSS コードの表示

注意:

Extract はプリプロセッサーに対応しています。「スタイル」タブで、「CSS」の横の (下向き矢印)をクリックすると、CSS プリプロセッサーを使用するオプションが表示されます。

CSS プリプロセッサーを使用するオプション

テキストをコピー

選択したエレメントにテキストが含まれる場合、「テキストをコピー」をクリックしてクリップボードにコピーします。

選択したテキストをクリップボードにコピー

フォント、カラー、グラデーション情報を表示およびコピー

デザインドキュメント(PSD)で使用されているフォント、カラー、グラデーションに関する情報を表示およびコピーするには、スタイルパネルを開きます。情報を表示した状態で、フォントサイズ、カラー、またはグラデーションスウォッチをクリックし、値をクリップボードにコピーします。

カラーグラデーションの値の例

エレメントを選択すると、使用されているテキストとカラーのスタイルがスタイルパネルでハイライト表示されます。

注意:

Adobe Typekit と統合することで、Extract から数千に及ぶ高品質なフォントにアクセスできるようになります。スタイルパネルの Typekit のフォントの横に、Typekit アイコン()があります。この Typekit アイコンをクリックすると、Extract で Typekit 上のフォントに対応したページが開きます。

使用する Web 対応フォントが見つかったら、Typekit 内のキットに追加し、運用コードでリンクを設定します。

選択したエレメントのフォントおよびカラー情報

カラーピッカーツールの使用

カラーピッカーツール()を使用すると、デザインのエレメントのカラーをすばやく特定できます。

  • カラーピッカーツールを選択し、デザイン内の任意の場所をクリックします。色が検出され、スタイルパネルにカラースウォッチとして追加されます。これで、カラーの CSS 情報を簡単に表示してコピーできます。
カラーピッカーツール

画像アセットの抽出

Creative Cloud Extract を使用すると、PSD の任意のレイヤーを選択し、画像アセットを抽出できます。アセットは 8-bit PNG、32-bit PNG、JPG および SVG 画像として抽出できます。

画像アセットを抽出

エレメントの青い情報パネルで、 アイコンをクリックして、次の操作を行います。

  1. 画像アセットの設定を確認します。必要に応じて、サポートされている別の画像形式(PNG、JPG または SVG)を選択します。
  2. JPG アセットを生成する場合は、画像アセットの画質を調整します。
  3. 必要に応じて、比率オプションを選択します。例えば、「比率: 2×」を選択します。アセットの比率は、0.1× から 5× の範囲で選択できます。
  4. 保存」をクリックします。
  5. アセットパネルで、生成したアセットを見つけます。Creative Cloud アセットで PSD ファイルの横に新規作成されたフォルダーにもあります。作成されたフォルダーの名前は、<ファイル名>-assets という形式です。たとえば、ファイルが adventure.psd であれば、そのアセットフォルダー名は adventure-assets となります。

    アセットパネルで画像サムネールをクリックすると、アセットがローカルマシンにダウンロードされます。
アセットパネル

注意:

ログインして Creative Cloud アセット内の PSD ファイルを表示すると、高度なアセット抽出機能にアクセスできます。アセットは、ダウンロードするたびにアセットパネルと Creative Cloud アセットの .psd_assets フォルダーに追加されます。アセットパネルで画像サムネールをクリックして、アセットをコンピューターにローカルにダウンロードできます。

アセットパネルは、別のユーザーからのリンクをクリックして PSD ファイルを表示した場合には使用できません。この場合 Extract を使用できますが、 アイコンをクリックすると、アセットがコンピューターに直接ダウンロードされます。ブラウザーのダウンロードマネージャーを使って、ローカルディスクのアセットを探します。

レイヤーの操作

レイヤーパネルには、PSD デザインのすべてのレイヤーとレイヤーグループが表示されます。Creative Cloud Extract は読み取り専用のため、レイヤーで行った変更が元の PSD ファイルに保存されることはありません。

レイヤーパネルでは、表示/非表示の切り替え、レイヤーエレメントの選択、アセットの抽出を行えます。

レイヤーまたはレイヤーグループを画像アセットとして抽出

PSD ファイルのレイヤーまたはレイヤーグループを画像アセットとして抽出できます。次の操作を行います。

  1. レイヤーパネルをクリックし、PSD ファイルのレイヤー階層を表示します。
レイヤー階層

注意:

階層内の複数のレイヤーを選択し、そのレイヤーをまとめて単一の新しい画像として書き出すことができます。

  1. レイヤー階層内を移動して内容を確認します。 
    • レイヤーグループを展開するには、そのグループの横にあるフォルダーアイコン()をクリックします。
    • エレメントをクリックし、対応するレイヤー/レイヤーグループをレイヤーパネルでハイライト表示します。
  2. 画像アセットとして抽出するレイヤー/レイヤーグループを選択します。複数のレイヤーを選択するには、Command キー(Mac)または Ctrl キー(Windows)を押しながら選択します。複数のオブジェクトが選択されている場合は、選択したレイヤーまたはグループを含む単一のアセットとして抽出されます。
  3. レイヤーまたはレイヤーグループの横の  アイコンをクリックします。複数のレイヤー/レイヤーグループを選択した場合は、選択したレイヤーのいずれかの横にある アイコンをクリックします。
  4. 新しい画像アセットの名前を入力します。
  5. 画像アセットの形式(PNG 8 Alpha、PNG 32、JPG または SVG)を選択します。
  6. (オプション)JPG 画像アセットを生成する場合は、画質を調整できます。
  7. 保存」をクリックします。
  8. アセットパネルで、生成したアセットを見つけます。Creative Cloud アセットで PSD ファイルの横に新規作成されたフォルダーにもあります。

注意:

レイヤーをリセット」オプションを選択すると、デザインのレイヤー表示が元の状態にリセットされます。

レイヤーまたはレイヤーグループの非表示

レイヤーまたはレイヤーグループを表示または非表示にするには、レイヤーパネル内のレイヤーまたはレイヤーグループの横にある目のアイコン  を切り替えます。

レイヤーカンプの操作

Creative Cloud Extract では、様々な Photoshop のレイヤーカンプを表示できます。Extract にレイヤーカンプが含まれる PSD ファイルをアップロードすると、PSD の上部にポップアップメニューが表示されます。このポップアップメニューには、PSD のすべてのレイヤーカンプと、「最後のドキュメント状態」という選択項目が含まれています。「最後のドキュメント状態」とは、ファイルが保存され、Creative Cloud にアップロードされる前の、Photoshop での最後の状態のことです。この状態はレイヤーカンプではない場合もあります。

Extract でのレイヤーカンプの操作

ファイルの共有

「Extract」タブで PSD ファイルを表示する際、Creative Cloud 共有機能を使用してファイルを共有できます。ファイルを共有する相手は Creative Cloud にログインしていなくても、ファイルからアセットや計測値を抽出できます。

詳しくは、ファイルおよびフォルダーの共有を参照してください。

フィードバックの提供

ご質問、問題点、その他のフィードバックがございましたら、Extract for PSD フォーラムにご投稿ください。

FAQ

Extract は Photoshop Generator のタグに対応していますか?

はい。画像アセットを抽出する際の初期設定は、可能な範囲で、対応するレイヤー名で指定された Generator タグになります。

Extract を使用して PSD ファイルを編集できますか?

いいえ。Extract は読み取り専用です。

PSD 名またはアセット名でサポートされない文字はありますか?

PSD ファイル名または画像アセット名では、特殊文字(|、"、?、<、>、/、\、;、* および :)はサポートされません。

私がアップロードした PSD ファイルには、どのユーザーがアクセスできますか?

お客様が Extract にアップロードしたファイルはすべて、お客様の Creative Cloud アカウントでしかアクセスできません。

PSD ファイルを共有するには、PSD ファイルを公開し、リンクを共有します。共有では、Extract オプションが有効になっていてリンクがあれば、誰でも Extract で PSD を表示して、そこからアセットを抽出できます。

Extract は、CMYK カラースペースを使用する PSD ファイルに対応していますか?

いいえ。CMYK PSD ファイルは、Extract にアップロードする前に RGB カラースペースに変換してください。

PSD 以外にサポートされているファイル形式はありますか?

いいえ。現在、PSD ファイルのみサポートされています。

Extract で処理できる PSD ファイルに制限はありますか?

Extract は、Photoshop で作成された PSD ファイルに対応しています。Extract での 2 GB を超える PSD ファイルまたは 1,000 を超えるレイヤーを含む PSD ファイルの使用は推奨されません。

Extract と Adobe Generator for Photoshop CC の違いを教えてください。

Generator と Extract は共に、デザイナーと開発者のコード作成プロセスでの共同作業における制約をなくすことを目的としています。Generator は Photoshop CC 内で画像アセットを抽出しますが、Extract はブラウザーで直接 Creative Cloud サービスとして機能します。Extract では、Photoshop をインストールまたは実行する必要はありません。

また、Extract では複数のレイヤーから 1 つのアセットを作成することもできます。

Extract の使用に Creative Cloud への加入は必要ですか?

無償または有償 Creative Cloud アカウントがあれば、PSD ファイルを Creative Cloud アセットにアップロードして Extract を使用できます。

Extract リンクを共有する場合、共有する相手は Creative Cloud アカウントにログインしていなくても、PSD ファイルからアセットや計測値を抽出できます。

Extract のスタイルパネルに、カラーやグラデーションが含まれていない理由を教えてください

通常この場合、カラーまたはグラデーションは Extract でサポートされないピクセルベースの塗りです。PSD ファイルでこの種の塗りが使用されている場合は、カラーピッカーを使用してカラーを取得し、カラースウォッチをスタイルパネルに追加します。

Extract でグラデーションに関して提供される CSS に制限はありますか?

はい、一部のグラデーションは、CSS で生成するのにテクニックが必要なものがあります。現在 Extract では、円錐形、反射形、菱形、シェイプバーストグラデーション向けの CSS はサポートされていません。ただし、線状および放射状グラデーションはサポートされています。

Extract での PSD プレビューが、Photoshop での表示内容と一致しない理由を教えてください。

Extract での表示が、Photoshop での表示内容と異なる場合があります。このような違いが見つかった場合は、弊社までお問い合わせください。

表示内容をフォーラムにご投稿ください。違いの画像を投稿していただけますと、問題の解決に役立ちます。

Extract はモバイルデバイスで使用できますか?

モバイルデバイスでは PSD をプレビュー表示し、カラー、フォント、グラデーションなど一部のスタイルを表示できます。ただし、デスクトップと同じような PSD での操作はできません。

すべてのアセットを一度にダウンロードできますか?

現在 Extract では、アセットをすべてまとめてダウンロードすることはできません。アセットは個別に抽出およびダウンロードする必要があります。

デザインのすべての CSS コードを一度にダウンロードできますか?

現時点で、Extract でデザインの CSS コードをすべてまとめてダウンロードすることはできません。個々のアイテムを選択し、CSS を運用コードにコピーする必要があります。

この機能の改善を望まれる場合は、CSS 出力の一括管理方法をフォーラムまでご提案ください。

PSD ファイルを共有しましたが、共有相手に「Extract」タブが表示されません。理由を教えてください。

2014 年 8 月下旬の Extract のリリース前に PSD ファイルを共有した場合は、PSD ファイルで「Extract」タブが有効になりません。有効にするには、次の操作を行います。

このオプションを使用すると、一般公開された URL を変更することなく、Extract を有効にすることができます。

  1. リンクを送信ダイアログの「詳細オプション」を開きます。
  2. 「Extract を許可」が有効になっていることを確認します。

Project Parfait と Extract の違いは何ですか?

Project Parfait はベータ版としてアドビが提供を開始したサービスで、現在 Extract で使用できるワークフローが導入されています。Extract には Project Parfait と同じすべての機能が備わっており、さらに機能が追加されています。現在 Project Parfait は正式に Creative Cloud に導入されており、Project Parfait サービスを使用して PSD から情報やアセットを抽出する機能はまもなく利用できなくなります。

Project Parfait にアップロードした PSD はどうなりますか?

Project Parfait で作業したファイルのダウンロードをご希望の場合、2014 年の終わりまではファイルをダウンロードすることができます。

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

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