Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
とにかく時間が無い案件を乗り切る画像書き出し
Search
448jp | OKI Yoshiya
December 13, 2014
Technology
1
450
とにかく時間が無い案件を乗り切る画像書き出し
年末特別号:月刊ライトニングトーク2014年12月号発表資料
448jp | OKI Yoshiya
December 13, 2014
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
人はなぜコミュニティとつながると幸せを感じるのか
448jp
3
290
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.7k
合意形成のためのFigma活用術
448jp
0
120
書く・即・DONEな仕組みをNuxtで作る
448jp
0
370
神速でワイヤーフレームを作るためのライブラリ
448jp
1
850
Figmaで神速ドキュメント作成術
448jp
3
2.4k
今から始めるFigma超入門
448jp
0
1.6k
零細Web制作会社のリモートワーク事情
448jp
0
420
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
750
Other Decks in Technology
See All in Technology
Github Copilot エージェントモードで試してみた
ochtum
0
110
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
140
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
550
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
3
130
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
130
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
spatial_ai_network
0
110
5min GuardDuty Extended Threat Detection EKS
takakuni
0
150
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.3k
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
110
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
320
Prox Industries株式会社 会社紹介資料
proxindustries
0
320
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Become a Pro
speakerdeck
PRO
28
5.4k
Docker and Python
trallard
44
3.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Building an army of robots
kneath
306
45k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Raft: Consensus for Rubyists
vanstee
140
7k
Transcript
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
None
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*