とにかく時間が無い案件を乗り切る画像書き出し

Transcript

1. 2014.12.12 (Fri) 年末特別号：月刊ライトニングトーク2014年12月号 とにかく時間が無い 案件を乗り切る画像書き出し 沖 良矢（世路庵）

2. 自己紹介 沖 良矢 / OKI Yoshiya @448jp インタラクションデザイナー DAIHATSU The

   43rd TMS (2013) Web Designing (2009～) UNIQLO HAPPY GIFT (2013)

3. 今日話すこと 画像書き出しにおける問題点 神速！画像書き出し 中野の勉強会

4. 画像書き出しにおける 問題点 Chapter.1

5. PSDから画像を書き出すのは ダルイ

6. これまでの手法は？ ex.) Generator, Slicy, Cut&Slice me… ▪難点 • 新しいOSの対応 •

   新しいバージョンのPhotoshopへの対応 • 領域を指定して書き出せない • レイヤー名を付けるのが面倒 • 修正に弱い

7. そもそも画像書き出しとは 1. ホーリーシットな レイヤー構造を調整 2.PSDから適切なサイズ、ファイルタイプ、色数で 画像ファイルを書き出し 3.HTMLを書きながら幅、高さ、alt属性を入力 4.CSSやWebフォントで描画できるものは別途対応 5.必要に応じてCSSスプライト、減色などの最適化

8. 神速！画像書き出し Chapter.2

9. そこで「Creative Cloud Extract」

10. Extractとは何か 一言で言うと「ブラウザでPSDのアレコレを見る機能」 あくまで「見る」だけ、「編集」はできない ただし「見る」能力がハンパない Creative Cloud Filesの利用が必須

11. demo Extract

12. Creative Cloud Filesとは何か 簡単に言うと「Dropboxみたいなやつ」 無償メンバーで2GB、各種有償メンバーで20GB 最大の特徴はブラウザでのプレビュー （PSD, AI, INDDなど）

13. demo Creative Cloud Files

14. 実際に使ってみて分かった問題 極端に大きいファイルサイズのPSDをアップロードす ると、処理できないことがある 塗り0%のシェイプの大きさを取得できない ブレンドモードなど一部機能は表示されない （今のところWebでは使えないのでむしろいいかも）

15. せやけど ブラウザとエディタを行き来するの 面倒やん！

16. Demo Extract for Brackets

17. 実際に使ってみて分かった問題 日本語テキストをコピーすると文字参照になる CSSの丸ごとコピーが使えない

18. まとめ Creative Cloud FilesにExtract機能がある Extract for Bracketsで画像書き出しを神速に！

19. 中野の勉強会 Chapter.3

20. None

21. DISTは、 Web制作にまつわるあらゆることを、 みんなで集まって学んでいく新しい会。 DIST is a new meet-up to go

    to learn to get together with everyone, that all surrounding web production.

22. これまでに話されたこと  そろそろ私もタスクランナー使ってみようか しら  "これどうやるの？"の無駄を生まないデザイ ナーとエンジニアの分業体制  「その便利そうなやつ、何使ってるんです か？」的ツール百選

     通常の3倍の速度でプログラミング!?Emacsキー バインドのすすめ  モックアップやプロトタイプづくりを加速さ せる。それが SVG。  Titaniumを使って30分でDISTイベントアプリを 作ったよ  制作環境を極限まで効率化するマシン構築術  Photoshopで繰り返してる作業に効く！ JSX自動処理！  レイヤーのフィルタリングを活用しよう！  それでもPhotoshopを選ぶ？ 設計をラクにするデザインワークフローとは  画像を書きだそう  絵描きさんのあるあるPhotoshop技  Photoshopから自動で書きだした画像をちょっ と手直ししよう  小さな面倒を解消するjsx群

23. Thank you ! Photo Credit:  RubioBuitrago  Matthew Nasholm

     mak1e  *christopher*