Creative Cloud エクストラクトを使用すると、Photoshop のデザインからコードを簡単に抽出できます。エクストラクトでは Web デザイナーとデベロッパーのいずれの手順もシンプルで、Web デザインから編集可能なコードに変換する作業効率が大幅に改善されます。
最終更新日 :
注意：
Web ベースのエクストラクト機能は 2019 年 3 月に廃止される予定です。ただし、Photoshop および Dreamweaver のデスクトップアプリケーション内のエクストラクト機能は、2019 年 3 月以降も引き続き使用できます。詳しくは、Creative Cloud アセット：終了する Web ベースのエクストラクトを参照してください。
Web デベロッパーにデザイン仕様を伝える方法として広く使用されているのが Photoshop のコンポジションで、デベロッパーはそのデザイン意図を HTML や CSS に変換します。一般的な手順では、まずデザイナーが Web やモバイルデザインで使用する Photoshop カンプを作成します。次にプロダクションデザイナーが、アセットをスライスし、裁ち落としを作成して、デベロッパー用の PSD ファイルを作成します。そして、Web デベロッパーがデザイン要素とアセットをコードに変換します。
そのワークフローを Extract がまったく新しく作り変えます。Web デザイナーは Photoshop で最適化されたアセットを瞬時に書き出し、PSD をデベロッパーと共有して Dreamweaver でのコードの作成に適用できます。
エクストラクトは、様々なサービスの中で PSD デザインをコード化できます。
- 使い慣れた Photoshop 環境で作業し、レイヤーやレイヤーグループから画像アセットを定義して書き出すことができます。
- Web デザイナーとデベロッパーは、Dreamweaver 内でエクストラクトを使用でき、コンテキストコードヒント、アセット抽出、その他の処理をコーディング環境で直接できるので、完全な自己完結ソリューションとなります。
Photoshop カンプを作成した後、シンプルなビジュアルインターフェイスを使用して、個別レイヤーまたはレイヤーグループからすばやく画像アセットを定義し、パッケージ化できます。劇的に時間が短縮され、本来のデザイン業務に多くの時間を費やせます。
Dreamweaver で PSD を表示し、コンテキストコードヒントを使用して、CSS 内のフォント、カラー、グラデーションを簡単に定義できるようになりました。最適化された画像をライブビューのサーフェスにドラッグ＆ドロップしたりテキストをコピーできるなど、様々な操作ができます。
アカウントにログイン