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
460
とにかく時間が無い案件を乗り切る画像書き出し
年末特別号:月刊ライトニングトーク2014年12月号発表資料
448jp | OKI Yoshiya
December 13, 2014
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
人はなぜコミュニティとつながると幸せを感じるのか
448jp
3
300
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.7k
合意形成のためのFigma活用術
448jp
0
120
書く・即・DONEな仕組みをNuxtで作る
448jp
0
380
神速でワイヤーフレームを作るためのライブラリ
448jp
1
860
Figmaで神速ドキュメント作成術
448jp
3
2.5k
今から始めるFigma超入門
448jp
0
1.6k
零細Web制作会社のリモートワーク事情
448jp
0
420
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
760
Other Decks in Technology
See All in Technology
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
220
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
110
スプリントゴール未達症候群に送る処方箋
kakehashi
PRO
1
190
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
130
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
190
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
480
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
160
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
6
240
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
6
1k
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
510
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
230
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
110
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Practical Orchestrator
shlominoach
189
11k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Balancing Empowerment & Direction
lara
1
490
Automating Front-end Workflow
addyosmani
1370
200k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Cult of Friendly URLs
andyhume
79
6.5k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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*