(cache) Photoshopの抽出作業が捗る！Adobeのオンラインツール「Project Parfait」が便利

Web制作に欠かせない開発ツールであるPhotoshopですが、コーディング時に必要な情報を確認する作業が非常に億劫だと感じたりしませんか？

そんな作業を楽にできるツール Project Parfait（プロジェクトパフェ）を解説します。

「プロジェクトパフェ」は、AdobeのCreative Cloud Filesに作成したPSDファイルをアップロードして使用できます。アップロードしたPSDはブラウザ上で必要な情報を簡単に抽出したり、目的のレイヤーを書き出し、といった直感的な操作を可能にします。

※Creative Cloud Filesの使用はAdobeアカウントの取得が必要です

従来のようにPhotoshop上で行っていたツールを使っての各作業を短縮し、より格段によいパフォーマンスを発揮できるようになることと思います。

では Project Parfaitにアクセスして使用してみます。

下記をご覧くださいませ。

Project Parfait

Project Parfaitの使い方

アクセスすると上のようなページが表示されたかと思います。

左にはインストラクション用としてAdobeが用意したサンプルが開かれており、PSDの用意がなくても試用が可能です。

オブジェクトの縦横幅やXY軸の座標値、「Copy Text」をクリックでテキストをクリップボードにコピーすることができ、「Copy CSS」をクリックでCSSをクリップボードにコピーできる。ひとつの動作で容易に多くの要素を抽出できる。

「Shift + クリック」で該当オブジェクトを選択すれば要素間を測ることができます。直感的な操作で瞬時に正確な寸法を知れるのは、かなりの作業時間の短縮になる。

Web、デバイス用に最適化して画像を書き出せます。透過画像の書き出しでも背景レイヤーを気にせず行えるため、背景レイヤーを非表示にするなどの手間を省けます。また入力フィールドに名称を入力し、ファイル名を付けることができ少数の書き出しであればPhotoshopで行うより効率的に行えることでしょう。