Photoshopの抽出作業が捗る！Adobeのオンラインツール「Project Parfait」が便利
Web制作に欠かせない開発ツールであるPhotoshopですが、コーディング時に必要な情報を確認する作業が非常に億劫だと感じたりしませんか？僕は非常に億劫だと感じていました。
そんな作業を楽にできるツール Project Parfait（プロジェクトパフェ）を見つけましので紹介し、解説して見たいと思います。。
「プロジェクトパフェ」は、AdobeのCreative Cloud Filesに作成したPSDファイルをアップロードして使用できます。アップロードしたPSDはブラウザ上で必要な情報を簡単に抽出したり、目的のレイヤーを書き出し、といった直感的な操作を可能にします。こちらはAdobeのCretive Cloud道場 Extactのアーカイブご覧ください。
http://www.ustream.tv/recorded/54684976
※Creative Cloud Filesの使用はAdobeアカウントの取得が必要です
従来のようにPhotoshop上で行っていたツールを使っての各作業を短縮し、より格段によいパフォーマンスを発揮できるようになることと思います。
では Project Parfaitにアクセスして使用してみます。
下記をご覧くださいませ。
Project Parfait
https://projectparfait.adobe.com/
Project Parfaitの使い方
アクセスすると上のようなページが表示されたかと思います。
左にはインストラクション用としてAdobeが用意したサンプルが開かれており、PSDの用意がなくても試用が可能です。
縦横値、XY軸値、Text抽出、CSS抽出
オブジェクトの縦横幅やXY軸の座標値、「Copy Text」をクリックでテキストをクリップボードにコピーすることができ、「Copy CSS」をクリックでCSSをクリップボードにコピーできる。ひとつの動作で容易に多くの要素を抽出できる。
オブジェクト間の計測
「Shift + クリック」で該当オブジェクトを選択すれば要素間を測ることができます。直感的な操作で瞬時に正確な寸法を知れるのは、かなりの作業時間の短縮になる。
JPG/PNG/SVGへ画像書き出し
Web、デバイス用に最適化して画像を書き出せます。透過画像の書き出しでも背景レイヤーを気にせず行えるため、背景レイヤーを非表示にするなどの手間を省けます。また入力フィールドに名称を入力し、ファイル名を付けることができ少数の書き出しであればPhotoshopで行うより効率的に行えることでしょう。
