PSDファイルから直接ライブデザインで短納期対応

Kazuma Sekiguchi

Who?

関 口 和 真

Comcent,Inc CTO

システム開発、WebDesign、講師

Adobe Pinch Inでたまに連載『コードを打たずにページを見たまま編集・作成』

Agenda

今までのワークフロー

Photoshop Generatorの活用

Dreamweaver Extractの利用

今までのワークフロー

主役はスライスツール

テキスト情報は別渡し

またはPSDを開いて1つ1つコピペ

PSD

PNG GIF JPEG

高解像度対応

スライスは非常に手間が掛かる

2倍、3倍サイズの画像が必要

スライスだけでは対応できない

CSSやSVGで実現した方が良い場面も

Adobe Generator

Photoshop CC 2014から搭載された機能

スライス無しに画像ファイルを抽出

レイヤー名を変更し形式、ファイル名を指定

GIF、JPEG、PNG、SVGを選択可能

2014.2からUIが搭載

DEMOG e n e r a t o r

Extract

DreamweaverやCreative Cloudのアセット上で利用可能

Dreamweaver CC 2014.1から統合

PSDファイルから画像を抽出

スライス無しに必要な画像を選択して使える

Extract

レイヤー構造を理解

シェイプカラーやフォント情報も取得

指定した倍率に拡大、縮小可能

Dreamweaver上でPSDのCSSを抽出

PSD上に記述してあるテキストをコピー

DEMOE x t r a c t

PSDファイルを共有

PSDファイルをCreative Cloudにアップロード

ファイルを共有できるため、チームで再利用可能

PSDカンプを共有すればチームですべての情報が使える

PSD

まとめ

スライスを入れること無く画像を利用

高解像度にもそのまま対応

テキスト、CSSをそのままコピー

デザインカンプを確認しながらのコーディングが可能

PSDと機能を最大限活用することで、効率的な作成が可能に

おまけ

ExtractはオープンソースエディタのBrackets 1.0にもプレビュー版が搭載

無料で使えてしまう

Thank you効率的なWeb制作を！

PSDサンプルファイル

デモで利用したサンプルファイルをダウンロードできますhttps://dl.dropboxusercontent.com/u/644781/bestofmaxDwPs.zip

よりダウンロードできます

再配付不可

学習用途としてのみ利用可能