目次
Creative Cloud エクストラクトとは
Creative Cloud エクストラクトについてAdobeは下記の通り説明しています.
Creative Cloud エクストラクトにより、カンプからコードを抽出するための新たなワークフローをWebデザイナーとWeb開発者に提供します。カラー、フォント、CSS、アセットなど、PSDカンプに含まれる重要なデザイン情報を簡単に抽出して、モバイルおよびデスクトップ向けのデザインをコーディングする際に使用できます。
具体的には次の2つの機能を指します.
1. Photoshop CCの「アセットを書き出し」機能
2. Dreamweaver CCの「Extract」パネルを利用した,PSDファイルからのCSSコードや画像,カラー,文章などの抽出
本記事では2つ目のDreamweaver CCの「Extract」機能について扱います.
Extractを利用する理由/メリット
- PSDカンプから直接各種データを抽出できるので,PSDからの変換作業を省き,CSSコードを書く工数を大幅に減らせる
- Photoshopデザイナーとコーディング担当者が別の場合,デザイン確認の連絡を減らせる
本記事の動作環境
- Photoshop CC 19.1.6
- Dreamweaver CC 18.2
Extractの使用方法
事前準備
下記ファイルを用意しておく(本記事では参考サイトの練習用ファイルを使用).
- 完成済みPSDカンプ
- 大枠を作成済のHTMLとCSS
Extract使用前後の比較
本記事のサンプルの完成前後のデザインの差異を示します.
適用させる抽出項目は下記の通りです.
- フッターの背景グラデーション
- メインビジュアル右下のスタンプロゴ
- メインテキスト本文とCSSスタイル
CCフォルダへPSDファイルをアップロード
Dreamweaverの「ウィンドウ」メニュー/「Extractパネル」からPSDカンプファイルをCCフォルダへアップロードする. ※
※ 事前にCCフォルダへアップロード済の場合は不要
Extractパネル内の表示
本記事ではExtractを使ったコーディング専用のワークスペースを作成しています.
Extractパネル右上の%が表示されたドロップダウンメニューから,パネル内での全アートボードの表示倍率を設定する.
- スタイル : カンプに適用されたフォントやカラーなどのスタイル情報を表示/抽出する
- レイヤー : PSDのレイヤー情報を表示する.各レイヤーから画像を抽出/保存する.
Extractによる抽出例
抽出1 フッターの背景グラデーション
- Extractパネルから該当グラデーションを選択し,表示されるポップアップボックスからCSSをコピーする
- コードパネルのHTMLソースコードから,グラデーション適用箇所のクイックエディットを開き(⌘ + E),CSSをペースト ※
※ ベンダープレフィックス付きでペーストされる
抽出2 メインビジュアル右下のスタンプロゴ
- Extractパネルのレイヤーを表示し,該当レイヤー右の↓印をクリックし抽出設定を開く
- 抽出する画像の保存場所を指定
- ファイル形式を指定すると,自動的にファイル名に拡張子が追記される
- 異なるサイズで抽出する場合などは,環境設定ダイアログから抽出要件を設定可能
- 保存後,画像が書き出されたことを確認
- コードパネルでimg要素にsrc属性を追記し,抽出した画像を反映
抽出3 メインテキスト本文とCSSスタイル
- Extractパネルで該当テキストを選択し,ポップアップボックスからテキストをコピーしてHTMLへ貼り付け
- 同様に必要なCSS情報をコピーして,クイックエディット(⌘ + E)を開き貼り付け ※
※ スタイルをメディアクエリで切り替える場合,モバイルとデスクトップ両CSSをそれぞれコピペする
Extract使用前後の比較(確認用)
完成デザインに下記3点が反映されていることを再度確認しておきます.
- フッターの背景グラデーション
- メインビジュアル右下のスタンプロゴ
- メインテキスト本文とCSSスタイル
まとめ
Extract機能はPSDカンプデザインが練り込まれているほど,その威力を発揮します.
様々な作業をDreamweaverで一括して行えるので,アプリケーション切り替えの煩わしさも減らせますね.
参考サイト
以下のサイトを参考にさせていただきました.
本記事で使用したサンプルファイルのダウンロードとExtract使用手順を確認できます.
PSDからCSSをコピー | Adobe Dreamweaver CCチュートリアル
コメント