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
2.parfaitにログイン
AdobeID
Adobe Creative Cloudを使ったことがある方ならAdobeIDは持ってると思います。
持ってない方は体験版でも良いのでAdobeID取得してみてください。
デモ
どんなことができるかはParfaitにアクセスするだけでデモがさわれるのでそれだけでも良いかも。
デモはこんな感じ。
ためしに「CLICK THIS」という丸オブジェクトを選択すると
オブジェクトに関するStyelやら色やらが右サイドバーに出ます。
ログイン
ログインというか画面右上の「Upload your own PSD」をクリックすると
ログインしてない場合はログインフォームが表示されます。
ID/PASSを入力してSign in！
ログインするとこんなシンプルな画面が表示されます
まだ何もアップしてないからなんもないですね
3.psdをドラッグ＆ドロップ
ドラッグ＆ドロップ
後はこの画面にさきほどのLeaflet.psdをドラッグ＆ドロップ！
10MB程度でしたがアップロードから描画まで1～3分かかったイメージです。
容量が多いと結構かかるかもですね
表示してみる
こんな感じに表示できました
サイドバーで「Layers」を選択するとレイヤーまで見れます
コーダーの方がデザインカンプからhtml/css組むときなどなど
ちょっとしたときに役立ちそうですね！
自分はサーバサイドエンジニアなので使うなら個人的にかなー
