Photoshop カンプから、Web に必要なあらゆる情報を抽出する新ツール

by Adobe Comms

Posted on 04-22-2014

Photoshop で作ったカンプから Web 開発に必要な情報を抽出する実験的なサービス Project Parfait (プロジェクト パフェ) をご紹介します。

Parfait_Top

Project Parfait により、PSD カンプをブラウザにドラッグ & ドロップするだけで、以下のことが可能になります:

早速画面右上の Upload your own PSD (任意の PSD ファイルをアップロード) をクリックして、試してみましょう。 * 手近に PSD カンプがないときは、Project Parfait トップページにはインストラクション用のサンプルファイルが開いた状態になっていますので、こちらでどんな情報が抽出できるのかをお試し頂けるようになっています。

とにかく Parfait を触ってみる!

Parfait_Element_Info

図. ページデザインを構成する各要素をクリックすると、幅、高さ、位置の情報が得られます。また、ここから最適化して JPEG/PNG/SVG 画像として書き出せます。

Parfait_Copy_Text_CSSParfait_CSS_Inspector

図. 文字や CSS をコピーできます。

Parafait_Fonts_Info

図. デザイン上で使用されているフォント、文字スタイルの詳細情報

Parfait_Color_Grad

図. カラー、グラデーション情報も全部取れます。

Parafait_Layer

図. レイヤーパネルでは、確認に加えレイヤー毎の表示・非表示が行えます。

関連情報

Topics: クリエイティブ

Products: