tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

Parfait使ってpsd(Photoshopファイル)からweb情報抜き出して見るテスト

Photoshop カンプから、Web に必要なあらゆる情報を抽出する新ツール
という記事がUPされたのでさっそく使ってみます。

所感としてちょっとしたことやるにはすごくイイ!と思いました。

ってことで、使ってみた流れはこんな感じ

1.psdファイル用意(業務だったら元々あるでしょう)
2.parfaitにログイン
3.psdをドラッグ&ドロップ

これだけです。
仕事で使う場合は当然psdは用意するもなにもすでにあると思いますので
AdobeID持ってればドラッグ&ドロップだけですね

1.psdファイル用意(業務だったら元々あるでしょう)

今回はお試しで記事にも書くので公開されてるpsdファイルをここ↓あたりからもってきます
Webレイアウトデザインの参考にしたいPhotoshopチュートリアル25個まとめ(+サンプルPSD素材)

もともと使いそうなiPhoneアプリ販売用webレイアウト素材ということで
「Design a Sleek Mobile App Website」からサンプルPSDをダウンロードしてみました
ダウンロードしたファイルはLeaflet.psd
f:id:tweeeety:20140424110252p:plain

2.parfaitにログイン

AdobeID

Adobe Creative Cloudを使ったことがある方ならAdobeIDは持ってると思います。
持ってない方は体験版でも良いのでAdobeID取得してみてください。

デモ

どんなことができるかはParfaitにアクセスするだけでデモがさわれるのでそれだけでも良いかも。
デモはこんな感じ。
ためしに「CLICK THIS」という丸オブジェクトを選択すると
オブジェクトに関するStyelやら色やらが右サイドバーに出ます。
f:id:tweeeety:20140424110315p:plain

ログイン

ログインというか画面右上の「Upload your own PSD」をクリックすると
ログインしてない場合はログインフォームが表示されます。
ID/PASSを入力してSign in!
f:id:tweeeety:20140424110326p:plain

ログインするとこんなシンプルな画面が表示されます
まだ何もアップしてないからなんもないですね
f:id:tweeeety:20140424110335p:plain

3.psdをドラッグ&ドロップ

ドラッグ&ドロップ

後はこの画面にさきほどのLeaflet.psdをドラッグ&ドロップ!
f:id:tweeeety:20140424110404p:plain

10MB程度でしたがアップロードから描画まで1~3分かかったイメージです。
容量が多いと結構かかるかもですね
f:id:tweeeety:20140424110418p:plain

表示してみる

こんな感じに表示できました
f:id:tweeeety:20140424110426p:plain

サイドバーで「Layers」を選択するとレイヤーまで見れます
f:id:tweeeety:20140424110436p:plain


コーダーの方がデザインカンプからhtml/css組むときなどなど
ちょっとしたときに役立ちそうですね!

自分はサーバサイドエンジニアなので使うなら個人的にかなー