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
画像変換Night「ImageHayabusa」デザイン作業効率化
Search
Gunther Brunner
February 18, 2015
Design
6
12k
画像変換Night「ImageHayabusa」デザイン作業効率化
http://hayabusa.io
Gunther Brunner
February 18, 2015
Tweet
Share
More Decks by Gunther Brunner
See All by Gunther Brunner
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
520
Feature FlagsのDX/UXの 頂点「 DevCycle 」に 辿り着くまでの道のり
gunta
5
1.5k
OpenSaaS Studio - 強いSaaSを作り続けるOpenSaaS Studioの挑戦
gunta
3
3k
OpenSTF @ Test Engineers' Meetup #3
gunta
1
1.3k
Android Testing Bootcamp #2: OpenSTF
gunta
1
1.3k
Chrome Tech Night 8 - STF
gunta
0
140
CAOS 2015 Summer: Introducing Hayabusa
gunta
0
950
CAOS 2015 Summer: Introducing STF (Smartphone Test Farm)
gunta
1
1.7k
CAOS 2015 Summer: Hayabusa Internals
gunta
0
760
Other Decks in Design
See All in Design
Rayout Pattern 01
one0
0
1.6k
Personal Story Sequence - Vendetta(WIP)
elrns88
0
450
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
3
150
How to go from research data to insights?
mastervicedesign
0
250
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
970
Cards | Storyboards
giofortuna_story
0
130
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
4.4k
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
230
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
210
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
310
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.3k
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
500
Featured
See All Featured
Optimizing for Happiness
mojombo
377
70k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Into the Great Unknown - MozCon
thekraken
35
1.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
Typedesign – Prime Four
hannesfritz
41
2.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
How GitHub (no longer) Works
holman
314
140k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Practical Orchestrator
shlominoach
186
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Site-Speed That Sticks
csswizardry
4
450
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