psdファイルから直接ライブデザインで
TRANSCRIPT
![Page 1: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/1.jpg)
PSDファイルから直接ライブデザインで短納期対応
Kazuma Sekiguchi
![Page 2: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/2.jpg)
Who?
関 口 和 真
Comcent,Inc CTO
システム開発、WebDesign、講師
Adobe Pinch Inでたまに連載『コードを打たずにページを見たまま編集・作成』
![Page 3: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/3.jpg)
Agenda
今までのワークフロー
Photoshop Generatorの活用
Dreamweaver Extractの利用
![Page 4: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/4.jpg)
今までのワークフロー
主役はスライスツール
テキスト情報は別渡し
またはPSDを開いて1つ1つコピペ
PSD
PNG GIF JPEG
![Page 5: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/5.jpg)
高解像度対応
スライスは非常に手間が掛かる
2倍、3倍サイズの画像が必要
スライスだけでは対応できない
CSSやSVGで実現した方が良い場面も
![Page 6: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/6.jpg)
Adobe Generator
Photoshop CC 2014から搭載された機能
スライス無しに画像ファイルを抽出
レイヤー名を変更し形式、ファイル名を指定
GIF、JPEG、PNG、SVGを選択可能
2014.2からUIが搭載
![Page 7: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/7.jpg)
DEMOG e n e r a t o r
![Page 8: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/8.jpg)
Extract
DreamweaverやCreative Cloudのアセット上で利用可能
Dreamweaver CC 2014.1から統合
PSDファイルから画像を抽出
スライス無しに必要な画像を選択して使える
![Page 9: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/9.jpg)
Extract
レイヤー構造を理解
シェイプカラーやフォント情報も取得
指定した倍率に拡大、縮小可能
Dreamweaver上でPSDのCSSを抽出
PSD上に記述してあるテキストをコピー
![Page 10: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/10.jpg)
DEMOE x t r a c t
![Page 11: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/11.jpg)
PSDファイルを共有
PSDファイルをCreative Cloudにアップロード
ファイルを共有できるため、チームで再利用可能
PSDカンプを共有すればチームですべての情報が使える
PSD
![Page 12: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/12.jpg)
まとめ
スライスを入れること無く画像を利用
高解像度にもそのまま対応
テキスト、CSSをそのままコピー
デザインカンプを確認しながらのコーディングが可能
PSDと機能を最大限活用することで、効率的な作成が可能に
![Page 13: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/13.jpg)
おまけ
ExtractはオープンソースエディタのBrackets 1.0にもプレビュー版が搭載
無料で使えてしまう
![Page 14: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/14.jpg)
Thank you効率的なWeb制作を!
![Page 15: PSDファイルから直接ライブデザインで](https://reader036.vdocuments.pub/reader036/viewer/2022071813/55a26ca91a28ab324a8b481e/html5/thumbnails/15.jpg)
PSDサンプルファイル
デモで利用したサンプルファイルをダウンロードできますhttps://dl.dropboxusercontent.com/u/644781/bestofmaxDwPs.zip
よりダウンロードできます
再配付不可
学習用途としてのみ利用可能