Creative Cloud アセットの無償の新機能である Creative Cloud Extract を使用すると、ブラウザーで直接 PSD （レイヤー、レイヤーカンプを含む）のコードを確認できます。Web デザイナーとデベロッパー間で PSD をやり取りする際に特に役立ち、デザイン情報を確認したり、制作用アセットをダウンロードすることもできます。Extract では、ブラウザーで次のような PSD ファイル操作を実行できます。
Creative Cloud Extract を使用すると、PSD ファイルのデザインのコード化が劇的に簡素化し、煩雑な作業の繰り返しや作業者間のやり取りを大幅に削減できます。
Extract は読み取り専用です。PSD ファイルを編集することはできません。
Extract ビューでは、ブラウザー内で様々な PSD デザインを確認できます。レイヤー階層を移動し、様々なレイヤーカンプを表示できます。PSD の一部を新しい画像ファイルとして抽出することもできます。PSD プレビューで任意のエレメントをクリックすると、レイヤーが選択され、その情報が表示されます。選択されたレイヤーで次の操作ができます。
PSD ファイルで 1 つのエレメントをクリックすると、情報パネルが表示されます。このパネルには、エレメントの幅と高さ、デザインでのエレメントのレイヤーの x と y の位置が表示されます。
W、H、X、Y などの値をクリックすると、その値がクリップボードにコピーされます。
Extract での計測値は、ピクセルまたはパーセント単位で表示できます。1 つのエレメントを選択した場合、PSD デザインの幅および高さの合計値を基準にした幅および高さの割合がパーセントで示されます。一方のエレメントが完全に他方のエレメントに含まれる 2 つのエレメントを選択した場合、内側のエレメントの幅と高さが、外側のエレメントのサイズを基準にして報告されます。
値をクリックして、クリップボードにコピーします。
2 つのエレメント間の距離を表示するには、Shift キーを押しながらエレメントをクリックします。エレメント間の距離を知っておくと、マージンとパディングの情報を指定する際に役立ちます。
PSD デザインでエレメントが選択された状態で、青い情報パネルで「CSS をコピー」をクリックして、エレメントの CSS をコピーします。CSS インスペクターでも、CSS コードを表示してコピーできます。
Extract はプリプロセッサーに対応しています。「スタイル」タブで、「CSS」の横の 
（下向き矢印）をクリックすると、CSS プリプロセッサーを使用するオプションが表示されます。
選択したエレメントにテキストが含まれる場合、「テキストをコピー」をクリックしてクリップボードにコピーします。
デザインドキュメント（PSD）で使用されているフォント、カラー、グラデーションに関する情報を表示およびコピーするには、スタイルパネルを開きます。情報を表示した状態で、フォントサイズ、カラー、またはグラデーションスウォッチをクリックし、値をクリップボードにコピーします。
エレメントを選択すると、使用されているテキストとカラーのスタイルがスタイルパネルでハイライト表示されます。
Adobe Typekit と統合することで、Extract から数千に及ぶ高品質なフォントにアクセスできるようになります。スタイルパネルの Typekit のフォントの横に、Typekit アイコン（
）があります。この Typekit アイコンをクリックすると、Extract で Typekit 上のフォントに対応したページが開きます。
使用する Web 対応フォントが見つかったら、Typekit 内のキットに追加し、運用コードでリンクを設定します。
カラーピッカーツール（
）を使用すると、デザインのエレメントのカラーをすばやく特定できます。
Creative Cloud Extract を使用すると、PSD の任意のレイヤーを選択し、画像アセットを抽出できます。アセットは 8-bit PNG、32-bit PNG、JPG および SVG 画像として抽出できます。
エレメントの青い情報パネルで、
アイコンをクリックして、次の操作を行います。
ログインして Creative Cloud アセット内の PSD ファイルを表示すると、高度なアセット抽出機能にアクセスできます。アセットは、ダウンロードするたびにアセットパネルと Creative Cloud アセットの .psd_assets フォルダーに追加されます。アセットパネルで画像サムネールをクリックして、アセットをコンピューターにローカルにダウンロードできます。
アセットパネルは、別のユーザーからのリンクをクリックして PSD ファイルを表示した場合には使用できません。この場合 Extract を使用できますが、 アイコンをクリックすると、アセットがコンピューターに直接ダウンロードされます。ブラウザーのダウンロードマネージャーを使って、ローカルディスクのアセットを探します。
レイヤーパネルには、PSD デザインのすべてのレイヤーとレイヤーグループが表示されます。Creative Cloud Extract は読み取り専用のため、レイヤーで行った変更が元の PSD ファイルに保存されることはありません。
レイヤーパネルでは、表示／非表示の切り替え、レイヤーエレメントの選択、アセットの抽出を行えます。
PSD ファイルのレイヤーまたはレイヤーグループを画像アセットとして抽出できます。次の操作を行います。
階層内の複数のレイヤーを選択し、そのレイヤーをまとめて単一の新しい画像として書き出すことができます。
）をクリックします。 アイコンをクリックします。複数のレイヤー／レイヤーグループを選択した場合は、選択したレイヤーのいずれかの横にある アイコンをクリックします。「レイヤーをリセット」オプションを選択すると、デザインのレイヤー表示が元の状態にリセットされます。
レイヤーまたはレイヤーグループを表示または非表示にするには、レイヤーパネル内のレイヤーまたはレイヤーグループの横にある目のアイコン 
を切り替えます。
Creative Cloud Extract では、様々な Photoshop のレイヤーカンプを表示できます。Extract にレイヤーカンプが含まれる PSD ファイルをアップロードすると、PSD の上部にポップアップメニューが表示されます。このポップアップメニューには、PSD のすべてのレイヤーカンプと、「最後のドキュメント状態」という選択項目が含まれています。「最後のドキュメント状態」とは、ファイルが保存され、Creative Cloud にアップロードされる前の、Photoshop での最後の状態のことです。この状態はレイヤーカンプではない場合もあります。
「Extract」タブで PSD ファイルを表示する際、Creative Cloud 共有機能を使用してファイルを共有できます。ファイルを共有する相手は Creative Cloud にログインしていなくても、ファイルからアセットや計測値を抽出できます。
詳しくは、ファイルおよびフォルダーの共有を参照してください。
ご質問、問題点、その他のフィードバックがございましたら、Extract for PSD フォーラムにご投稿ください。
はい。画像アセットを抽出する際の初期設定は、可能な範囲で、対応するレイヤー名で指定された Generator タグになります。
いいえ。Extract は読み取り専用です。
PSD ファイル名または画像アセット名では、特殊文字（|、"、?、<、>、/、\、;、* および :）はサポートされません。
お客様が Extract にアップロードしたファイルはすべて、お客様の Creative Cloud アカウントでしかアクセスできません。
PSD ファイルを共有するには、PSD ファイルを公開し、リンクを共有します。共有では、Extract オプションが有効になっていてリンクがあれば、誰でも Extract で PSD を表示して、そこからアセットを抽出できます。
いいえ。CMYK PSD ファイルは、Extract にアップロードする前に RGB カラースペースに変換してください。
いいえ。現在、PSD ファイルのみサポートされています。
Extract は、Photoshop で作成された PSD ファイルに対応しています。Extract での 2 GB を超える PSD ファイルまたは 1,000 を超えるレイヤーを含む PSD ファイルの使用は推奨されません。
Generator と Extract は共に、デザイナーと開発者のコード作成プロセスでの共同作業における制約をなくすことを目的としています。Generator は Photoshop CC 内で画像アセットを抽出しますが、Extract はブラウザーで直接 Creative Cloud サービスとして機能します。Extract では、Photoshop をインストールまたは実行する必要はありません。
また、Extract では複数のレイヤーから 1 つのアセットを作成することもできます。
無償または有償 Creative Cloud アカウントがあれば、PSD ファイルを Creative Cloud アセットにアップロードして Extract を使用できます。
Extract リンクを共有する場合、共有する相手は Creative Cloud アカウントにログインしていなくても、PSD ファイルからアセットや計測値を抽出できます。
通常この場合、カラーまたはグラデーションは Extract でサポートされないピクセルベースの塗りです。PSD ファイルでこの種の塗りが使用されている場合は、カラーピッカーを使用してカラーを取得し、カラースウォッチをスタイルパネルに追加します。
はい、一部のグラデーションは、CSS で生成するのにテクニックが必要なものがあります。現在 Extract では、円錐形、反射形、菱形、シェイプバーストグラデーション向けの CSS はサポートされていません。ただし、線状および放射状グラデーションはサポートされています。
Extract での表示が、Photoshop での表示内容と異なる場合があります。このような違いが見つかった場合は、弊社までお問い合わせください。
表示内容をフォーラムにご投稿ください。違いの画像を投稿していただけますと、問題の解決に役立ちます。
モバイルデバイスでは PSD をプレビュー表示し、カラー、フォント、グラデーションなど一部のスタイルを表示できます。ただし、デスクトップと同じような PSD での操作はできません。
現在 Extract では、アセットをすべてまとめてダウンロードすることはできません。アセットは個別に抽出およびダウンロードする必要があります。
現時点で、Extract でデザインの CSS コードをすべてまとめてダウンロードすることはできません。個々のアイテムを選択し、CSS を運用コードにコピーする必要があります。
この機能の改善を望まれる場合は、CSS 出力の一括管理方法をフォーラムまでご提案ください。
2014 年 8 月下旬の Extract のリリース前に PSD ファイルを共有した場合は、PSD ファイルで「Extract」タブが有効になりません。有効にするには、次の操作を行います。
このオプションを使用すると、一般公開された URL を変更することなく、Extract を有効にすることができます。
Project Parfait はベータ版としてアドビが提供を開始したサービスで、現在 Extract で使用できるワークフローが導入されています。Extract には Project Parfait と同じすべての機能が備わっており、さらに機能が追加されています。現在 Project Parfait は正式に Creative Cloud に導入されており、Project Parfait サービスを使用して PSD から情報やアセットを抽出する機能はまもなく利用できなくなります。
Project Parfait で作業したファイルのダウンロードをご希望の場合、2014 年の終わりまではファイルをダウンロードすることができます。
