CREATE NOW "Best of MAX"内で講演した際のスライドです。

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

2. Who?
関口和真
Comcent,IncCTO
システム開発、WebDesign、講師
Adobe Pinch Inでたまに連載
『コードを打たずにページを見たまま編集・作成』

3. Agenda
今までのワークフロー
Photoshop Generatorの活用
Dreamweaver Extractの利用

4. 今までのワークフロー
主役はスライスツール
テキスト情報は別渡し
またはPSDを開いて1つ1つコピペ
PSD
PNG
GIF
JPEG

5. 高解像度対応
スライスは非常に手間が掛かる
2倍、3倍サイズの画像が必要
スライスだけでは対応できない
CSSやSVGで実現した方が良い場面も

6. Adobe Generator
PhotoshopCC 2014から搭載された機能
スライス無しに画像ファイルを抽出
レイヤー名を変更し形式、ファイル名を指定
GIF、JPEG、PNG、SVGを選択可能 2014.2からUIが搭載

7. DEMO
Generator

8. Extract
DreamweaverやCreative Cloudの アセット上で利用可能
Dreamweaver CC 2014.1から統合
PSDファイルから画像を抽出
スライス無しに必要な画像を選択して使える

9. Extract
レイヤー構造を理解
シェイプカラーやフォント情報も取得
指定した倍率に拡大、縮小可能
Dreamweaver上でPSDのCSSを抽出
PSD上に記述してあるテキストをコピー

10. DEMO
Extract

11. PSDファイルを共有
PSDファイルをCreative Cloudにアップロード
ファイルを共有できるため、チームで再利用可能
PSDカンプを共有すればチームですべての情報が使える
PSD

12. まとめ
スライスを入れること無く画像を利用
高解像度にもそのまま対応
テキスト、CSSをそのままコピー
デザインカンプを確認しながらのコーディングが可能
PSDと機能を最大限活用することで、効率的な作成が可能に

13. おまけ
Extractはオープンソースエディタの Brackets 1.0にもプレビュー版が搭載
無料で使えてしまう

14. Thank you
効率的なWeb制作を！

15. PSDサンプルファイル
デモで利用したサンプルファイルをダウンロードできます
https://dl.dropboxusercontent.com/u/644781/bestofmaxDwPs.zip
よりダウンロードできます
再配付不可
学習用途としてのみ利用可能