PSD カンプから Web 開発に必要な情報をさくさく抽出

by Adobe Comms

Posted on 09-03-2014

多くの Web デザイナーがページのデザインカンプを Photoshop を使って制作しています。デザインが固まるとカンプは開発者に渡りコードを書く作業が始まります。カンプからコードへ、この作業を強力にサポートし飛躍的に生産性を向上させる夢のツールが Extract という名称で Creative Cloud サービスに組み込まれました。これは以前ご紹介した実験的プロジェクト Project Parfait (プロジェクトパフェ) がプレビュー版として Creaitve Cloud Files に組み込まれたものです。

使うのはカンタン、クラウドストレージに PSD を置くだけ

extract_tab

Extract を使うのはとてもカンタン、特に Creative Cloud のストレージサービス Files をご利用中の方は何の準備も要りません〜ただ PSD ファイルをストレージに置くだけです! あとはブラウザーで Creative Cloud Files に行き、該当の PSD をクリックします。

新しい Extract [プレビュー] というタブを見つけてクリックしてみてください。

Extract でさくさく取れる開発に必要な情報

ページのデザインを構成するバナーやボタンのグラフィック、文字といった様々なパーツをクリックしてみてください。あるいは shift キーを押しながら、隣り合わせの二つのパーツをクリック、クリックしてみてください。あなたが必要な情報を得る事ができるはずです。

extract_Tip

Extract で抽出できる情報、得られる要素は以下のとおりです:

パネルを使って属性からパーツを特定

画面右側のパネルは、スタイル、レイヤー、アセットの3つのタブから構成されています。スタイルには、選択したパーツの CSS、そしてデザイン内で使用されているフォントやカラー、グラデーションの情報がマップされます。ここをクリックする事により、逆引きでパーツを見つける事もできます。

panel_style

またレイヤーでは、PSD のすべてのレイヤーとレイヤーグループを表示します。表示/非表示はもちろん、レイヤーエレメントの選択、アセットの抽出が行えます。

panel_layer

Creative Cloud メンバーなら誰でもすぐに

Extract は Creative Cloud Files の拡張機能としてすべての Creative Cloud メンバーにご利用頂けるサービスです。ユニークなのは、本機能を利用する際に、そのパソコンに Photoshop がインストールされていなくてもブラウザー上でご利用頂けるという事です。以前本ブログでもご紹介したクラウドストレージのファイルやフォルダの共有機能と組み合わせると、例えば Photoshop 利用のデザイナーと Dreamweaver や Edge ツール利用の開発者間で Creative Cloud サービスを通じて夢のようなワークフローを構築する事ができるのです。

関連情報

Topics: クリエイティブ

Products: