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で行うより効率的に行えることでしょう。
Illustrator CCで寸法線とかフォント指定などの情報をサクっと描けちゃうSpecctrが最強!
これは便利
http://www.dtp-transit.jp/adobe/illustrator/post_1759.html
紹介します。本当に便利です。
Fireworksの機能拡張として開発されていた「Specctr」(スペクター)が、なんとIllustrator CC対応になっています。
Specctrを使うことで次のことが可能になります(単位は選択している単位の種類に依存します)。
- 選択したオブジェクトの幅、高さを計測して寸法線として描画する
- 2つのオブジェクトの間隔を計測して寸法線として描画する
- オブジェクトを1つだけ選択しているときには、アートボードの上と左からの距離を計測して描画
- 選択したオブジェクトの塗りや線、不透明度などの情報を描画する
- 選択したテキストのフォント、フォントサイズ、塗りなどの情報を描画する
Web制作を行われている方なら説明不要だと思いますが、カンプなどを作成するとき、ビジュアルデザイナーからコーダーへの申し送りの際に、むちゃくちゃ重宝します。