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
420
とにかく時間が無い案件を乗り切る画像書き出し
年末特別号:月刊ライトニングトーク2014年12月号発表資料
448jp | OKI Yoshiya
December 13, 2014
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
570
合意形成のためのFigma活用術
448jp
0
32
書く・即・DONEな仕組みをNuxtで作る
448jp
0
310
神速でワイヤーフレームを作るためのライブラリ
448jp
1
790
Figmaで神速ドキュメント作成術
448jp
3
2.1k
今から始めるFigma超入門
448jp
0
1.5k
零細Web制作会社のリモートワーク事情
448jp
0
360
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
700
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
250
Other Decks in Technology
See All in Technology
なぜCodeceptJSを選んだか
goataka
0
150
Wantedly での Datadog 活用事例
bgpat
1
400
私なりのAIのご紹介 [2024年版]
qt_luigi
1
120
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
23
11k
オプトインカメラ:UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
170
AIのコンプラは何故しんどい?
shujisado
1
190
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
2
260
WACATE2024冬セッション資料(ユーザビリティ)
scarletplover
0
190
podman_update_2024-12
orimanabu
1
260
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
20241220_S3 tablesの使い方を検証してみた
handy
3
190
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
420
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
A designer walks into a library…
pauljervisheath
204
24k
Six Lessons from altMBA
skipperchong
27
3.5k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Building Your Own Lightsaber
phodgson
103
6.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Embracing the Ebb and Flow
colly
84
4.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Scaling GitHub
holman
458
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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*