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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. そこで「Creative Cloud Extract」
   

   View Slide

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

    View Slide

11. demo
    Extract
    

    View Slide

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

    View Slide

13. demo
    Creative Cloud Files
    

    View Slide

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

    View Slide

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

    View Slide

16. Demo
    Extract for Brackets
    

    View Slide

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

    View Slide

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

    View Slide

19. 中野の勉強会
    Chapter.3
    

    View Slide

20. View Slide

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

    View Slide

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

    View Slide

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

    View Slide