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

http://hayabusa.io

Transcript

1. σβΠϯ࡞ۀޮ཰Խ
   ImageHayabusa
   

   View Slide

2. @gunta85
   Günther Brunner
   άϯλɾϒϧϯφʔ
   CyberAgent
   Creative Engineer
   

   View Slide

3. ໰୊
   • σβΠφʔ 㱻 ϑϩϯτΤϯυɺωΠςΟϒΤϯδχΞ
   ͷؒʹେ͖͍ͳλΠϜϩε͕ൃੜ͢Δɻ
   • ϑϩϯτΤϯυʹඞཁͳૉࡐͷαΠζɺ੾Γग़͠Λ

   ຖ౓σβΠφʔʹґཔ͠ͳ͍ͱ͍͚ͳ͍ɻ
   • ͦΕʹैͬͯσβΠφʔ΋PSDΛ։͖ɺཔ·ΕͨαΠ
   ζͰ੾Γग़͞ͳ͍ͱ͍͚ͳ͍ɻ
   

   View Slide

4. σβΠφʔ ΤϯδχΞ
   

   View Slide

5. ݱঢ়ͷϫʔΫϑϩʔ
   ͜Ε͔Β
   PSD
   AI
   σβΠφʔ ΤϯδχΞ
   ੾Γग़͠
   PNG? JPG?
   ϑϩϯτ࡞ۀ
   ImageAlpha?
   ImageOptim?
   Grunt?
   WebP?
   SpriteSheet?
   SVN
   image320.jpg
   PSD
   AI
   ͸΍Ϳ͞
   /image.jpg?w=320
   or
   

   View Slide

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೔
   

   View Slide

7. ϝϦοτ
   • ੍࡞ͷϑϩʔ͕ܶతʹૣ͘ͳΔ
   • ͋ΒΏΔϓϥοτϗʔϜʹ࠷దͳܗࣜ
   • ͋ΒΏΔσόΠεʹ࠷దͳαΠζ
   • σβΠϯͷ֬ೝ͕͙͢ʹग़དྷΔ
   Ϩεϙϯε޲্
   ίετμ΢ϯ
   εϐʔυΞοϓ
   ଈ࣌λϒϨοτରԠ
   

   View Slide

8. ϝϦοτ
   

   View Slide

9. ϝϦοτ
   ࡞ۀָ͕ʹͳΔ
   

   View Slide

10. ղܾ
    

    View Slide

11. ೖྗϑΝΠϧ
    PSD, AI, PNG
    /images/image.psd
    

    View Slide

12. γϯϓϧUI
    

    View Slide

13. ग़ྗ REST API
    

    View Slide

14. JPEG - ෯ϦαΠζ
    /images/image.jpg?w=480
    PNG32 - Retina/ImageOptim
    /images/image.w480.x2.png
    

    View Slide

15. PNG 7 bit - ImageAlpha
    /images/image.png?colors=128
    JPEG - നࠇ
    /images/image.jpg?grayscale=true
    PSD
    PSD
    

    View Slide

16. PNG - ΅͔͠
    /images/image.png?blur=10
    WebP - Android/iOS Native༻
    /images/image.webp
    PSD
    PSD WEBP
    

    View Slide

17. BPG (HEVC) > H.264 I-Frame >
    WebP > JPEG 2000 > JPEG XR > JPEG
    http://xooyoozoo.github.io/yolo-octo-bugfixes/
    ը࣭
    Web༻
    

    View Slide

18. ASTCɺETCɺPVRTCɺPVRTC.GZɺDXT5ɺ
    DDSɺCRNɺCRN.GZ
    GPUςΫενϟ༻
    

    View Slide

19. ETC - Android/WebGL༻
    /images/image.etc
    PVRTC - Unity/iOS༻
    /images/image.pvr?format=rgba4444
    PVR GZIP - iOS Native༻
    /images/image.pvr.gz
    

    View Slide

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
    

    View Slide

21. JPEG - PSDϨΠϠʔॻ͖ग़͠
    /images/image.jpg?layer=ϨΠϠʔ໊
    

    View Slide

22. ഑৴ܗࣜ
    • Amazon CloudFrontɺCloudFlare CDN഑৴
    • HTTP/SPDY/HTTP 2.0ରԠͷΫϥ΢υαʔϏε
    • ϛουϧ΢ΣΞͰ΋ߏஙՄೳʢϓϩδΣΫτ಺ʣ
    • MacΞϓϦɺϩʔΧϧαʔόʔͰ΋ಈ͘
    

    View Slide

23. ϩʔΧϧͰ΋ಈ͘
    • UnityͷΞηοτόϯυϧ
    • iOS/AndroidͷstaticΞηοτ
    /assets/image.w480.x2.png
    

    View Slide

24. ϑΝΠϧͷੜ੒࣌
    • Ұճ໨APIΛୟ͍ͨΒɺม׵͢Δ
    • ͦΕҎ߱ɺΩϟογϡ͢Δ
    

    View Slide

25. CSSग़ྗ৘ใ
    •ϨΠϠʔϚεΫ
    •ΫϦοϐϯάϚεΫ
    •ϨΠϠʔϚεΫ
    •άϥσʔγϣϯ
    •ϨΠϠʔΧϯϓ
    •ௐ੔ϨΠϠʔ
    •ϦϯΫˍຒΊࠐΈεϚʔτΦϒδΣΫτ
    •ΞϧϑΝνϟϯωϧϚεΫ
    

    View Slide

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;
    }
    

    View Slide

27. http://hayabusa.io
    ImageHayabusa
    @gunta85
    

    View Slide