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

年末特別号：月刊ライトニングトーク2014年12月号発表資料

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
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*