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

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