PSD カンプから Web 開発に必要な情報をさくさく抽出
多くの Web デザイナーがページのデザインカンプを Photoshop を使って制作しています。デザインが固まるとカンプは開発者に渡りコードを書く作業が始まります。カンプからコードへ、この作業を強力にサポートし飛躍的に生産性を向上させる夢のツールが Extract という名称で Creative Cloud サービスに組み込まれました。これは以前ご紹介した実験的プロジェクト Project Parfait (プロジェクトパフェ) がプレビュー版として Creaitve Cloud Files に組み込まれたものです。
使うのはカンタン、クラウドストレージに PSD を置くだけ
Extract を使うのはとてもカンタン、特に Creative Cloud のストレージサービス Files をご利用中の方は何の準備も要りません〜ただ PSD ファイルをストレージに置くだけです! あとはブラウザーで Creative Cloud Files に行き、該当の PSD をクリックします。
新しい Extract [プレビュー] というタブを見つけてクリックしてみてください。
Extract でさくさく取れる開発に必要な情報
ページのデザインを構成するバナーやボタンのグラフィック、文字といった様々なパーツをクリックしてみてください。あるいは shift キーを押しながら、隣り合わせの二つのパーツをクリック、クリックしてみてください。あなたが必要な情報を得る事ができるはずです。
https://blog.adobe.com/media_5ebf693190d0b9a871e96208334f0fc75101e908.gif
Extract で抽出できる情報、得られる要素は以下のとおりです:
パネルを使って属性からパーツを特定
画面右側のパネルは、スタイル、レイヤー、アセットの3つのタブから構成されています。スタイルには、選択したパーツの CSS、そしてデザイン内で使用されているフォントやカラー、グラデーションの情報がマップされます。ここをクリックする事により、逆引きでパーツを見つける事もできます。
https://blog.adobe.com/media_c34ef43632fbc4dbbe1528bdcad13f42bcdfca07.gif
またレイヤーでは、PSD のすべてのレイヤーとレイヤーグループを表示します。表示/非表示はもちろん、レイヤーエレメントの選択、アセットの抽出が行えます。
https://blog.adobe.com/media_a09b66e67da50f89bc8596d77943819869e57d27.gif
Creative Cloud メンバーなら誰でもすぐに
Extract は Creative Cloud Files の拡張機能としてすべての Creative Cloud メンバーにご利用頂けるサービスです。ユニークなのは、本機能を利用する際に、そのパソコンに Photoshop がインストールされていなくてもブラウザー上でご利用頂けるという事です。以前本ブログでもご紹介した**クラウドストレージのファイルやフォルダの共有機能**と組み合わせると、例えば Photoshop 利用のデザイナーと Dreamweaver や Edge ツール利用の開発者間で Creative Cloud サービスを通じて夢のようなワークフローを構築する事ができるのです。