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

自己紹介 沖 良矢 / OKI Yoshiya @448jp インタラクションデザイナー DAIHATSU The 43rd TMS (2013) Web Designing (2009～) UNIQLO HAPPY GIFT (2013)

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

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

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

これまでの手法は？ ex.) Generator, Slicy, Cut&Slice me… ■難点 • 新しいOSの対応 • 新しいバージョンのPhotoshopへの対応 • 領域を指定して書き出せない • レイヤー名を付けるのが面倒 • 修正に弱い

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

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

そこで「Creative Cloud Extract」

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

demo Extract

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

demo Creative Cloud Files

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

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

Demo Extract for Brackets

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

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

中野の勉強会 Chapter.3

No content

DISTは、 Web制作にまつわるあらゆることを、 みんなで集まって学んでいく新しい会。 DIST is a new meet-up to go to learn to get together with everyone, that all surrounding web production.

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

Thank you ! Photo Credit:  RubioBuitrago  Matthew Nasholm  mak1e  *christopher*