Photoshop カンプから、Web に必要なあらゆる情報を抽出する新ツール
Photoshop で作ったカンプから Web 開発に必要な情報を抽出する実験的なサービス Project Parfait (プロジェクト パフェ) をご紹介します。
Project Parfait により、PSD カンプをブラウザにドラッグ & ドロップするだけで、以下のことが可能になります:
- PSD から、カラー、グラデーション、フォント情報を抽出
- 文字と CSS のコピー
- 要素間の正確な寸法
- 制作にそのまま使える最適化された画像の書き出し
早速画面右上の Upload your own PSD (任意の PSD ファイルをアップロード) をクリックして、試してみましょう。 * 手近に PSD カンプがないときは、Project Parfait トップページにはインストラクション用のサンプルファイルが開いた状態になっていますので、こちらでどんな情報が抽出できるのかをお試し頂けるようになっています。
とにかく Parfait を触ってみる!
図. ページデザインを構成する各要素をクリックすると、幅、高さ、位置の情報が得られます。また、ここから最適化して JPEG/PNG/SVG 画像として書き出せます。
図. 文字や CSS をコピーできます。
図. デザイン上で使用されているフォント、文字スタイルの詳細情報
図. カラー、グラデーション情報も全部取れます。
図. レイヤーパネルでは、確認に加えレイヤー毎の表示・非表示が行えます。