年末特別号:月刊ライトニングトーク2014年12月号発表資料
2014.12.12 (Fri)年末特別号:月刊ライトニングトーク2014年12月号とにかく時間が無い案件を乗り切る画像書き出し沖 良矢(世路庵)
View Slide
自己紹介沖 良矢 / 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の利用が必須
demoExtract
Creative Cloud Filesとは何か簡単に言うと「Dropboxみたいなやつ」無償メンバーで2GB、各種有償メンバーで20GB最大の特徴はブラウザでのプレビュー(PSD, AI, INDDなど)
demoCreative Cloud Files
実際に使ってみて分かった問題極端に大きいファイルサイズのPSDをアップロードすると、処理できないことがある塗り0%のシェイプの大きさを取得できないブレンドモードなど一部機能は表示されない(今のところWebでは使えないのでむしろいいかも)
せやけどブラウザとエディタを行き来するの面倒やん!
DemoExtract for Brackets
実際に使ってみて分かった問題日本語テキストをコピーすると文字参照になるCSSの丸ごとコピーが使えない
まとめCreative Cloud FilesにExtract機能があるExtract for Bracketsで画像書き出しを神速に!
中野の勉強会Chapter.3
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*