Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

448jp | OKI Yoshiya

December 13, 2014
Tweet

More Decks by 448jp | OKI Yoshiya

Other Decks in Technology

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