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

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

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

Cb42953bfedcd81daf5b1330d98712c3?s=128

448jp | OKI Yoshiya

December 13, 2014
Tweet

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*