Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
画像変換Night「ImageHayabusa」デザイン作業効率化
Gunther Brunner
February 18, 2015
Design
6
11k
画像変換Night「ImageHayabusa」デザイン作業効率化
http://hayabusa.io
Gunther Brunner
February 18, 2015
Tweet
Share
More Decks by Gunther Brunner
See All by Gunther Brunner
OpenSaaS Studio - 強いSaaSを作り続けるOpenSaaS Studioの挑戦
gunta
2
2.3k
OpenSTF @ Test Engineers' Meetup #3
gunta
1
790
Android Testing Bootcamp #2: OpenSTF
gunta
1
1.2k
Chrome Tech Night 8 - STF
gunta
0
79
CAOS 2015 Summer: Introducing Hayabusa
gunta
0
900
CAOS 2015 Summer: Introducing STF (Smartphone Test Farm)
gunta
1
1.5k
CAOS 2015 Summer: Hayabusa Internals
gunta
0
720
Are mobile HTML5 3D apps possible right now?
gunta
0
110
Frontrend Vol. 6:Android端末の動作検証の課題を解決「STF」
gunta
13
3.6k
Other Decks in Design
See All in Design
幸せなパーパス経営の実現に欠かせない、社員の「個人理念」の重要性と活用法
kakukoki
PRO
0
120
"Friendship" - Personal Story Sequence
innsamity
1
170
Shuv It Boards
8sided
PRO
1
190
UI/UXデザイナーになるには 日常編
kimurakei
0
380
Going in Circles
pandemonay
1
110
品質向上を目指す開発組織のデザインレビュー / SmartHR
kgsi
3
1.7k
We meet again
seleliao
0
370
hourly comics (2022)
gyroidz
0
220
クラスメソッドアプリデザインドリルver1
cmdesignteam
1
1.4k
STORES のデザインシステムのこれまでと現状
daitasu
0
750
NCDC_UXSession_20220120
ncdc
0
670
My Yahoo Refresh Overview
xuechunwu
0
260
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1020
410k
Designing for humans not robots
tammielis
241
23k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
GraphQLとの向き合い方2022年版
quramy
16
8.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
How to name files
jennybc
39
58k
Transcript
σβΠϯ࡞ۀޮԽ ImageHayabusa
@gunta85 Günther Brunner άϯλɾϒϧϯφʔ CyberAgent Creative Engineer
• σβΠφʔ 㱻 ϑϩϯτΤϯυɺωΠςΟϒΤϯδχΞ ͷؒʹେ͖͍ͳλΠϜϩε͕ൃੜ͢Δɻ • ϑϩϯτΤϯυʹඞཁͳૉࡐͷαΠζɺΓग़͠Λ ຖσβΠφʔʹґཔ͠ͳ͍ͱ͍͚ͳ͍ɻ •
ͦΕʹैͬͯσβΠφʔPSDΛ։͖ɺཔ·ΕͨαΠ ζͰΓग़͞ͳ͍ͱ͍͚ͳ͍ɻ
σβΠφʔ ΤϯδχΞ
ݱঢ়ͷϫʔΫϑϩʔ ͜Ε͔Β PSD AI σβΠφʔ ΤϯδχΞ Γग़͠ PNG? JPG? ϑϩϯτ࡞ۀ
ImageAlpha? ImageOptim? Grunt? WebP? SpriteSheet? SVN image320.jpg PSD AI Ϳ͞ /image.jpg?w=320 or
ݱঢ়ͷϫʔΫϑϩʔ ͜Ε͔Β PSD AI σβΠφʔ ΤϯδχΞ Γग़͠ PNG? JPG? ϑϩϯτ࡞ۀ
ImageAlpha? ImageOptim? Grunt? WebP? SpriteSheet? SVN image320.jpg PSD AI Ϳ͞ /image.jpg?w=320 or 30ඵ 10ʙ30 1࣌ؒʙ1
ϝϦοτ • ੍࡞ͷϑϩʔ͕ܶతʹૣ͘ͳΔ • ͋ΒΏΔϓϥοτϗʔϜʹ࠷దͳܗࣜ • ͋ΒΏΔσόΠεʹ࠷దͳαΠζ • σβΠϯͷ֬ೝ͕͙͢ʹग़དྷΔ Ϩεϙϯε্
ίετμϯ εϐʔυΞοϓ ଈ࣌λϒϨοτରԠ
ϝϦοτ
ϝϦοτ ࡞ۀָ͕ʹͳΔ
ղܾ
ೖྗϑΝΠϧ PSD, AI, PNG /images/image.psd
γϯϓϧUI
ग़ྗ REST API
JPEG - ෯ϦαΠζ /images/image.jpg?w=480 PNG32 - Retina/ImageOptim /images/image.w480.x2.png
PNG 7 bit - ImageAlpha /images/image.png?colors=128 JPEG - നࠇ /images/image.jpg?grayscale=true
PSD PSD
PNG - ΅͔͠ /images/image.png?blur=10 WebP - Android/iOS Native༻ /images/image.webp PSD
PSD WEBP
BPG (HEVC) > H.264 I-Frame > WebP > JPEG 2000
> JPEG XR > JPEG http://xooyoozoo.github.io/yolo-octo-bugfixes/ ը࣭ Web༻
ASTCɺETCɺPVRTCɺPVRTC.GZɺDXT5ɺ DDSɺCRNɺCRN.GZ GPUςΫενϟ༻
ETC - Android/WebGL༻ /images/image.etc PVRTC - Unity/iOS༻ /images/image.pvr?format=rgba4444 PVR GZIP
- iOS Native༻ /images/image.pvr.gz
ೖྗ /images/sprite.json { images: [ image1: "image1.png", image2: "image2.psd", image3:
"image3.jpg", image4: "image4.png", image5: "image5.png?w=200", ], max: { w: 2048, h: 2048 } } ग़ྗ /images/sprite.sheet.jpg /images/sprite.sheet.json ࣗಈੜεϓϥΠτγʔτ PSD
JPEG - PSDϨΠϠʔॻ͖ग़͠ /images/image.jpg?layer=ϨΠϠʔ໊
৴ܗࣜ • Amazon CloudFrontɺCloudFlare CDN৴ • HTTP/SPDY/HTTP 2.0ରԠͷΫϥυαʔϏε • ϛουϧΣΞͰߏஙՄೳʢϓϩδΣΫτʣ
• MacΞϓϦɺϩʔΧϧαʔόʔͰಈ͘
ϩʔΧϧͰಈ͘ • UnityͷΞηοτόϯυϧ • iOS/AndroidͷstaticΞηοτ /assets/image.w480.x2.png
ϑΝΠϧͷੜ࣌ • ҰճAPIΛୟ͍ͨΒɺม͢Δ • ͦΕҎ߱ɺΩϟογϡ͢Δ
CSSग़ྗใ •ϨΠϠʔϚεΫ •ΫϦοϐϯάϚεΫ •ϨΠϠʔϚεΫ •άϥσʔγϣϯ •ϨΠϠʔΧϯϓ •ௐϨΠϠʔ •ϦϯΫˍຒΊࠐΈεϚʔτΦϒδΣΫτ •ΞϧϑΝνϟϯωϧϚεΫ
CSSग़ྗ /images/image.css?layer=name .name { font-family: "Source Sans Pro"; color: rgba(69,
69, 69, 0.7); font-size: 36px; font-weight: 700; line-height: 36px; width: 253px; height: 69px; }
http://hayabusa.io ImageHayabusa @gunta85