画像変換Night「ImageHayabusa」デザイン作業効率化

http://hayabusa.io

Transcript

1. σβΠϯ࡞ۀޮ཰Խ ImageHayabusa
2. @gunta85 Günther Brunner άϯλɾϒϧϯφʔ CyberAgent Creative Engineer
3. ໰୊ • σβΠφʔ 㱻 ϑϩϯτΤϯυɺωΠςΟϒΤϯδχΞ ͷؒʹେ͖͍ͳλΠϜϩε͕ൃੜ͢Δɻ • ϑϩϯτΤϯυʹඞཁͳૉࡐͷαΠζɺ੾Γग़͠Λ
 ຖ౓σβΠφʔʹґཔ͠ͳ͍ͱ͍͚ͳ͍ɻ • ͦΕʹैͬͯσβΠφʔ΋PSDΛ։͖ɺཔ·ΕͨαΠ ζͰ੾Γग़͞ͳ͍ͱ͍͚ͳ͍ɻ
4. σβΠφʔ ΤϯδχΞ
5. ݱঢ়ͷϫʔΫϑϩʔ ͜Ε͔Β PSD AI σβΠφʔ ΤϯδχΞ ੾Γग़͠ PNG? JPG? ϑϩϯτ࡞ۀ ImageAlpha? ImageOptim? Grunt? WebP? SpriteSheet? SVN image320.jpg PSD AI ͸΍Ϳ͞ /image.jpg?w=320 or
6. ݱঢ়ͷϫʔΫϑϩʔ ͜Ε͔Β PSD AI σβΠφʔ ΤϯδχΞ ੾Γग़͠ PNG? JPG? ϑϩϯτ࡞ۀ ImageAlpha? ImageOptim? Grunt? WebP? SpriteSheet? SVN image320.jpg PSD AI ͸΍Ϳ͞ /image.jpg?w=320 or 30ඵ 10෼ʙ30෼ 1࣌ؒʙ1೔
7. ϝϦοτ • ੍࡞ͷϑϩʔ͕ܶతʹૣ͘ͳΔ • ͋ΒΏΔϓϥοτϗʔϜʹ࠷దͳܗࣜ • ͋ΒΏΔσόΠεʹ࠷దͳαΠζ • σβΠϯͷ֬ೝ͕͙͢ʹग़དྷΔ Ϩεϙϯε޲্ ίετμ΢ϯ εϐʔυΞοϓ ଈ࣌λϒϨοτରԠ
8. ϝϦοτ
9. ϝϦοτ ࡞ۀָ͕ʹͳΔ
10. ղܾ
11. ೖྗϑΝΠϧ PSD, AI, PNG /images/image.psd
12. γϯϓϧUI
13. ग़ྗ REST API
14. JPEG - ෯ϦαΠζ /images/image.jpg?w=480 PNG32 - Retina/ImageOptim /images/image.w480.x2.png
15. PNG 7 bit - ImageAlpha /images/image.png?colors=128 JPEG - നࠇ /images/image.jpg?grayscale=true PSD PSD
16. PNG - ΅͔͠ /images/image.png?blur=10 WebP - Android/iOS Native༻ /images/image.webp PSD PSD WEBP
17. BPG (HEVC) > H.264 I-Frame > WebP > JPEG 2000 > JPEG XR > JPEG http://xooyoozoo.github.io/yolo-octo-bugfixes/ ը࣭ Web༻
18. ASTCɺETCɺPVRTCɺPVRTC.GZɺDXT5ɺ DDSɺCRNɺCRN.GZ GPUςΫενϟ༻
19. ETC - Android/WebGL༻ /images/image.etc PVRTC - Unity/iOS༻ /images/image.pvr?format=rgba4444 PVR GZIP - iOS Native༻ /images/image.pvr.gz
20. ೖྗ /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
21. JPEG - PSDϨΠϠʔॻ͖ग़͠ /images/image.jpg?layer=ϨΠϠʔ໊
22. ഑৴ܗࣜ • Amazon CloudFrontɺCloudFlare CDN഑৴ • HTTP/SPDY/HTTP 2.0ରԠͷΫϥ΢υαʔϏε • ϛουϧ΢ΣΞͰ΋ߏஙՄೳʢϓϩδΣΫτ಺ʣ • MacΞϓϦɺϩʔΧϧαʔόʔͰ΋ಈ͘
23. ϩʔΧϧͰ΋ಈ͘ • UnityͷΞηοτόϯυϧ • iOS/AndroidͷstaticΞηοτ /assets/image.w480.x2.png
24. ϑΝΠϧͷੜ੒࣌ • Ұճ໨APIΛୟ͍ͨΒɺม׵͢Δ • ͦΕҎ߱ɺΩϟογϡ͢Δ
25. CSSग़ྗ৘ใ •ϨΠϠʔϚεΫ •ΫϦοϐϯάϚεΫ •ϨΠϠʔϚεΫ •άϥσʔγϣϯ •ϨΠϠʔΧϯϓ •ௐ੔ϨΠϠʔ •ϦϯΫˍຒΊࠐΈεϚʔτΦϒδΣΫτ •ΞϧϑΝνϟϯωϧϚεΫ
26. 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; }
27. http://hayabusa.io ImageHayabusa @gunta85