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
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
3.3k
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
15
6.5k
Breaking Down Enterprise AI Tool Adoption Barriers in Japan: CyberAgent's Cursor Implementation Strategy
gunta
0
120
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
45
32k
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
6
1.3k
Feature FlagsのDX/UXの 頂点「 DevCycle 」に 辿り着くまでの道のり
gunta
5
1.7k
OpenSaaS Studio - 強いSaaSを作り続けるOpenSaaS Studioの挑戦
gunta
3
3.1k
OpenSTF @ Test Engineers' Meetup #3
gunta
1
1.4k
Android Testing Bootcamp #2: OpenSTF
gunta
1
1.4k
Other Decks in Design
See All in Design
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
160
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
370
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
220
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
110
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
140
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
420
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
870
maki setoguchi
maki_setoguchi
0
450
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
180
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
340
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Navigating Team Friction
lara
190
15k
Designing for humans not robots
tammielis
254
26k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Unsuck your backbone
ammeep
671
58k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Automating Front-end Workflow
addyosmani
1371
200k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
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