extract_logo

Creative Cloud エクストラクトを使用すると、Photoshop のデザインからコードを簡単に抽出できます。エクストラクトでは Web デザイナーとデベロッパーのいずれの手順もシンプルで、Web デザインから編集可能なコードに変換する作業効率が大幅に改善されます。


Web デベロッパーにデザイン仕様を伝える方法として広く使用されているのが Photoshop のコンポジションで、デベロッパーはそのデザイン意図を HTML や CSS に変換します。一般的な手順では、まずデザイナーが Web やモバイルデザインで使用する Photoshop カンプを作成します。次にプロダクションデザイナーが、アセットをスライスし、裁ち落としを作成して、デベロッパー用の PSD ファイルを作成します。そして、Web デベロッパーがデザイン要素とアセットをコードに変換します。

そのワークフローをエクストラクトがまったく新しく作り変えます。Web デザイナーは Photoshop CC で最適化されたアセットを瞬時に書き出し、PSD をデベロッパーと共有して Dreamweaver CC でのコードの作成に適用できます。

エクストラクトのワークフロー

エクストラクトは、様々なサービスの中で PSD デザインをコード化できます。

  • 使い慣れた Photoshop CC 環境で作業し、レイヤーやレイヤーグループから画像アセットを定義して書き出すことができます。
  • Web デザイナーとデベロッパーは、Dreamweaver 内でエクストラクトを使用でき、コンテキストコードヒント、アセット抽出、その他の処理をコーディング環境で直接できるので、完全な自己完結ソリューションとなります。
Adobe_Photoshop_CC_mnemonic_RGB_128px_no_shadow

Photoshop でアセットを書き出す

Photoshop カンプを作成した後、シンプルなビジュアルインターフェイスを使用して、個別レイヤーまたはレイヤーグループからすばやく画像アセットを定義し、パッケージ化できます。劇的に時間が短縮され、本来のデザイン業務に多くの時間を費やせます。


Adobe_Dreamweaver_CC_mnemonic_RGB_64px

Dreamweaver で抽出

Dreamweaver で PSD を表示し、コンテキストコードヒントを使用して、CSS 内のフォント、カラー、グラデーションを簡単に定義できるようになりました。最適化された画像をライブビューのサーフェスにドラッグ&ドロップしたりテキストをコピーできるなど、様々な操作ができます。



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

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