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

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

そんな作業を楽にできるツール Project Parfait(プロジェクトパフェ)を見つけましので紹介し、解説して見たいと思います。。

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

http://www.ustream.tv/recorded/54684976


Ustream.tv: ユーザー AdobeJapan: #69 Web制作新ワークフロー Creative Cloud Extract | Creative Cloud 道場, Creative Cloud道場 第69回:Web制作新ワークフロー Creative Cloud Extract MAX 20...

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

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

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

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

Project Parfait

https://projectparfait.adobe.com/

Project Parfaitの使い方

f:id:infinity-design:20150111201503p:plain

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

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

縦横値、XY軸値、Text抽出、CSS抽出

f:id:infinity-design:20150111201720p:plain

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

オブジェクト間の計測

f:id:infinity-design:20150111202116p:plain

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

JPG/PNG/SVGへ画像書き出し

f:id:infinity-design:20150111202125p:plain

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

 

 

 

 

Illustrator CCで寸法線とかフォント指定などの情報をサクっと描けちゃうSpecctrが最強!

これは便利
http://www.dtp-transit.jp/adobe/illustrator/post_1759.html

紹介します。本当に便利です。

Fireworksの機能拡張として開発されていた「Specctr」(スペクター)が、なんとIllustrator CC対応になっています。

SpecctrPreview.png

Specctrを使うことで次のことが可能になります(単位は選択している単位の種類に依存します)。

  • 選択したオブジェクトの幅、高さを計測して寸法線として描画する
  • 2つのオブジェクトの間隔を計測して寸法線として描画する
  • オブジェクトを1つだけ選択しているときには、アートボードの上と左からの距離を計測して描画
  • 選択したオブジェクトの塗りや線、不透明度などの情報を描画する
  • 選択したテキストのフォント、フォントサイズ、塗りなどの情報を描画する

Web制作を行われている方なら説明不要だと思いますが、カンプなどを作成するとき、ビジュアルデザイナーからコーダーへの申し送りの際に、むちゃくちゃ重宝します。

 

2015年 新たな再出発です。

2015年 あけましておめでとうございます。

さあ、今年は僕にとって再出発の年になります。

7年前に脳の病で余儀なく入院せざるを得なくなり、リハビリも含めると5年間の入院でした。そして身体障害者として簡単な仕事に3年間従事し、体を1日のリズムも慣れてきました。

満をじして、変化激しいWebの世界に「フリーランス」として戻ってきます。

もう、無理は効かない体ですが、楽しんで仕事をするつもりです。

新しくこのBlogを開設したのもその表れ。

 

f:id:infinity-design:20150102125111j:plain